commit 332776921f20c899474787ad78ccc859226c4dde Author: tobi Date: Mon May 9 13:22:27 2022 +0200 initial diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..02e08fc Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md new file mode 100644 index 0000000..a21b23d --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +# Website kraut.word +This website marks the entry point to Kraut.World and is used as the main domain for the project. + +# Languages +This website is available in English, French and German. + +# Licence +[**CC-BY-NC-ND**](https://creativecommons.org/licenses/by-nc-nd/4.0/) (KABI.tk Fancy Media and Communications); some parts and scripting by Vertex9 LLC are fully licensed for KABI.tk; some helpful snippets are under MIT licence as stated in the files separately. \ No newline at end of file diff --git a/assets/.DS_Store b/assets/.DS_Store new file mode 100644 index 0000000..8a78852 Binary files /dev/null and b/assets/.DS_Store differ diff --git a/assets/css/fontawesome-all.min.css b/assets/css/fontawesome-all.min.css new file mode 100644 index 0000000..d572bbf --- /dev/null +++ b/assets/css/fontawesome-all.min.css @@ -0,0 +1,259 @@ +/*! + * Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com + * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) + */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +.fa,.fab,.fal,.far,.fas{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:.08em solid #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fab.fa-pull-left,.fal.fa-pull-left,.far.fa-pull-left,.fas.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fab.fa-pull-right,.fal.fa-pull-right,.far.fa-pull-right,.fas.fa-pull-right{margin-left:.3em}.fa-spin{animation:fa-spin 2s infinite linear}.fa-pulse{animation:fa-spin 1s infinite steps(8)}@keyframes fa-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";transform:scaleX(-1)}.fa-flip-vertical{transform:scaleY(-1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical,.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)"}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{transform:scale(-1)}:root .fa-flip-both,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270{filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:"\f26e"}.fa-accessible-icon:before{content:"\f368"}.fa-accusoft:before{content:"\f369"}.fa-acquisitions-incorporated:before{content:"\f6af"}.fa-ad:before{content:"\f641"}.fa-address-book:before{content:"\f2b9"}.fa-address-card:before{content:"\f2bb"}.fa-adjust:before{content:"\f042"}.fa-adn:before{content:"\f170"}.fa-adobe:before{content:"\f778"}.fa-adversal:before{content:"\f36a"}.fa-affiliatetheme:before{content:"\f36b"}.fa-air-freshener:before{content:"\f5d0"}.fa-airbnb:before{content:"\f834"}.fa-algolia:before{content:"\f36c"}.fa-align-center:before{content:"\f037"}.fa-align-justify:before{content:"\f039"}.fa-align-left:before{content:"\f036"}.fa-align-right:before{content:"\f038"}.fa-alipay:before{content:"\f642"}.fa-allergies:before{content:"\f461"}.fa-amazon:before{content:"\f270"}.fa-amazon-pay:before{content:"\f42c"}.fa-ambulance:before{content:"\f0f9"}.fa-american-sign-language-interpreting:before{content:"\f2a3"}.fa-amilia:before{content:"\f36d"}.fa-anchor:before{content:"\f13d"}.fa-android:before{content:"\f17b"}.fa-angellist:before{content:"\f209"}.fa-angle-double-down:before{content:"\f103"}.fa-angle-double-left:before{content:"\f100"}.fa-angle-double-right:before{content:"\f101"}.fa-angle-double-up:before{content:"\f102"}.fa-angle-down:before{content:"\f107"}.fa-angle-left:before{content:"\f104"}.fa-angle-right:before{content:"\f105"}.fa-angle-up:before{content:"\f106"}.fa-angry:before{content:"\f556"}.fa-angrycreative:before{content:"\f36e"}.fa-angular:before{content:"\f420"}.fa-ankh:before{content:"\f644"}.fa-app-store:before{content:"\f36f"}.fa-app-store-ios:before{content:"\f370"}.fa-apper:before{content:"\f371"}.fa-apple:before{content:"\f179"}.fa-apple-alt:before{content:"\f5d1"}.fa-apple-pay:before{content:"\f415"}.fa-archive:before{content:"\f187"}.fa-archway:before{content:"\f557"}.fa-arrow-alt-circle-down:before{content:"\f358"}.fa-arrow-alt-circle-left:before{content:"\f359"}.fa-arrow-alt-circle-right:before{content:"\f35a"}.fa-arrow-alt-circle-up:before{content:"\f35b"}.fa-arrow-circle-down:before{content:"\f0ab"}.fa-arrow-circle-left:before{content:"\f0a8"}.fa-arrow-circle-right:before{content:"\f0a9"}.fa-arrow-circle-up:before{content:"\f0aa"}.fa-arrow-down:before{content:"\f063"}.fa-arrow-left:before{content:"\f060"}.fa-arrow-right:before{content:"\f061"}.fa-arrow-up:before{content:"\f062"}.fa-arrows-alt:before{content:"\f0b2"}.fa-arrows-alt-h:before{content:"\f337"}.fa-arrows-alt-v:before{content:"\f338"}.fa-artstation:before{content:"\f77a"}.fa-assistive-listening-systems:before{content:"\f2a2"}.fa-asterisk:before{content:"\f069"}.fa-asymmetrik:before{content:"\f372"}.fa-at:before{content:"\f1fa"}.fa-atlas:before{content:"\f558"}.fa-atlassian:before{content:"\f77b"}.fa-atom:before{content:"\f5d2"}.fa-audible:before{content:"\f373"}.fa-audio-description:before{content:"\f29e"}.fa-autoprefixer:before{content:"\f41c"}.fa-avianex:before{content:"\f374"}.fa-aviato:before{content:"\f421"}.fa-award:before{content:"\f559"}.fa-aws:before{content:"\f375"}.fa-baby:before{content:"\f77c"}.fa-baby-carriage:before{content:"\f77d"}.fa-backspace:before{content:"\f55a"}.fa-backward:before{content:"\f04a"}.fa-bacon:before{content:"\f7e5"}.fa-balance-scale:before{content:"\f24e"}.fa-balance-scale-left:before{content:"\f515"}.fa-balance-scale-right:before{content:"\f516"}.fa-ban:before{content:"\f05e"}.fa-band-aid:before{content:"\f462"}.fa-bandcamp:before{content:"\f2d5"}.fa-barcode:before{content:"\f02a"}.fa-bars:before{content:"\f0c9"}.fa-baseball-ball:before{content:"\f433"}.fa-basketball-ball:before{content:"\f434"}.fa-bath:before{content:"\f2cd"}.fa-battery-empty:before{content:"\f244"}.fa-battery-full:before{content:"\f240"}.fa-battery-half:before{content:"\f242"}.fa-battery-quarter:before{content:"\f243"}.fa-battery-three-quarters:before{content:"\f241"}.fa-battle-net:before{content:"\f835"}.fa-bed:before{content:"\f236"}.fa-beer:before{content:"\f0fc"}.fa-behance:before{content:"\f1b4"}.fa-behance-square:before{content:"\f1b5"}.fa-bell:before{content:"\f0f3"}.fa-bell-slash:before{content:"\f1f6"}.fa-bezier-curve:before{content:"\f55b"}.fa-bible:before{content:"\f647"}.fa-bicycle:before{content:"\f206"}.fa-biking:before{content:"\f84a"}.fa-bimobject:before{content:"\f378"}.fa-binoculars:before{content:"\f1e5"}.fa-biohazard:before{content:"\f780"}.fa-birthday-cake:before{content:"\f1fd"}.fa-bitbucket:before{content:"\f171"}.fa-bitcoin:before{content:"\f379"}.fa-bity:before{content:"\f37a"}.fa-black-tie:before{content:"\f27e"}.fa-blackberry:before{content:"\f37b"}.fa-blender:before{content:"\f517"}.fa-blender-phone:before{content:"\f6b6"}.fa-blind:before{content:"\f29d"}.fa-blog:before{content:"\f781"}.fa-blogger:before{content:"\f37c"}.fa-blogger-b:before{content:"\f37d"}.fa-bluetooth:before{content:"\f293"}.fa-bluetooth-b:before{content:"\f294"}.fa-bold:before{content:"\f032"}.fa-bolt:before{content:"\f0e7"}.fa-bomb:before{content:"\f1e2"}.fa-bone:before{content:"\f5d7"}.fa-bong:before{content:"\f55c"}.fa-book:before{content:"\f02d"}.fa-book-dead:before{content:"\f6b7"}.fa-book-medical:before{content:"\f7e6"}.fa-book-open:before{content:"\f518"}.fa-book-reader:before{content:"\f5da"}.fa-bookmark:before{content:"\f02e"}.fa-bootstrap:before{content:"\f836"}.fa-border-all:before{content:"\f84c"}.fa-border-none:before{content:"\f850"}.fa-border-style:before{content:"\f853"}.fa-bowling-ball:before{content:"\f436"}.fa-box:before{content:"\f466"}.fa-box-open:before{content:"\f49e"}.fa-boxes:before{content:"\f468"}.fa-braille:before{content:"\f2a1"}.fa-brain:before{content:"\f5dc"}.fa-bread-slice:before{content:"\f7ec"}.fa-briefcase:before{content:"\f0b1"}.fa-briefcase-medical:before{content:"\f469"}.fa-broadcast-tower:before{content:"\f519"}.fa-broom:before{content:"\f51a"}.fa-brush:before{content:"\f55d"}.fa-btc:before{content:"\f15a"}.fa-buffer:before{content:"\f837"}.fa-bug:before{content:"\f188"}.fa-building:before{content:"\f1ad"}.fa-bullhorn:before{content:"\f0a1"}.fa-bullseye:before{content:"\f140"}.fa-burn:before{content:"\f46a"}.fa-buromobelexperte:before{content:"\f37f"}.fa-bus:before{content:"\f207"}.fa-bus-alt:before{content:"\f55e"}.fa-business-time:before{content:"\f64a"}.fa-buysellads:before{content:"\f20d"}.fa-calculator:before{content:"\f1ec"}.fa-calendar:before{content:"\f133"}.fa-calendar-alt:before{content:"\f073"}.fa-calendar-check:before{content:"\f274"}.fa-calendar-day:before{content:"\f783"}.fa-calendar-minus:before{content:"\f272"}.fa-calendar-plus:before{content:"\f271"}.fa-calendar-times:before{content:"\f273"}.fa-calendar-week:before{content:"\f784"}.fa-camera:before{content:"\f030"}.fa-camera-retro:before{content:"\f083"}.fa-campground:before{content:"\f6bb"}.fa-canadian-maple-leaf:before{content:"\f785"}.fa-candy-cane:before{content:"\f786"}.fa-cannabis:before{content:"\f55f"}.fa-capsules:before{content:"\f46b"}.fa-car:before{content:"\f1b9"}.fa-car-alt:before{content:"\f5de"}.fa-car-battery:before{content:"\f5df"}.fa-car-crash:before{content:"\f5e1"}.fa-car-side:before{content:"\f5e4"}.fa-caret-down:before{content:"\f0d7"}.fa-caret-left:before{content:"\f0d9"}.fa-caret-right:before{content:"\f0da"}.fa-caret-square-down:before{content:"\f150"}.fa-caret-square-left:before{content:"\f191"}.fa-caret-square-right:before{content:"\f152"}.fa-caret-square-up:before{content:"\f151"}.fa-caret-up:before{content:"\f0d8"}.fa-carrot:before{content:"\f787"}.fa-cart-arrow-down:before{content:"\f218"}.fa-cart-plus:before{content:"\f217"}.fa-cash-register:before{content:"\f788"}.fa-cat:before{content:"\f6be"}.fa-cc-amazon-pay:before{content:"\f42d"}.fa-cc-amex:before{content:"\f1f3"}.fa-cc-apple-pay:before{content:"\f416"}.fa-cc-diners-club:before{content:"\f24c"}.fa-cc-discover:before{content:"\f1f2"}.fa-cc-jcb:before{content:"\f24b"}.fa-cc-mastercard:before{content:"\f1f1"}.fa-cc-paypal:before{content:"\f1f4"}.fa-cc-stripe:before{content:"\f1f5"}.fa-cc-visa:before{content:"\f1f0"}.fa-centercode:before{content:"\f380"}.fa-centos:before{content:"\f789"}.fa-certificate:before{content:"\f0a3"}.fa-chair:before{content:"\f6c0"}.fa-chalkboard:before{content:"\f51b"}.fa-chalkboard-teacher:before{content:"\f51c"}.fa-charging-station:before{content:"\f5e7"}.fa-chart-area:before{content:"\f1fe"}.fa-chart-bar:before{content:"\f080"}.fa-chart-line:before{content:"\f201"}.fa-chart-pie:before{content:"\f200"}.fa-check:before{content:"\f00c"}.fa-check-circle:before{content:"\f058"}.fa-check-double:before{content:"\f560"}.fa-check-square:before{content:"\f14a"}.fa-cheese:before{content:"\f7ef"}.fa-chess:before{content:"\f439"}.fa-chess-bishop:before{content:"\f43a"}.fa-chess-board:before{content:"\f43c"}.fa-chess-king:before{content:"\f43f"}.fa-chess-knight:before{content:"\f441"}.fa-chess-pawn:before{content:"\f443"}.fa-chess-queen:before{content:"\f445"}.fa-chess-rook:before{content:"\f447"}.fa-chevron-circle-down:before{content:"\f13a"}.fa-chevron-circle-left:before{content:"\f137"}.fa-chevron-circle-right:before{content:"\f138"}.fa-chevron-circle-up:before{content:"\f139"}.fa-chevron-down:before{content:"\f078"}.fa-chevron-left:before{content:"\f053"}.fa-chevron-right:before{content:"\f054"}.fa-chevron-up:before{content:"\f077"}.fa-child:before{content:"\f1ae"}.fa-chrome:before{content:"\f268"}.fa-chromecast:before{content:"\f838"}.fa-church:before{content:"\f51d"}.fa-circle:before{content:"\f111"}.fa-circle-notch:before{content:"\f1ce"}.fa-city:before{content:"\f64f"}.fa-clinic-medical:before{content:"\f7f2"}.fa-clipboard:before{content:"\f328"}.fa-clipboard-check:before{content:"\f46c"}.fa-clipboard-list:before{content:"\f46d"}.fa-clock:before{content:"\f017"}.fa-clone:before{content:"\f24d"}.fa-closed-captioning:before{content:"\f20a"}.fa-cloud:before{content:"\f0c2"}.fa-cloud-download-alt:before{content:"\f381"}.fa-cloud-meatball:before{content:"\f73b"}.fa-cloud-moon:before{content:"\f6c3"}.fa-cloud-moon-rain:before{content:"\f73c"}.fa-cloud-rain:before{content:"\f73d"}.fa-cloud-showers-heavy:before{content:"\f740"}.fa-cloud-sun:before{content:"\f6c4"}.fa-cloud-sun-rain:before{content:"\f743"}.fa-cloud-upload-alt:before{content:"\f382"}.fa-cloudscale:before{content:"\f383"}.fa-cloudsmith:before{content:"\f384"}.fa-cloudversify:before{content:"\f385"}.fa-cocktail:before{content:"\f561"}.fa-code:before{content:"\f121"}.fa-code-branch:before{content:"\f126"}.fa-codepen:before{content:"\f1cb"}.fa-codiepie:before{content:"\f284"}.fa-coffee:before{content:"\f0f4"}.fa-cog:before{content:"\f013"}.fa-cogs:before{content:"\f085"}.fa-coins:before{content:"\f51e"}.fa-columns:before{content:"\f0db"}.fa-comment:before{content:"\f075"}.fa-comment-alt:before{content:"\f27a"}.fa-comment-dollar:before{content:"\f651"}.fa-comment-dots:before{content:"\f4ad"}.fa-comment-medical:before{content:"\f7f5"}.fa-comment-slash:before{content:"\f4b3"}.fa-comments:before{content:"\f086"}.fa-comments-dollar:before{content:"\f653"}.fa-compact-disc:before{content:"\f51f"}.fa-compass:before{content:"\f14e"}.fa-compress:before{content:"\f066"}.fa-compress-arrows-alt:before{content:"\f78c"}.fa-concierge-bell:before{content:"\f562"}.fa-confluence:before{content:"\f78d"}.fa-connectdevelop:before{content:"\f20e"}.fa-contao:before{content:"\f26d"}.fa-cookie:before{content:"\f563"}.fa-cookie-bite:before{content:"\f564"}.fa-copy:before{content:"\f0c5"}.fa-copyright:before{content:"\f1f9"}.fa-couch:before{content:"\f4b8"}.fa-cpanel:before{content:"\f388"}.fa-creative-commons:before{content:"\f25e"}.fa-creative-commons-by:before{content:"\f4e7"}.fa-creative-commons-nc:before{content:"\f4e8"}.fa-creative-commons-nc-eu:before{content:"\f4e9"}.fa-creative-commons-nc-jp:before{content:"\f4ea"}.fa-creative-commons-nd:before{content:"\f4eb"}.fa-creative-commons-pd:before{content:"\f4ec"}.fa-creative-commons-pd-alt:before{content:"\f4ed"}.fa-creative-commons-remix:before{content:"\f4ee"}.fa-creative-commons-sa:before{content:"\f4ef"}.fa-creative-commons-sampling:before{content:"\f4f0"}.fa-creative-commons-sampling-plus:before{content:"\f4f1"}.fa-creative-commons-share:before{content:"\f4f2"}.fa-creative-commons-zero:before{content:"\f4f3"}.fa-credit-card:before{content:"\f09d"}.fa-critical-role:before{content:"\f6c9"}.fa-crop:before{content:"\f125"}.fa-crop-alt:before{content:"\f565"}.fa-cross:before{content:"\f654"}.fa-crosshairs:before{content:"\f05b"}.fa-crow:before{content:"\f520"}.fa-crown:before{content:"\f521"}.fa-crutch:before{content:"\f7f7"}.fa-css3:before{content:"\f13c"}.fa-css3-alt:before{content:"\f38b"}.fa-cube:before{content:"\f1b2"}.fa-cubes:before{content:"\f1b3"}.fa-cut:before{content:"\f0c4"}.fa-cuttlefish:before{content:"\f38c"}.fa-d-and-d:before{content:"\f38d"}.fa-d-and-d-beyond:before{content:"\f6ca"}.fa-dashcube:before{content:"\f210"}.fa-database:before{content:"\f1c0"}.fa-deaf:before{content:"\f2a4"}.fa-delicious:before{content:"\f1a5"}.fa-democrat:before{content:"\f747"}.fa-deploydog:before{content:"\f38e"}.fa-deskpro:before{content:"\f38f"}.fa-desktop:before{content:"\f108"}.fa-dev:before{content:"\f6cc"}.fa-deviantart:before{content:"\f1bd"}.fa-dharmachakra:before{content:"\f655"}.fa-dhl:before{content:"\f790"}.fa-diagnoses:before{content:"\f470"}.fa-diaspora:before{content:"\f791"}.fa-dice:before{content:"\f522"}.fa-dice-d20:before{content:"\f6cf"}.fa-dice-d6:before{content:"\f6d1"}.fa-dice-five:before{content:"\f523"}.fa-dice-four:before{content:"\f524"}.fa-dice-one:before{content:"\f525"}.fa-dice-six:before{content:"\f526"}.fa-dice-three:before{content:"\f527"}.fa-dice-two:before{content:"\f528"}.fa-digg:before{content:"\f1a6"}.fa-digital-ocean:before{content:"\f391"}.fa-digital-tachograph:before{content:"\f566"}.fa-directions:before{content:"\f5eb"}.fa-discord:before{content:"\f392"}.fa-discourse:before{content:"\f393"}.fa-divide:before{content:"\f529"}.fa-dizzy:before{content:"\f567"}.fa-dna:before{content:"\f471"}.fa-dochub:before{content:"\f394"}.fa-docker:before{content:"\f395"}.fa-dog:before{content:"\f6d3"}.fa-dollar-sign:before{content:"\f155"}.fa-dolly:before{content:"\f472"}.fa-dolly-flatbed:before{content:"\f474"}.fa-donate:before{content:"\f4b9"}.fa-door-closed:before{content:"\f52a"}.fa-door-open:before{content:"\f52b"}.fa-dot-circle:before{content:"\f192"}.fa-dove:before{content:"\f4ba"}.fa-download:before{content:"\f019"}.fa-draft2digital:before{content:"\f396"}.fa-drafting-compass:before{content:"\f568"}.fa-dragon:before{content:"\f6d5"}.fa-draw-polygon:before{content:"\f5ee"}.fa-dribbble:before{content:"\f17d"}.fa-dribbble-square:before{content:"\f397"}.fa-dropbox:before{content:"\f16b"}.fa-drum:before{content:"\f569"}.fa-drum-steelpan:before{content:"\f56a"}.fa-drumstick-bite:before{content:"\f6d7"}.fa-drupal:before{content:"\f1a9"}.fa-dumbbell:before{content:"\f44b"}.fa-dumpster:before{content:"\f793"}.fa-dumpster-fire:before{content:"\f794"}.fa-dungeon:before{content:"\f6d9"}.fa-dyalog:before{content:"\f399"}.fa-earlybirds:before{content:"\f39a"}.fa-ebay:before{content:"\f4f4"}.fa-edge:before{content:"\f282"}.fa-edit:before{content:"\f044"}.fa-egg:before{content:"\f7fb"}.fa-eject:before{content:"\f052"}.fa-elementor:before{content:"\f430"}.fa-ellipsis-h:before{content:"\f141"}.fa-ellipsis-v:before{content:"\f142"}.fa-ello:before{content:"\f5f1"}.fa-ember:before{content:"\f423"}.fa-empire:before{content:"\f1d1"}.fa-envelope:before{content:"\f0e0"}.fa-envelope-open:before{content:"\f2b6"}.fa-envelope-open-text:before{content:"\f658"}.fa-envelope-square:before{content:"\f199"}.fa-envira:before{content:"\f299"}.fa-equals:before{content:"\f52c"}.fa-eraser:before{content:"\f12d"}.fa-erlang:before{content:"\f39d"}.fa-ethereum:before{content:"\f42e"}.fa-ethernet:before{content:"\f796"}.fa-etsy:before{content:"\f2d7"}.fa-euro-sign:before{content:"\f153"}.fa-evernote:before{content:"\f839"}.fa-exchange-alt:before{content:"\f362"}.fa-exclamation:before{content:"\f12a"}.fa-exclamation-circle:before{content:"\f06a"}.fa-exclamation-triangle:before{content:"\f071"}.fa-expand:before{content:"\f065"}.fa-expand-arrows-alt:before{content:"\f31e"}.fa-expeditedssl:before{content:"\f23e"}.fa-external-link-alt:before{content:"\f35d"}.fa-external-link-square-alt:before{content:"\f360"}.fa-eye:before{content:"\f06e"}.fa-eye-dropper:before{content:"\f1fb"}.fa-eye-slash:before{content:"\f070"}.fa-facebook:before{content:"\f09a"}.fa-facebook-f:before{content:"\f39e"}.fa-facebook-messenger:before{content:"\f39f"}.fa-facebook-square:before{content:"\f082"}.fa-fan:before{content:"\f863"}.fa-fantasy-flight-games:before{content:"\f6dc"}.fa-fast-backward:before{content:"\f049"}.fa-fast-forward:before{content:"\f050"}.fa-fax:before{content:"\f1ac"}.fa-feather:before{content:"\f52d"}.fa-feather-alt:before{content:"\f56b"}.fa-fedex:before{content:"\f797"}.fa-fedora:before{content:"\f798"}.fa-female:before{content:"\f182"}.fa-fighter-jet:before{content:"\f0fb"}.fa-figma:before{content:"\f799"}.fa-file:before{content:"\f15b"}.fa-file-alt:before{content:"\f15c"}.fa-file-archive:before{content:"\f1c6"}.fa-file-audio:before{content:"\f1c7"}.fa-file-code:before{content:"\f1c9"}.fa-file-contract:before{content:"\f56c"}.fa-file-csv:before{content:"\f6dd"}.fa-file-download:before{content:"\f56d"}.fa-file-excel:before{content:"\f1c3"}.fa-file-export:before{content:"\f56e"}.fa-file-image:before{content:"\f1c5"}.fa-file-import:before{content:"\f56f"}.fa-file-invoice:before{content:"\f570"}.fa-file-invoice-dollar:before{content:"\f571"}.fa-file-medical:before{content:"\f477"}.fa-file-medical-alt:before{content:"\f478"}.fa-file-pdf:before{content:"\f1c1"}.fa-file-powerpoint:before{content:"\f1c4"}.fa-file-prescription:before{content:"\f572"}.fa-file-signature:before{content:"\f573"}.fa-file-upload:before{content:"\f574"}.fa-file-video:before{content:"\f1c8"}.fa-file-word:before{content:"\f1c2"}.fa-fill:before{content:"\f575"}.fa-fill-drip:before{content:"\f576"}.fa-film:before{content:"\f008"}.fa-filter:before{content:"\f0b0"}.fa-fingerprint:before{content:"\f577"}.fa-fire:before{content:"\f06d"}.fa-fire-alt:before{content:"\f7e4"}.fa-fire-extinguisher:before{content:"\f134"}.fa-firefox:before{content:"\f269"}.fa-first-aid:before{content:"\f479"}.fa-first-order:before{content:"\f2b0"}.fa-first-order-alt:before{content:"\f50a"}.fa-firstdraft:before{content:"\f3a1"}.fa-fish:before{content:"\f578"}.fa-fist-raised:before{content:"\f6de"}.fa-flag:before{content:"\f024"}.fa-flag-checkered:before{content:"\f11e"}.fa-flag-usa:before{content:"\f74d"}.fa-flask:before{content:"\f0c3"}.fa-flickr:before{content:"\f16e"}.fa-flipboard:before{content:"\f44d"}.fa-flushed:before{content:"\f579"}.fa-fly:before{content:"\f417"}.fa-folder:before{content:"\f07b"}.fa-folder-minus:before{content:"\f65d"}.fa-folder-open:before{content:"\f07c"}.fa-folder-plus:before{content:"\f65e"}.fa-font:before{content:"\f031"}.fa-font-awesome:before{content:"\f2b4"}.fa-font-awesome-alt:before{content:"\f35c"}.fa-font-awesome-flag:before{content:"\f425"}.fa-font-awesome-logo-full:before{content:"\f4e6"}.fa-fonticons:before{content:"\f280"}.fa-fonticons-fi:before{content:"\f3a2"}.fa-football-ball:before{content:"\f44e"}.fa-fort-awesome:before{content:"\f286"}.fa-fort-awesome-alt:before{content:"\f3a3"}.fa-forumbee:before{content:"\f211"}.fa-forward:before{content:"\f04e"}.fa-foursquare:before{content:"\f180"}.fa-free-code-camp:before{content:"\f2c5"}.fa-freebsd:before{content:"\f3a4"}.fa-frog:before{content:"\f52e"}.fa-frown:before{content:"\f119"}.fa-frown-open:before{content:"\f57a"}.fa-fulcrum:before{content:"\f50b"}.fa-funnel-dollar:before{content:"\f662"}.fa-futbol:before{content:"\f1e3"}.fa-galactic-republic:before{content:"\f50c"}.fa-galactic-senate:before{content:"\f50d"}.fa-gamepad:before{content:"\f11b"}.fa-gas-pump:before{content:"\f52f"}.fa-gavel:before{content:"\f0e3"}.fa-gem:before{content:"\f3a5"}.fa-genderless:before{content:"\f22d"}.fa-get-pocket:before{content:"\f265"}.fa-gg:before{content:"\f260"}.fa-gg-circle:before{content:"\f261"}.fa-ghost:before{content:"\f6e2"}.fa-gift:before{content:"\f06b"}.fa-gifts:before{content:"\f79c"}.fa-git:before{content:"\f1d3"}.fa-git-alt:before{content:"\f841"}.fa-git-square:before{content:"\f1d2"}.fa-github:before{content:"\f09b"}.fa-github-alt:before{content:"\f113"}.fa-github-square:before{content:"\f092"}.fa-gitkraken:before{content:"\f3a6"}.fa-gitlab:before{content:"\f296"}.fa-gitter:before{content:"\f426"}.fa-glass-cheers:before{content:"\f79f"}.fa-glass-martini:before{content:"\f000"}.fa-glass-martini-alt:before{content:"\f57b"}.fa-glass-whiskey:before{content:"\f7a0"}.fa-glasses:before{content:"\f530"}.fa-glide:before{content:"\f2a5"}.fa-glide-g:before{content:"\f2a6"}.fa-globe:before{content:"\f0ac"}.fa-globe-africa:before{content:"\f57c"}.fa-globe-americas:before{content:"\f57d"}.fa-globe-asia:before{content:"\f57e"}.fa-globe-europe:before{content:"\f7a2"}.fa-gofore:before{content:"\f3a7"}.fa-golf-ball:before{content:"\f450"}.fa-goodreads:before{content:"\f3a8"}.fa-goodreads-g:before{content:"\f3a9"}.fa-google:before{content:"\f1a0"}.fa-google-drive:before{content:"\f3aa"}.fa-google-play:before{content:"\f3ab"}.fa-google-plus:before{content:"\f2b3"}.fa-google-plus-g:before{content:"\f0d5"}.fa-google-plus-square:before{content:"\f0d4"}.fa-google-wallet:before{content:"\f1ee"}.fa-gopuram:before{content:"\f664"}.fa-graduation-cap:before{content:"\f19d"}.fa-gratipay:before{content:"\f184"}.fa-grav:before{content:"\f2d6"}.fa-greater-than:before{content:"\f531"}.fa-greater-than-equal:before{content:"\f532"}.fa-grimace:before{content:"\f57f"}.fa-grin:before{content:"\f580"}.fa-grin-alt:before{content:"\f581"}.fa-grin-beam:before{content:"\f582"}.fa-grin-beam-sweat:before{content:"\f583"}.fa-grin-hearts:before{content:"\f584"}.fa-grin-squint:before{content:"\f585"}.fa-grin-squint-tears:before{content:"\f586"}.fa-grin-stars:before{content:"\f587"}.fa-grin-tears:before{content:"\f588"}.fa-grin-tongue:before{content:"\f589"}.fa-grin-tongue-squint:before{content:"\f58a"}.fa-grin-tongue-wink:before{content:"\f58b"}.fa-grin-wink:before{content:"\f58c"}.fa-grip-horizontal:before{content:"\f58d"}.fa-grip-lines:before{content:"\f7a4"}.fa-grip-lines-vertical:before{content:"\f7a5"}.fa-grip-vertical:before{content:"\f58e"}.fa-gripfire:before{content:"\f3ac"}.fa-grunt:before{content:"\f3ad"}.fa-guitar:before{content:"\f7a6"}.fa-gulp:before{content:"\f3ae"}.fa-h-square:before{content:"\f0fd"}.fa-hacker-news:before{content:"\f1d4"}.fa-hacker-news-square:before{content:"\f3af"}.fa-hackerrank:before{content:"\f5f7"}.fa-hamburger:before{content:"\f805"}.fa-hammer:before{content:"\f6e3"}.fa-hamsa:before{content:"\f665"}.fa-hand-holding:before{content:"\f4bd"}.fa-hand-holding-heart:before{content:"\f4be"}.fa-hand-holding-usd:before{content:"\f4c0"}.fa-hand-lizard:before{content:"\f258"}.fa-hand-middle-finger:before{content:"\f806"}.fa-hand-paper:before{content:"\f256"}.fa-hand-peace:before{content:"\f25b"}.fa-hand-point-down:before{content:"\f0a7"}.fa-hand-point-left:before{content:"\f0a5"}.fa-hand-point-right:before{content:"\f0a4"}.fa-hand-point-up:before{content:"\f0a6"}.fa-hand-pointer:before{content:"\f25a"}.fa-hand-rock:before{content:"\f255"}.fa-hand-scissors:before{content:"\f257"}.fa-hand-spock:before{content:"\f259"}.fa-hands:before{content:"\f4c2"}.fa-hands-helping:before{content:"\f4c4"}.fa-handshake:before{content:"\f2b5"}.fa-hanukiah:before{content:"\f6e6"}.fa-hard-hat:before{content:"\f807"}.fa-hashtag:before{content:"\f292"}.fa-hat-wizard:before{content:"\f6e8"}.fa-haykal:before{content:"\f666"}.fa-hdd:before{content:"\f0a0"}.fa-heading:before{content:"\f1dc"}.fa-headphones:before{content:"\f025"}.fa-headphones-alt:before{content:"\f58f"}.fa-headset:before{content:"\f590"}.fa-heart:before{content:"\f004"}.fa-heart-broken:before{content:"\f7a9"}.fa-heartbeat:before{content:"\f21e"}.fa-helicopter:before{content:"\f533"}.fa-highlighter:before{content:"\f591"}.fa-hiking:before{content:"\f6ec"}.fa-hippo:before{content:"\f6ed"}.fa-hips:before{content:"\f452"}.fa-hire-a-helper:before{content:"\f3b0"}.fa-history:before{content:"\f1da"}.fa-hockey-puck:before{content:"\f453"}.fa-holly-berry:before{content:"\f7aa"}.fa-home:before{content:"\f015"}.fa-hooli:before{content:"\f427"}.fa-hornbill:before{content:"\f592"}.fa-horse:before{content:"\f6f0"}.fa-horse-head:before{content:"\f7ab"}.fa-hospital:before{content:"\f0f8"}.fa-hospital-alt:before{content:"\f47d"}.fa-hospital-symbol:before{content:"\f47e"}.fa-hot-tub:before{content:"\f593"}.fa-hotdog:before{content:"\f80f"}.fa-hotel:before{content:"\f594"}.fa-hotjar:before{content:"\f3b1"}.fa-hourglass:before{content:"\f254"}.fa-hourglass-end:before{content:"\f253"}.fa-hourglass-half:before{content:"\f252"}.fa-hourglass-start:before{content:"\f251"}.fa-house-damage:before{content:"\f6f1"}.fa-houzz:before{content:"\f27c"}.fa-hryvnia:before{content:"\f6f2"}.fa-html5:before{content:"\f13b"}.fa-hubspot:before{content:"\f3b2"}.fa-i-cursor:before{content:"\f246"}.fa-ice-cream:before{content:"\f810"}.fa-icicles:before{content:"\f7ad"}.fa-icons:before{content:"\f86d"}.fa-id-badge:before{content:"\f2c1"}.fa-id-card:before{content:"\f2c2"}.fa-id-card-alt:before{content:"\f47f"}.fa-igloo:before{content:"\f7ae"}.fa-image:before{content:"\f03e"}.fa-images:before{content:"\f302"}.fa-imdb:before{content:"\f2d8"}.fa-inbox:before{content:"\f01c"}.fa-indent:before{content:"\f03c"}.fa-industry:before{content:"\f275"}.fa-infinity:before{content:"\f534"}.fa-info:before{content:"\f129"}.fa-info-circle:before{content:"\f05a"}.fa-instagram:before{content:"\f16d"}.fa-intercom:before{content:"\f7af"}.fa-internet-explorer:before{content:"\f26b"}.fa-invision:before{content:"\f7b0"}.fa-ioxhost:before{content:"\f208"}.fa-italic:before{content:"\f033"}.fa-itch-io:before{content:"\f83a"}.fa-itunes:before{content:"\f3b4"}.fa-itunes-note:before{content:"\f3b5"}.fa-java:before{content:"\f4e4"}.fa-jedi:before{content:"\f669"}.fa-jedi-order:before{content:"\f50e"}.fa-jenkins:before{content:"\f3b6"}.fa-jira:before{content:"\f7b1"}.fa-joget:before{content:"\f3b7"}.fa-joint:before{content:"\f595"}.fa-joomla:before{content:"\f1aa"}.fa-journal-whills:before{content:"\f66a"}.fa-js:before{content:"\f3b8"}.fa-js-square:before{content:"\f3b9"}.fa-jsfiddle:before{content:"\f1cc"}.fa-kaaba:before{content:"\f66b"}.fa-kaggle:before{content:"\f5fa"}.fa-key:before{content:"\f084"}.fa-keybase:before{content:"\f4f5"}.fa-keyboard:before{content:"\f11c"}.fa-keycdn:before{content:"\f3ba"}.fa-khanda:before{content:"\f66d"}.fa-kickstarter:before{content:"\f3bb"}.fa-kickstarter-k:before{content:"\f3bc"}.fa-kiss:before{content:"\f596"}.fa-kiss-beam:before{content:"\f597"}.fa-kiss-wink-heart:before{content:"\f598"}.fa-kiwi-bird:before{content:"\f535"}.fa-korvue:before{content:"\f42f"}.fa-landmark:before{content:"\f66f"}.fa-language:before{content:"\f1ab"}.fa-laptop:before{content:"\f109"}.fa-laptop-code:before{content:"\f5fc"}.fa-laptop-medical:before{content:"\f812"}.fa-laravel:before{content:"\f3bd"}.fa-lastfm:before{content:"\f202"}.fa-lastfm-square:before{content:"\f203"}.fa-laugh:before{content:"\f599"}.fa-laugh-beam:before{content:"\f59a"}.fa-laugh-squint:before{content:"\f59b"}.fa-laugh-wink:before{content:"\f59c"}.fa-layer-group:before{content:"\f5fd"}.fa-leaf:before{content:"\f06c"}.fa-leanpub:before{content:"\f212"}.fa-lemon:before{content:"\f094"}.fa-less:before{content:"\f41d"}.fa-less-than:before{content:"\f536"}.fa-less-than-equal:before{content:"\f537"}.fa-level-down-alt:before{content:"\f3be"}.fa-level-up-alt:before{content:"\f3bf"}.fa-life-ring:before{content:"\f1cd"}.fa-lightbulb:before{content:"\f0eb"}.fa-line:before{content:"\f3c0"}.fa-link:before{content:"\f0c1"}.fa-linkedin:before{content:"\f08c"}.fa-linkedin-in:before{content:"\f0e1"}.fa-linode:before{content:"\f2b8"}.fa-linux:before{content:"\f17c"}.fa-lira-sign:before{content:"\f195"}.fa-list:before{content:"\f03a"}.fa-list-alt:before{content:"\f022"}.fa-list-ol:before{content:"\f0cb"}.fa-list-ul:before{content:"\f0ca"}.fa-location-arrow:before{content:"\f124"}.fa-lock:before{content:"\f023"}.fa-lock-open:before{content:"\f3c1"}.fa-long-arrow-alt-down:before{content:"\f309"}.fa-long-arrow-alt-left:before{content:"\f30a"}.fa-long-arrow-alt-right:before{content:"\f30b"}.fa-long-arrow-alt-up:before{content:"\f30c"}.fa-low-vision:before{content:"\f2a8"}.fa-luggage-cart:before{content:"\f59d"}.fa-lyft:before{content:"\f3c3"}.fa-magento:before{content:"\f3c4"}.fa-magic:before{content:"\f0d0"}.fa-magnet:before{content:"\f076"}.fa-mail-bulk:before{content:"\f674"}.fa-mailchimp:before{content:"\f59e"}.fa-male:before{content:"\f183"}.fa-mandalorian:before{content:"\f50f"}.fa-map:before{content:"\f279"}.fa-map-marked:before{content:"\f59f"}.fa-map-marked-alt:before{content:"\f5a0"}.fa-map-marker:before{content:"\f041"}.fa-map-marker-alt:before{content:"\f3c5"}.fa-map-pin:before{content:"\f276"}.fa-map-signs:before{content:"\f277"}.fa-markdown:before{content:"\f60f"}.fa-marker:before{content:"\f5a1"}.fa-mars:before{content:"\f222"}.fa-mars-double:before{content:"\f227"}.fa-mars-stroke:before{content:"\f229"}.fa-mars-stroke-h:before{content:"\f22b"}.fa-mars-stroke-v:before{content:"\f22a"}.fa-mask:before{content:"\f6fa"}.fa-mastodon:before{content:"\f4f6"}.fa-maxcdn:before{content:"\f136"}.fa-medal:before{content:"\f5a2"}.fa-medapps:before{content:"\f3c6"}.fa-medium:before{content:"\f23a"}.fa-medium-m:before{content:"\f3c7"}.fa-medkit:before{content:"\f0fa"}.fa-medrt:before{content:"\f3c8"}.fa-meetup:before{content:"\f2e0"}.fa-megaport:before{content:"\f5a3"}.fa-meh:before{content:"\f11a"}.fa-meh-blank:before{content:"\f5a4"}.fa-meh-rolling-eyes:before{content:"\f5a5"}.fa-memory:before{content:"\f538"}.fa-mendeley:before{content:"\f7b3"}.fa-menorah:before{content:"\f676"}.fa-mercury:before{content:"\f223"}.fa-meteor:before{content:"\f753"}.fa-microchip:before{content:"\f2db"}.fa-microphone:before{content:"\f130"}.fa-microphone-alt:before{content:"\f3c9"}.fa-microphone-alt-slash:before{content:"\f539"}.fa-microphone-slash:before{content:"\f131"}.fa-microscope:before{content:"\f610"}.fa-microsoft:before{content:"\f3ca"}.fa-minus:before{content:"\f068"}.fa-minus-circle:before{content:"\f056"}.fa-minus-square:before{content:"\f146"}.fa-mitten:before{content:"\f7b5"}.fa-mix:before{content:"\f3cb"}.fa-mixcloud:before{content:"\f289"}.fa-mizuni:before{content:"\f3cc"}.fa-mobile:before{content:"\f10b"}.fa-mobile-alt:before{content:"\f3cd"}.fa-modx:before{content:"\f285"}.fa-monero:before{content:"\f3d0"}.fa-money-bill:before{content:"\f0d6"}.fa-money-bill-alt:before{content:"\f3d1"}.fa-money-bill-wave:before{content:"\f53a"}.fa-money-bill-wave-alt:before{content:"\f53b"}.fa-money-check:before{content:"\f53c"}.fa-money-check-alt:before{content:"\f53d"}.fa-monument:before{content:"\f5a6"}.fa-moon:before{content:"\f186"}.fa-mortar-pestle:before{content:"\f5a7"}.fa-mosque:before{content:"\f678"}.fa-motorcycle:before{content:"\f21c"}.fa-mountain:before{content:"\f6fc"}.fa-mouse-pointer:before{content:"\f245"}.fa-mug-hot:before{content:"\f7b6"}.fa-music:before{content:"\f001"}.fa-napster:before{content:"\f3d2"}.fa-neos:before{content:"\f612"}.fa-network-wired:before{content:"\f6ff"}.fa-neuter:before{content:"\f22c"}.fa-newspaper:before{content:"\f1ea"}.fa-nimblr:before{content:"\f5a8"}.fa-node:before{content:"\f419"}.fa-node-js:before{content:"\f3d3"}.fa-not-equal:before{content:"\f53e"}.fa-notes-medical:before{content:"\f481"}.fa-npm:before{content:"\f3d4"}.fa-ns8:before{content:"\f3d5"}.fa-nutritionix:before{content:"\f3d6"}.fa-object-group:before{content:"\f247"}.fa-object-ungroup:before{content:"\f248"}.fa-odnoklassniki:before{content:"\f263"}.fa-odnoklassniki-square:before{content:"\f264"}.fa-oil-can:before{content:"\f613"}.fa-old-republic:before{content:"\f510"}.fa-om:before{content:"\f679"}.fa-opencart:before{content:"\f23d"}.fa-openid:before{content:"\f19b"}.fa-opera:before{content:"\f26a"}.fa-optin-monster:before{content:"\f23c"}.fa-osi:before{content:"\f41a"}.fa-otter:before{content:"\f700"}.fa-outdent:before{content:"\f03b"}.fa-page4:before{content:"\f3d7"}.fa-pagelines:before{content:"\f18c"}.fa-pager:before{content:"\f815"}.fa-paint-brush:before{content:"\f1fc"}.fa-paint-roller:before{content:"\f5aa"}.fa-palette:before{content:"\f53f"}.fa-palfed:before{content:"\f3d8"}.fa-pallet:before{content:"\f482"}.fa-paper-plane:before{content:"\f1d8"}.fa-paperclip:before{content:"\f0c6"}.fa-parachute-box:before{content:"\f4cd"}.fa-paragraph:before{content:"\f1dd"}.fa-parking:before{content:"\f540"}.fa-passport:before{content:"\f5ab"}.fa-pastafarianism:before{content:"\f67b"}.fa-paste:before{content:"\f0ea"}.fa-patreon:before{content:"\f3d9"}.fa-pause:before{content:"\f04c"}.fa-pause-circle:before{content:"\f28b"}.fa-paw:before{content:"\f1b0"}.fa-paypal:before{content:"\f1ed"}.fa-peace:before{content:"\f67c"}.fa-pen:before{content:"\f304"}.fa-pen-alt:before{content:"\f305"}.fa-pen-fancy:before{content:"\f5ac"}.fa-pen-nib:before{content:"\f5ad"}.fa-pen-square:before{content:"\f14b"}.fa-pencil-alt:before{content:"\f303"}.fa-pencil-ruler:before{content:"\f5ae"}.fa-penny-arcade:before{content:"\f704"}.fa-people-carry:before{content:"\f4ce"}.fa-pepper-hot:before{content:"\f816"}.fa-percent:before{content:"\f295"}.fa-percentage:before{content:"\f541"}.fa-periscope:before{content:"\f3da"}.fa-person-booth:before{content:"\f756"}.fa-phabricator:before{content:"\f3db"}.fa-phoenix-framework:before{content:"\f3dc"}.fa-phoenix-squadron:before{content:"\f511"}.fa-phone:before{content:"\f095"}.fa-phone-alt:before{content:"\f879"}.fa-phone-slash:before{content:"\f3dd"}.fa-phone-square:before{content:"\f098"}.fa-phone-square-alt:before{content:"\f87b"}.fa-phone-volume:before{content:"\f2a0"}.fa-photo-video:before{content:"\f87c"}.fa-php:before{content:"\f457"}.fa-pied-piper:before{content:"\f2ae"}.fa-pied-piper-alt:before{content:"\f1a8"}.fa-pied-piper-hat:before{content:"\f4e5"}.fa-pied-piper-pp:before{content:"\f1a7"}.fa-piggy-bank:before{content:"\f4d3"}.fa-pills:before{content:"\f484"}.fa-pinterest:before{content:"\f0d2"}.fa-pinterest-p:before{content:"\f231"}.fa-pinterest-square:before{content:"\f0d3"}.fa-pizza-slice:before{content:"\f818"}.fa-place-of-worship:before{content:"\f67f"}.fa-plane:before{content:"\f072"}.fa-plane-arrival:before{content:"\f5af"}.fa-plane-departure:before{content:"\f5b0"}.fa-play:before{content:"\f04b"}.fa-play-circle:before{content:"\f144"}.fa-playstation:before{content:"\f3df"}.fa-plug:before{content:"\f1e6"}.fa-plus:before{content:"\f067"}.fa-plus-circle:before{content:"\f055"}.fa-plus-square:before{content:"\f0fe"}.fa-podcast:before{content:"\f2ce"}.fa-poll:before{content:"\f681"}.fa-poll-h:before{content:"\f682"}.fa-poo:before{content:"\f2fe"}.fa-poo-storm:before{content:"\f75a"}.fa-poop:before{content:"\f619"}.fa-portrait:before{content:"\f3e0"}.fa-pound-sign:before{content:"\f154"}.fa-power-off:before{content:"\f011"}.fa-pray:before{content:"\f683"}.fa-praying-hands:before{content:"\f684"}.fa-prescription:before{content:"\f5b1"}.fa-prescription-bottle:before{content:"\f485"}.fa-prescription-bottle-alt:before{content:"\f486"}.fa-print:before{content:"\f02f"}.fa-procedures:before{content:"\f487"}.fa-product-hunt:before{content:"\f288"}.fa-project-diagram:before{content:"\f542"}.fa-pushed:before{content:"\f3e1"}.fa-puzzle-piece:before{content:"\f12e"}.fa-python:before{content:"\f3e2"}.fa-qq:before{content:"\f1d6"}.fa-qrcode:before{content:"\f029"}.fa-question:before{content:"\f128"}.fa-question-circle:before{content:"\f059"}.fa-quidditch:before{content:"\f458"}.fa-quinscape:before{content:"\f459"}.fa-quora:before{content:"\f2c4"}.fa-quote-left:before{content:"\f10d"}.fa-quote-right:before{content:"\f10e"}.fa-quran:before{content:"\f687"}.fa-r-project:before{content:"\f4f7"}.fa-radiation:before{content:"\f7b9"}.fa-radiation-alt:before{content:"\f7ba"}.fa-rainbow:before{content:"\f75b"}.fa-random:before{content:"\f074"}.fa-raspberry-pi:before{content:"\f7bb"}.fa-ravelry:before{content:"\f2d9"}.fa-react:before{content:"\f41b"}.fa-reacteurope:before{content:"\f75d"}.fa-readme:before{content:"\f4d5"}.fa-rebel:before{content:"\f1d0"}.fa-receipt:before{content:"\f543"}.fa-recycle:before{content:"\f1b8"}.fa-red-river:before{content:"\f3e3"}.fa-reddit:before{content:"\f1a1"}.fa-reddit-alien:before{content:"\f281"}.fa-reddit-square:before{content:"\f1a2"}.fa-redhat:before{content:"\f7bc"}.fa-redo:before{content:"\f01e"}.fa-redo-alt:before{content:"\f2f9"}.fa-registered:before{content:"\f25d"}.fa-remove-format:before{content:"\f87d"}.fa-renren:before{content:"\f18b"}.fa-reply:before{content:"\f3e5"}.fa-reply-all:before{content:"\f122"}.fa-replyd:before{content:"\f3e6"}.fa-republican:before{content:"\f75e"}.fa-researchgate:before{content:"\f4f8"}.fa-resolving:before{content:"\f3e7"}.fa-restroom:before{content:"\f7bd"}.fa-retweet:before{content:"\f079"}.fa-rev:before{content:"\f5b2"}.fa-ribbon:before{content:"\f4d6"}.fa-ring:before{content:"\f70b"}.fa-road:before{content:"\f018"}.fa-robot:before{content:"\f544"}.fa-rocket:before{content:"\f135"}.fa-rocketchat:before{content:"\f3e8"}.fa-rockrms:before{content:"\f3e9"}.fa-route:before{content:"\f4d7"}.fa-rss:before{content:"\f09e"}.fa-rss-square:before{content:"\f143"}.fa-ruble-sign:before{content:"\f158"}.fa-ruler:before{content:"\f545"}.fa-ruler-combined:before{content:"\f546"}.fa-ruler-horizontal:before{content:"\f547"}.fa-ruler-vertical:before{content:"\f548"}.fa-running:before{content:"\f70c"}.fa-rupee-sign:before{content:"\f156"}.fa-sad-cry:before{content:"\f5b3"}.fa-sad-tear:before{content:"\f5b4"}.fa-safari:before{content:"\f267"}.fa-salesforce:before{content:"\f83b"}.fa-sass:before{content:"\f41e"}.fa-satellite:before{content:"\f7bf"}.fa-satellite-dish:before{content:"\f7c0"}.fa-save:before{content:"\f0c7"}.fa-schlix:before{content:"\f3ea"}.fa-school:before{content:"\f549"}.fa-screwdriver:before{content:"\f54a"}.fa-scribd:before{content:"\f28a"}.fa-scroll:before{content:"\f70e"}.fa-sd-card:before{content:"\f7c2"}.fa-search:before{content:"\f002"}.fa-search-dollar:before{content:"\f688"}.fa-search-location:before{content:"\f689"}.fa-search-minus:before{content:"\f010"}.fa-search-plus:before{content:"\f00e"}.fa-searchengin:before{content:"\f3eb"}.fa-seedling:before{content:"\f4d8"}.fa-sellcast:before{content:"\f2da"}.fa-sellsy:before{content:"\f213"}.fa-server:before{content:"\f233"}.fa-servicestack:before{content:"\f3ec"}.fa-shapes:before{content:"\f61f"}.fa-share:before{content:"\f064"}.fa-share-alt:before{content:"\f1e0"}.fa-share-alt-square:before{content:"\f1e1"}.fa-share-square:before{content:"\f14d"}.fa-shekel-sign:before{content:"\f20b"}.fa-shield-alt:before{content:"\f3ed"}.fa-ship:before{content:"\f21a"}.fa-shipping-fast:before{content:"\f48b"}.fa-shirtsinbulk:before{content:"\f214"}.fa-shoe-prints:before{content:"\f54b"}.fa-shopping-bag:before{content:"\f290"}.fa-shopping-basket:before{content:"\f291"}.fa-shopping-cart:before{content:"\f07a"}.fa-shopware:before{content:"\f5b5"}.fa-shower:before{content:"\f2cc"}.fa-shuttle-van:before{content:"\f5b6"}.fa-sign:before{content:"\f4d9"}.fa-sign-in-alt:before{content:"\f2f6"}.fa-sign-language:before{content:"\f2a7"}.fa-sign-out-alt:before{content:"\f2f5"}.fa-signal:before{content:"\f012"}.fa-signature:before{content:"\f5b7"}.fa-sim-card:before{content:"\f7c4"}.fa-simplybuilt:before{content:"\f215"}.fa-sistrix:before{content:"\f3ee"}.fa-sitemap:before{content:"\f0e8"}.fa-sith:before{content:"\f512"}.fa-skating:before{content:"\f7c5"}.fa-sketch:before{content:"\f7c6"}.fa-skiing:before{content:"\f7c9"}.fa-skiing-nordic:before{content:"\f7ca"}.fa-skull:before{content:"\f54c"}.fa-skull-crossbones:before{content:"\f714"}.fa-skyatlas:before{content:"\f216"}.fa-skype:before{content:"\f17e"}.fa-slack:before{content:"\f198"}.fa-slack-hash:before{content:"\f3ef"}.fa-slash:before{content:"\f715"}.fa-sleigh:before{content:"\f7cc"}.fa-sliders-h:before{content:"\f1de"}.fa-slideshare:before{content:"\f1e7"}.fa-smile:before{content:"\f118"}.fa-smile-beam:before{content:"\f5b8"}.fa-smile-wink:before{content:"\f4da"}.fa-smog:before{content:"\f75f"}.fa-smoking:before{content:"\f48d"}.fa-smoking-ban:before{content:"\f54d"}.fa-sms:before{content:"\f7cd"}.fa-snapchat:before{content:"\f2ab"}.fa-snapchat-ghost:before{content:"\f2ac"}.fa-snapchat-square:before{content:"\f2ad"}.fa-snowboarding:before{content:"\f7ce"}.fa-snowflake:before{content:"\f2dc"}.fa-snowman:before{content:"\f7d0"}.fa-snowplow:before{content:"\f7d2"}.fa-socks:before{content:"\f696"}.fa-solar-panel:before{content:"\f5ba"}.fa-sort:before{content:"\f0dc"}.fa-sort-alpha-down:before{content:"\f15d"}.fa-sort-alpha-down-alt:before{content:"\f881"}.fa-sort-alpha-up:before{content:"\f15e"}.fa-sort-alpha-up-alt:before{content:"\f882"}.fa-sort-amount-down:before{content:"\f160"}.fa-sort-amount-down-alt:before{content:"\f884"}.fa-sort-amount-up:before{content:"\f161"}.fa-sort-amount-up-alt:before{content:"\f885"}.fa-sort-down:before{content:"\f0dd"}.fa-sort-numeric-down:before{content:"\f162"}.fa-sort-numeric-down-alt:before{content:"\f886"}.fa-sort-numeric-up:before{content:"\f163"}.fa-sort-numeric-up-alt:before{content:"\f887"}.fa-sort-up:before{content:"\f0de"}.fa-soundcloud:before{content:"\f1be"}.fa-sourcetree:before{content:"\f7d3"}.fa-spa:before{content:"\f5bb"}.fa-space-shuttle:before{content:"\f197"}.fa-speakap:before{content:"\f3f3"}.fa-speaker-deck:before{content:"\f83c"}.fa-spell-check:before{content:"\f891"}.fa-spider:before{content:"\f717"}.fa-spinner:before{content:"\f110"}.fa-splotch:before{content:"\f5bc"}.fa-spotify:before{content:"\f1bc"}.fa-spray-can:before{content:"\f5bd"}.fa-square:before{content:"\f0c8"}.fa-square-full:before{content:"\f45c"}.fa-square-root-alt:before{content:"\f698"}.fa-squarespace:before{content:"\f5be"}.fa-stack-exchange:before{content:"\f18d"}.fa-stack-overflow:before{content:"\f16c"}.fa-stackpath:before{content:"\f842"}.fa-stamp:before{content:"\f5bf"}.fa-star:before{content:"\f005"}.fa-star-and-crescent:before{content:"\f699"}.fa-star-half:before{content:"\f089"}.fa-star-half-alt:before{content:"\f5c0"}.fa-star-of-david:before{content:"\f69a"}.fa-star-of-life:before{content:"\f621"}.fa-staylinked:before{content:"\f3f5"}.fa-steam:before{content:"\f1b6"}.fa-steam-square:before{content:"\f1b7"}.fa-steam-symbol:before{content:"\f3f6"}.fa-step-backward:before{content:"\f048"}.fa-step-forward:before{content:"\f051"}.fa-stethoscope:before{content:"\f0f1"}.fa-sticker-mule:before{content:"\f3f7"}.fa-sticky-note:before{content:"\f249"}.fa-stop:before{content:"\f04d"}.fa-stop-circle:before{content:"\f28d"}.fa-stopwatch:before{content:"\f2f2"}.fa-store:before{content:"\f54e"}.fa-store-alt:before{content:"\f54f"}.fa-strava:before{content:"\f428"}.fa-stream:before{content:"\f550"}.fa-street-view:before{content:"\f21d"}.fa-strikethrough:before{content:"\f0cc"}.fa-stripe:before{content:"\f429"}.fa-stripe-s:before{content:"\f42a"}.fa-stroopwafel:before{content:"\f551"}.fa-studiovinari:before{content:"\f3f8"}.fa-stumbleupon:before{content:"\f1a4"}.fa-stumbleupon-circle:before{content:"\f1a3"}.fa-subscript:before{content:"\f12c"}.fa-subway:before{content:"\f239"}.fa-suitcase:before{content:"\f0f2"}.fa-suitcase-rolling:before{content:"\f5c1"}.fa-sun:before{content:"\f185"}.fa-superpowers:before{content:"\f2dd"}.fa-superscript:before{content:"\f12b"}.fa-supple:before{content:"\f3f9"}.fa-surprise:before{content:"\f5c2"}.fa-suse:before{content:"\f7d6"}.fa-swatchbook:before{content:"\f5c3"}.fa-swimmer:before{content:"\f5c4"}.fa-swimming-pool:before{content:"\f5c5"}.fa-symfony:before{content:"\f83d"}.fa-synagogue:before{content:"\f69b"}.fa-sync:before{content:"\f021"}.fa-sync-alt:before{content:"\f2f1"}.fa-syringe:before{content:"\f48e"}.fa-table:before{content:"\f0ce"}.fa-table-tennis:before{content:"\f45d"}.fa-tablet:before{content:"\f10a"}.fa-tablet-alt:before{content:"\f3fa"}.fa-tablets:before{content:"\f490"}.fa-tachometer-alt:before{content:"\f3fd"}.fa-tag:before{content:"\f02b"}.fa-tags:before{content:"\f02c"}.fa-tape:before{content:"\f4db"}.fa-tasks:before{content:"\f0ae"}.fa-taxi:before{content:"\f1ba"}.fa-teamspeak:before{content:"\f4f9"}.fa-teeth:before{content:"\f62e"}.fa-teeth-open:before{content:"\f62f"}.fa-telegram:before{content:"\f2c6"}.fa-telegram-plane:before{content:"\f3fe"}.fa-temperature-high:before{content:"\f769"}.fa-temperature-low:before{content:"\f76b"}.fa-tencent-weibo:before{content:"\f1d5"}.fa-tenge:before{content:"\f7d7"}.fa-terminal:before{content:"\f120"}.fa-text-height:before{content:"\f034"}.fa-text-width:before{content:"\f035"}.fa-th:before{content:"\f00a"}.fa-th-large:before{content:"\f009"}.fa-th-list:before{content:"\f00b"}.fa-the-red-yeti:before{content:"\f69d"}.fa-theater-masks:before{content:"\f630"}.fa-themeco:before{content:"\f5c6"}.fa-themeisle:before{content:"\f2b2"}.fa-thermometer:before{content:"\f491"}.fa-thermometer-empty:before{content:"\f2cb"}.fa-thermometer-full:before{content:"\f2c7"}.fa-thermometer-half:before{content:"\f2c9"}.fa-thermometer-quarter:before{content:"\f2ca"}.fa-thermometer-three-quarters:before{content:"\f2c8"}.fa-think-peaks:before{content:"\f731"}.fa-thumbs-down:before{content:"\f165"}.fa-thumbs-up:before{content:"\f164"}.fa-thumbtack:before{content:"\f08d"}.fa-ticket-alt:before{content:"\f3ff"}.fa-times:before{content:"\f00d"}.fa-times-circle:before{content:"\f057"}.fa-tint:before{content:"\f043"}.fa-tint-slash:before{content:"\f5c7"}.fa-tired:before{content:"\f5c8"}.fa-toggle-off:before{content:"\f204"}.fa-toggle-on:before{content:"\f205"}.fa-toilet:before{content:"\f7d8"}.fa-toilet-paper:before{content:"\f71e"}.fa-toolbox:before{content:"\f552"}.fa-tools:before{content:"\f7d9"}.fa-tooth:before{content:"\f5c9"}.fa-torah:before{content:"\f6a0"}.fa-torii-gate:before{content:"\f6a1"}.fa-tractor:before{content:"\f722"}.fa-trade-federation:before{content:"\f513"}.fa-trademark:before{content:"\f25c"}.fa-traffic-light:before{content:"\f637"}.fa-train:before{content:"\f238"}.fa-tram:before{content:"\f7da"}.fa-transgender:before{content:"\f224"}.fa-transgender-alt:before{content:"\f225"}.fa-trash:before{content:"\f1f8"}.fa-trash-alt:before{content:"\f2ed"}.fa-trash-restore:before{content:"\f829"}.fa-trash-restore-alt:before{content:"\f82a"}.fa-tree:before{content:"\f1bb"}.fa-trello:before{content:"\f181"}.fa-tripadvisor:before{content:"\f262"}.fa-trophy:before{content:"\f091"}.fa-truck:before{content:"\f0d1"}.fa-truck-loading:before{content:"\f4de"}.fa-truck-monster:before{content:"\f63b"}.fa-truck-moving:before{content:"\f4df"}.fa-truck-pickup:before{content:"\f63c"}.fa-tshirt:before{content:"\f553"}.fa-tty:before{content:"\f1e4"}.fa-tumblr:before{content:"\f173"}.fa-tumblr-square:before{content:"\f174"}.fa-tv:before{content:"\f26c"}.fa-twitch:before{content:"\f1e8"}.fa-twitter:before{content:"\f099"}.fa-twitter-square:before{content:"\f081"}.fa-typo3:before{content:"\f42b"}.fa-uber:before{content:"\f402"}.fa-ubuntu:before{content:"\f7df"}.fa-uikit:before{content:"\f403"}.fa-umbrella:before{content:"\f0e9"}.fa-umbrella-beach:before{content:"\f5ca"}.fa-underline:before{content:"\f0cd"}.fa-undo:before{content:"\f0e2"}.fa-undo-alt:before{content:"\f2ea"}.fa-uniregistry:before{content:"\f404"}.fa-universal-access:before{content:"\f29a"}.fa-university:before{content:"\f19c"}.fa-unlink:before{content:"\f127"}.fa-unlock:before{content:"\f09c"}.fa-unlock-alt:before{content:"\f13e"}.fa-untappd:before{content:"\f405"}.fa-upload:before{content:"\f093"}.fa-ups:before{content:"\f7e0"}.fa-usb:before{content:"\f287"}.fa-user:before{content:"\f007"}.fa-user-alt:before{content:"\f406"}.fa-user-alt-slash:before{content:"\f4fa"}.fa-user-astronaut:before{content:"\f4fb"}.fa-user-check:before{content:"\f4fc"}.fa-user-circle:before{content:"\f2bd"}.fa-user-clock:before{content:"\f4fd"}.fa-user-cog:before{content:"\f4fe"}.fa-user-edit:before{content:"\f4ff"}.fa-user-friends:before{content:"\f500"}.fa-user-graduate:before{content:"\f501"}.fa-user-injured:before{content:"\f728"}.fa-user-lock:before{content:"\f502"}.fa-user-md:before{content:"\f0f0"}.fa-user-minus:before{content:"\f503"}.fa-user-ninja:before{content:"\f504"}.fa-user-nurse:before{content:"\f82f"}.fa-user-plus:before{content:"\f234"}.fa-user-secret:before{content:"\f21b"}.fa-user-shield:before{content:"\f505"}.fa-user-slash:before{content:"\f506"}.fa-user-tag:before{content:"\f507"}.fa-user-tie:before{content:"\f508"}.fa-user-times:before{content:"\f235"}.fa-users:before{content:"\f0c0"}.fa-users-cog:before{content:"\f509"}.fa-usps:before{content:"\f7e1"}.fa-ussunnah:before{content:"\f407"}.fa-utensil-spoon:before{content:"\f2e5"}.fa-utensils:before{content:"\f2e7"}.fa-vaadin:before{content:"\f408"}.fa-vector-square:before{content:"\f5cb"}.fa-venus:before{content:"\f221"}.fa-venus-double:before{content:"\f226"}.fa-venus-mars:before{content:"\f228"}.fa-viacoin:before{content:"\f237"}.fa-viadeo:before{content:"\f2a9"}.fa-viadeo-square:before{content:"\f2aa"}.fa-vial:before{content:"\f492"}.fa-vials:before{content:"\f493"}.fa-viber:before{content:"\f409"}.fa-video:before{content:"\f03d"}.fa-video-slash:before{content:"\f4e2"}.fa-vihara:before{content:"\f6a7"}.fa-vimeo:before{content:"\f40a"}.fa-vimeo-square:before{content:"\f194"}.fa-vimeo-v:before{content:"\f27d"}.fa-vine:before{content:"\f1ca"}.fa-vk:before{content:"\f189"}.fa-vnv:before{content:"\f40b"}.fa-voicemail:before{content:"\f897"}.fa-volleyball-ball:before{content:"\f45f"}.fa-volume-down:before{content:"\f027"}.fa-volume-mute:before{content:"\f6a9"}.fa-volume-off:before{content:"\f026"}.fa-volume-up:before{content:"\f028"}.fa-vote-yea:before{content:"\f772"}.fa-vr-cardboard:before{content:"\f729"}.fa-vuejs:before{content:"\f41f"}.fa-walking:before{content:"\f554"}.fa-wallet:before{content:"\f555"}.fa-warehouse:before{content:"\f494"}.fa-water:before{content:"\f773"}.fa-wave-square:before{content:"\f83e"}.fa-waze:before{content:"\f83f"}.fa-weebly:before{content:"\f5cc"}.fa-weibo:before{content:"\f18a"}.fa-weight:before{content:"\f496"}.fa-weight-hanging:before{content:"\f5cd"}.fa-weixin:before{content:"\f1d7"}.fa-whatsapp:before{content:"\f232"}.fa-whatsapp-square:before{content:"\f40c"}.fa-wheelchair:before{content:"\f193"}.fa-whmcs:before{content:"\f40d"}.fa-wifi:before{content:"\f1eb"}.fa-wikipedia-w:before{content:"\f266"}.fa-wind:before{content:"\f72e"}.fa-window-close:before{content:"\f410"}.fa-window-maximize:before{content:"\f2d0"}.fa-window-minimize:before{content:"\f2d1"}.fa-window-restore:before{content:"\f2d2"}.fa-windows:before{content:"\f17a"}.fa-wine-bottle:before{content:"\f72f"}.fa-wine-glass:before{content:"\f4e3"}.fa-wine-glass-alt:before{content:"\f5ce"}.fa-wix:before{content:"\f5cf"}.fa-wizards-of-the-coast:before{content:"\f730"}.fa-wolf-pack-battalion:before{content:"\f514"}.fa-won-sign:before{content:"\f159"}.fa-wordpress:before{content:"\f19a"}.fa-wordpress-simple:before{content:"\f411"}.fa-wpbeginner:before{content:"\f297"}.fa-wpexplorer:before{content:"\f2de"}.fa-wpforms:before{content:"\f298"}.fa-wpressr:before{content:"\f3e4"}.fa-wrench:before{content:"\f0ad"}.fa-x-ray:before{content:"\f497"}.fa-xbox:before{content:"\f412"}.fa-xing:before{content:"\f168"}.fa-xing-square:before{content:"\f169"}.fa-y-combinator:before{content:"\f23b"}.fa-yahoo:before{content:"\f19e"}.fa-yammer:before{content:"\f840"}.fa-yandex:before{content:"\f413"}.fa-yandex-international:before{content:"\f414"}.fa-yarn:before{content:"\f7e3"}.fa-yelp:before{content:"\f1e9"}.fa-yen-sign:before{content:"\f157"}.fa-yin-yang:before{content:"\f6ad"}.fa-yoast:before{content:"\f2b1"}.fa-youtube:before{content:"\f167"}.fa-youtube-square:before{content:"\f431"}.fa-zhihu:before{content:"\f63f"}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}@font-face{font-family:"Font Awesome 5 Brands";font-style:normal;font-weight:normal;font-display:auto;src:url(../webfonts/fa-brands-400.eot);src:url(../webfonts/fa-brands-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.woff) format("woff"),url(../webfonts/fa-brands-400.ttf) format("truetype"),url(../webfonts/fa-brands-400.svg#fontawesome) format("svg")}.fab{font-family:"Font Awesome 5 Brands"}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:400;font-display:auto;src:url(../webfonts/fa-regular-400.eot);src:url(../webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.woff) format("woff"),url(../webfonts/fa-regular-400.ttf) format("truetype"),url(../webfonts/fa-regular-400.svg#fontawesome) format("svg")}.far{font-weight:400}@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url(../webfonts/fa-solid-900.eot);src:url(../webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"),url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.woff) format("woff"),url(../webfonts/fa-solid-900.ttf) format("truetype"),url(../webfonts/fa-solid-900.svg#fontawesome) format("svg")}.fa,.far,.fas{font-family:"Font Awesome 5 Free"}.fa,.fas{font-weight:900} \ No newline at end of file diff --git a/assets/css/images/close.svg b/assets/css/images/close.svg new file mode 100644 index 0000000..5a941dd --- /dev/null +++ b/assets/css/images/close.svg @@ -0,0 +1,10 @@ + + + + + \ No newline at end of file diff --git a/assets/css/main.css b/assets/css/main.css new file mode 100644 index 0000000..cc36d6d --- /dev/null +++ b/assets/css/main.css @@ -0,0 +1,4077 @@ +@import url(fontawesome-all.min.css); + +/* +KABI.tk +*/ + +html, body, div, span, applet, object, +iframe, h1, h2, h3, h4, h5, h6, p, blockquote, +pre, a, abbr, acronym, address, big, cite, +code, del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, b, +u, i, center, dl, dt, dd, ol, ul, li, fieldset, +form, label, legend, table, caption, tbody, +tfoot, thead, tr, th, td, article, aside, +canvas, details, embed, figure, figcaption, +footer, header, hgroup, menu, nav, output, ruby, +section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline;} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block;} + +body { + line-height: 1; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + + blockquote:before, blockquote:after, q:before, q:after { + content: ''; + content: none; + } + +table { + border-collapse: collapse; + border-spacing: 0; +} + +body { + -webkit-text-size-adjust: none; +} + +mark { + background-color: transparent; + color: inherit; +} + +input::-moz-focus-inner { + border: 0; + padding: 0; +} + +input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; +} + +/* Basic */ + + @-ms-viewport { + width: device-width; + } + + body { + -ms-overflow-style: scrollbar; + } + + @media screen and (max-width: 480px) { + + html, body { + min-width: 320px; + } + + } + + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body.is-preload *, body.is-preload *:before, body.is-preload *:after { + -moz-animation: none !important; + -webkit-animation: none !important; + -ms-animation: none !important; + animation: none !important; + -moz-transition: none !important; + -webkit-transition: none !important; + -ms-transition: none !important; + transition: none !important; + } + +/* Type */ + + body { + background-color: #f7f7f7; + color: #999999; + } + + body, input, select, textarea { + font-family: Arial, Helvetica, sans-serif; + font-size: 14pt; + font-weight: normal; + line-height: 1.65; + } + + @media screen and (max-width: 1680px) { + + body, input, select, textarea { + font-size: 12pt; + } + + } + + @media screen and (max-width: 1280px) { + + body, input, select, textarea { + font-size: 11pt; + } + + } + + a { + text-decoration: underline; + } + + a:hover { + text-decoration: none; + } + + strong, b { + font-weight: normal; + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 2em 0; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: normal; + letter-spacing: -0.0125em; + line-height: 1.5; + margin: 0 0 0.8em 0; + } + + h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { + color: inherit; + text-decoration: none; + } + + h2 { + font-size: 1.75em; + } + + h3 { + font-size: 1.25em; + } + + h4 { + font-size: 1em; + } + + h5 { + font-size: 0.8em; + } + + h6 { + font-size: 0.7em; + } + + @media screen and (max-width: 980px) { + + h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { + display: none; + } + + } + + @media screen and (max-width: 736px) { + + h2 { + font-size: 1.25em; + } + + h3 { + font-size: 1.1em; + } + + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + blockquote { + border-left: solid 4px; + font-style: italic; + margin: 0 0 2em 0; + padding: 0.5em 0 0.5em 2em; + } + + code { + border-radius: 4px; + border: solid 1px; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: "Courier New", monospace; + font-size: 0.9em; + margin: 0 0 2em 0; + } + + pre code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } + + hr { + border: 0; + border-bottom: solid 1px; + margin: 2em 0; + } + + hr.major { + margin: 3em 0; + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + input, select, textarea { + color: #707070; + } + + a { + color: #db6172; + } + + strong, b { + color: #707070; + } + + h1, h2, h3, h4, h5, h6 { + color: #707070; + } + + blockquote { + border-left-color: rgba(144, 144, 144, 0.2); + } + + code { + background: rgba(144, 144, 144, 0.075); + border-color: rgba(144, 144, 144, 0.2); + } + + hr { + border-bottom-color: rgba(144, 144, 144, 0.2); + } + +/* Row */ + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp { + order: -1; + } + + .row > .col-1 { + width: 8.33333%; + } + + .row > .off-1 { + margin-left: 8.33333%; + } + + .row > .col-2 { + width: 16.66667%; + } + + .row > .off-2 { + margin-left: 16.66667%; + } + + .row > .col-3 { + width: 25%; + } + + .row > .off-3 { + margin-left: 25%; + } + + .row > .col-4 { + width: 33.33333%; + } + + .row > .off-4 { + margin-left: 33.33333%; + } + + .row > .col-5 { + width: 41.66667%; + } + + .row > .off-5 { + margin-left: 41.66667%; + } + + .row > .col-6 { + width: 50%; + } + + .row > .off-6 { + margin-left: 50%; + } + + .row > .col-7 { + width: 58.33333%; + } + + .row > .off-7 { + margin-left: 58.33333%; + } + + .row > .col-8 { + width: 66.66667%; + } + + .row > .off-8 { + margin-left: 66.66667%; + } + + .row > .col-9 { + width: 75%; + } + + .row > .off-9 { + margin-left: 75%; + } + + .row > .col-10 { + width: 83.33333%; + } + + .row > .off-10 { + margin-left: 83.33333%; + } + + .row > .col-11 { + width: 91.66667%; + } + + .row > .off-11 { + margin-left: 91.66667%; + } + + .row > .col-12 { + width: 100%; + } + + .row > .off-12 { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.5em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1em; + } + + .row { + margin-top: 0; + margin-left: -2em; + } + + .row > * { + padding: 0 0 0 2em; + } + + .row.gtr-uniform { + margin-top: -2em; + } + + .row.gtr-uniform > * { + padding-top: 2em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4em; + } + + .row.gtr-200 > * { + padding: 0 0 0 4em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4em; + } + + @media screen and (max-width: 1680px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xlarge { + order: -1; + } + + .row > .col-1-xlarge { + width: 8.33333%; + } + + .row > .off-1-xlarge { + margin-left: 8.33333%; + } + + .row > .col-2-xlarge { + width: 16.66667%; + } + + .row > .off-2-xlarge { + margin-left: 16.66667%; + } + + .row > .col-3-xlarge { + width: 25%; + } + + .row > .off-3-xlarge { + margin-left: 25%; + } + + .row > .col-4-xlarge { + width: 33.33333%; + } + + .row > .off-4-xlarge { + margin-left: 33.33333%; + } + + .row > .col-5-xlarge { + width: 41.66667%; + } + + .row > .off-5-xlarge { + margin-left: 41.66667%; + } + + .row > .col-6-xlarge { + width: 50%; + } + + .row > .off-6-xlarge { + margin-left: 50%; + } + + .row > .col-7-xlarge { + width: 58.33333%; + } + + .row > .off-7-xlarge { + margin-left: 58.33333%; + } + + .row > .col-8-xlarge { + width: 66.66667%; + } + + .row > .off-8-xlarge { + margin-left: 66.66667%; + } + + .row > .col-9-xlarge { + width: 75%; + } + + .row > .off-9-xlarge { + margin-left: 75%; + } + + .row > .col-10-xlarge { + width: 83.33333%; + } + + .row > .off-10-xlarge { + margin-left: 83.33333%; + } + + .row > .col-11-xlarge { + width: 91.66667%; + } + + .row > .off-11-xlarge { + margin-left: 91.66667%; + } + + .row > .col-12-xlarge { + width: 100%; + } + + .row > .off-12-xlarge { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.5em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.5em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.5em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.5em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -1em; + } + + .row.gtr-50 > * { + padding: 0 0 0 1em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -1em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 1em; + } + + .row { + margin-top: 0; + margin-left: -2em; + } + + .row > * { + padding: 0 0 0 2em; + } + + .row.gtr-uniform { + margin-top: -2em; + } + + .row.gtr-uniform > * { + padding-top: 2em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-150 > * { + padding: 0 0 0 3em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 3em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -4em; + } + + .row.gtr-200 > * { + padding: 0 0 0 4em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -4em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 4em; + } + + } + + @media screen and (max-width: 1280px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-large { + order: -1; + } + + .row > .col-1-large { + width: 8.33333%; + } + + .row > .off-1-large { + margin-left: 8.33333%; + } + + .row > .col-2-large { + width: 16.66667%; + } + + .row > .off-2-large { + margin-left: 16.66667%; + } + + .row > .col-3-large { + width: 25%; + } + + .row > .off-3-large { + margin-left: 25%; + } + + .row > .col-4-large { + width: 33.33333%; + } + + .row > .off-4-large { + margin-left: 33.33333%; + } + + .row > .col-5-large { + width: 41.66667%; + } + + .row > .off-5-large { + margin-left: 41.66667%; + } + + .row > .col-6-large { + width: 50%; + } + + .row > .off-6-large { + margin-left: 50%; + } + + .row > .col-7-large { + width: 58.33333%; + } + + .row > .off-7-large { + margin-left: 58.33333%; + } + + .row > .col-8-large { + width: 66.66667%; + } + + .row > .off-8-large { + margin-left: 66.66667%; + } + + .row > .col-9-large { + width: 75%; + } + + .row > .off-9-large { + margin-left: 75%; + } + + .row > .col-10-large { + width: 83.33333%; + } + + .row > .off-10-large { + margin-left: 83.33333%; + } + + .row > .col-11-large { + width: 91.66667%; + } + + .row > .off-11-large { + margin-left: 91.66667%; + } + + .row > .col-12-large { + width: 100%; + } + + .row > .off-12-large { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 980px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-medium { + order: -1; + } + + .row > .col-1-medium { + width: 8.33333%; + } + + .row > .off-1-medium { + margin-left: 8.33333%; + } + + .row > .col-2-medium { + width: 16.66667%; + } + + .row > .off-2-medium { + margin-left: 16.66667%; + } + + .row > .col-3-medium { + width: 25%; + } + + .row > .off-3-medium { + margin-left: 25%; + } + + .row > .col-4-medium { + width: 33.33333%; + } + + .row > .off-4-medium { + margin-left: 33.33333%; + } + + .row > .col-5-medium { + width: 41.66667%; + } + + .row > .off-5-medium { + margin-left: 41.66667%; + } + + .row > .col-6-medium { + width: 50%; + } + + .row > .off-6-medium { + margin-left: 50%; + } + + .row > .col-7-medium { + width: 58.33333%; + } + + .row > .off-7-medium { + margin-left: 58.33333%; + } + + .row > .col-8-medium { + width: 66.66667%; + } + + .row > .off-8-medium { + margin-left: 66.66667%; + } + + .row > .col-9-medium { + width: 75%; + } + + .row > .off-9-medium { + margin-left: 75%; + } + + .row > .col-10-medium { + width: 83.33333%; + } + + .row > .off-10-medium { + margin-left: 83.33333%; + } + + .row > .col-11-medium { + width: 91.66667%; + } + + .row > .off-11-medium { + margin-left: 91.66667%; + } + + .row > .col-12-medium { + width: 100%; + } + + .row > .off-12-medium { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.375em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.375em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.375em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.375em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.75em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.75em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.75em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.75em; + } + + .row { + margin-top: 0; + margin-left: -1.5em; + } + + .row > * { + padding: 0 0 0 1.5em; + } + + .row.gtr-uniform { + margin-top: -1.5em; + } + + .row.gtr-uniform > * { + padding-top: 1.5em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -2.25em; + } + + .row.gtr-150 > * { + padding: 0 0 0 2.25em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -2.25em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 2.25em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -3em; + } + + .row.gtr-200 > * { + padding: 0 0 0 3em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -3em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 3em; + } + + } + + @media screen and (max-width: 736px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-small { + order: -1; + } + + .row > .col-1-small { + width: 8.33333%; + } + + .row > .off-1-small { + margin-left: 8.33333%; + } + + .row > .col-2-small { + width: 16.66667%; + } + + .row > .off-2-small { + margin-left: 16.66667%; + } + + .row > .col-3-small { + width: 25%; + } + + .row > .off-3-small { + margin-left: 25%; + } + + .row > .col-4-small { + width: 33.33333%; + } + + .row > .off-4-small { + margin-left: 33.33333%; + } + + .row > .col-5-small { + width: 41.66667%; + } + + .row > .off-5-small { + margin-left: 41.66667%; + } + + .row > .col-6-small { + width: 50%; + } + + .row > .off-6-small { + margin-left: 50%; + } + + .row > .col-7-small { + width: 58.33333%; + } + + .row > .off-7-small { + margin-left: 58.33333%; + } + + .row > .col-8-small { + width: 66.66667%; + } + + .row > .off-8-small { + margin-left: 66.66667%; + } + + .row > .col-9-small { + width: 75%; + } + + .row > .off-9-small { + margin-left: 75%; + } + + .row > .col-10-small { + width: 83.33333%; + } + + .row > .off-10-small { + margin-left: 83.33333%; + } + + .row > .col-11-small { + width: 91.66667%; + } + + .row > .off-11-small { + margin-left: 91.66667%; + } + + .row > .col-12-small { + width: 100%; + } + + .row > .off-12-small { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.3125em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.3125em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.3125em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.3125em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.625em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.625em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.625em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.625em; + } + + .row { + margin-top: 0; + margin-left: -1.25em; + } + + .row > * { + padding: 0 0 0 1.25em; + } + + .row.gtr-uniform { + margin-top: -1.25em; + } + + .row.gtr-uniform > * { + padding-top: 1.25em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -1.875em; + } + + .row.gtr-150 > * { + padding: 0 0 0 1.875em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -1.875em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 1.875em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -2.5em; + } + + .row.gtr-200 > * { + padding: 0 0 0 2.5em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -2.5em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 2.5em; + } + + } + + @media screen and (max-width: 480px) { + + .row { + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + } + + .row > * { + box-sizing: border-box; + } + + .row.gtr-uniform > * > :last-child { + margin-bottom: 0; + } + + .row.aln-left { + justify-content: flex-start; + } + + .row.aln-center { + justify-content: center; + } + + .row.aln-right { + justify-content: flex-end; + } + + .row.aln-top { + align-items: flex-start; + } + + .row.aln-middle { + align-items: center; + } + + .row.aln-bottom { + align-items: flex-end; + } + + .row > .imp-xsmall { + order: -1; + } + + .row > .col-1-xsmall { + width: 8.33333%; + } + + .row > .off-1-xsmall { + margin-left: 8.33333%; + } + + .row > .col-2-xsmall { + width: 16.66667%; + } + + .row > .off-2-xsmall { + margin-left: 16.66667%; + } + + .row > .col-3-xsmall { + width: 25%; + } + + .row > .off-3-xsmall { + margin-left: 25%; + } + + .row > .col-4-xsmall { + width: 33.33333%; + } + + .row > .off-4-xsmall { + margin-left: 33.33333%; + } + + .row > .col-5-xsmall { + width: 41.66667%; + } + + .row > .off-5-xsmall { + margin-left: 41.66667%; + } + + .row > .col-6-xsmall { + width: 50%; + } + + .row > .off-6-xsmall { + margin-left: 50%; + } + + .row > .col-7-xsmall { + width: 58.33333%; + } + + .row > .off-7-xsmall { + margin-left: 58.33333%; + } + + .row > .col-8-xsmall { + width: 66.66667%; + } + + .row > .off-8-xsmall { + margin-left: 66.66667%; + } + + .row > .col-9-xsmall { + width: 75%; + } + + .row > .off-9-xsmall { + margin-left: 75%; + } + + .row > .col-10-xsmall { + width: 83.33333%; + } + + .row > .off-10-xsmall { + margin-left: 83.33333%; + } + + .row > .col-11-xsmall { + width: 91.66667%; + } + + .row > .off-11-xsmall { + margin-left: 91.66667%; + } + + .row > .col-12-xsmall { + width: 100%; + } + + .row > .off-12-xsmall { + margin-left: 100%; + } + + .row.gtr-0 { + margin-top: 0; + margin-left: 0em; + } + + .row.gtr-0 > * { + padding: 0 0 0 0em; + } + + .row.gtr-0.gtr-uniform { + margin-top: 0em; + } + + .row.gtr-0.gtr-uniform > * { + padding-top: 0em; + } + + .row.gtr-25 { + margin-top: 0; + margin-left: -0.3125em; + } + + .row.gtr-25 > * { + padding: 0 0 0 0.3125em; + } + + .row.gtr-25.gtr-uniform { + margin-top: -0.3125em; + } + + .row.gtr-25.gtr-uniform > * { + padding-top: 0.3125em; + } + + .row.gtr-50 { + margin-top: 0; + margin-left: -0.625em; + } + + .row.gtr-50 > * { + padding: 0 0 0 0.625em; + } + + .row.gtr-50.gtr-uniform { + margin-top: -0.625em; + } + + .row.gtr-50.gtr-uniform > * { + padding-top: 0.625em; + } + + .row { + margin-top: 0; + margin-left: -1.25em; + } + + .row > * { + padding: 0 0 0 1.25em; + } + + .row.gtr-uniform { + margin-top: -1.25em; + } + + .row.gtr-uniform > * { + padding-top: 1.25em; + } + + .row.gtr-150 { + margin-top: 0; + margin-left: -1.875em; + } + + .row.gtr-150 > * { + padding: 0 0 0 1.875em; + } + + .row.gtr-150.gtr-uniform { + margin-top: -1.875em; + } + + .row.gtr-150.gtr-uniform > * { + padding-top: 1.875em; + } + + .row.gtr-200 { + margin-top: 0; + margin-left: -2.5em; + } + + .row.gtr-200 > * { + padding: 0 0 0 2.5em; + } + + .row.gtr-200.gtr-uniform { + margin-top: -2.5em; + } + + .row.gtr-200.gtr-uniform > * { + padding-top: 2.5em; + } + + } + +/* Box */ + + .box { + border-radius: 4px; + border: solid 1px; + margin-bottom: 2em; + padding: 1.5em; + } + + .box > :last-child, + .box > :last-child > :last-child, + .box > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + .box.alt { + border: 0; + border-radius: 0; + padding: 0; + } + + .box { + border-color: rgba(144, 144, 144, 0.2); + } + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; + border-radius: 4px; + border: 0; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: normal; + height: 4.1em; + letter-spacing: 0.25em; + line-height: 4.25em; + padding: 0 3em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + } + + input[type="submit"].icon:before, + input[type="reset"].icon:before, + input[type="button"].icon:before, + button.icon:before, + .button.icon:before { + margin-right: 0.5em; + } + + input[type="submit"].fit, + input[type="reset"].fit, + input[type="button"].fit, + button.fit, + .button.fit { + width: 100%; + } + + input[type="submit"].small, + input[type="reset"].small, + input[type="button"].small, + button.small, + .button.small { + font-size: 0.8em; + } + + input[type="submit"].major, + input[type="reset"].major, + input[type="button"].major, + button.major, + .button.major { + min-width: 20em; + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + button.disabled, + button:disabled, + .button.disabled, + .button:disabled { + pointer-events: none; + opacity: 0.35; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.2); + color: #707070 !important; + } + + input[type="submit"]:hover, + input[type="reset"]:hover, + input[type="button"]:hover, + button:hover, + .button:hover { + background-color: rgba(144, 144, 144, 0.075); + } + + input[type="submit"]:hover:active, + input[type="reset"]:hover:active, + input[type="button"]:hover:active, + button:hover:active, + .button:hover:active { + background-color: rgba(144, 144, 144, 0.15); + } + + input[type="submit"].disabled, input[type="submit"]:disabled, + input[type="reset"].disabled, + input[type="reset"]:disabled, + input[type="button"].disabled, + input[type="button"]:disabled, + button.disabled, + button:disabled, + .button.disabled, + .button:disabled { + background-color: rgba(144, 144, 144, 0.2); + } + + input[type="submit"].primary, + input[type="reset"].primary, + input[type="button"].primary, + button.primary, + .button.primary { + box-shadow: none; + background-color: #db6172; + color: #ffffff !important; + } + + input[type="submit"].primary:hover, + input[type="reset"].primary:hover, + input[type="button"].primary:hover, + button.primary:hover, + .button.primary:hover { + background-color: #e07685; + } + + input[type="submit"].primary:hover:active, + input[type="reset"].primary:hover:active, + input[type="button"].primary:hover:active, + button.primary:hover:active, + .button.primary:hover:active { + background-color: #d64c5f; + } + +/* Features */ + + .features { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: -1em 0 2em -1em; + width: calc(100% + 1em); + } + + .features section { + padding: 3em 3em 1em 3em ; + border-radius: 4px; + margin: 1em 0 0 1em; + text-align: center; + width: calc(33.33333% - 1em); + } + + @media screen and (max-width: 1280px) { + + .features section { + padding: 3em 2em 1em 2em ; + } + + } + + @media screen and (max-width: 980px) { + + .features section { + width: calc(50% - 1em); + } + + } + + @media screen and (max-width: 736px) { + + .features section { + padding: 3em 1.5em 1em 1.5em ; + } + + } + + @media screen and (max-width: 480px) { + + .features { + display: block; + margin: 0 0 2em 0; + width: 100%; + } + + .features section { + margin: 0 0 1em 0; + width: 100%; + } + + } + + .features section { + background-color: #ffffff; + border-bottom: solid 1px #eaeaea; + } + +/* Form */ + + form { + margin: 0 0 2em 0; + } + + label { + display: block; + font-size: 0.9em; + font-weight: normal; + margin: 0 0 1em 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + border-radius: 4px; + border: solid 1px; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + } + + input[type="text"]:invalid, + input[type="password"]:invalid, + input[type="email"]:invalid, + select:invalid, + textarea:invalid { + box-shadow: none; + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: 2.75em; + padding-right: 2.75em; + text-overflow: ellipsis; + } + + select:focus::-ms-value { + background-color: transparent; + } + + select::-ms-expand { + display: none; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: 2.75em; + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"] { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + text-decoration: none; + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: normal; + padding-left: 2.4em; + padding-right: 0.75em; + position: relative; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + border-radius: 4px; + border: solid 1px; + content: ''; + display: inline-block; + font-size: 0.8em; + height: 2.0625em; + left: 0; + line-height: 2.0625em; + position: absolute; + text-align: center; + top: 0; + width: 2.0625em; + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + content: '\f00c'; + } + + input[type="checkbox"] + label:before { + border-radius: 4px; + } + + input[type="radio"] + label:before { + border-radius: 100%; + } + + ::-webkit-input-placeholder { + opacity: 1.0; + } + + :-moz-placeholder { + opacity: 1.0; + } + + ::-moz-placeholder { + opacity: 1.0; + } + + :-ms-input-placeholder { + opacity: 1.0; + } + + label { + color: #707070; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + background-color: rgba(144, 144, 144, 0.075); + border-color: rgba(144, 144, 144, 0.2); + } + + input[type="text"]:focus, + input[type="password"]:focus, + input[type="email"]:focus, + select:focus, + textarea:focus { + border-color: #db6172; + box-shadow: 0 0 0 1px #db6172; + } + + select { + background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' preserveAspectRatio='none' viewBox='0 0 40 40'%3E%3Cpath d='M9.4,12.3l10.4,10.4l10.4-10.4c0.2-0.2,0.5-0.4,0.9-0.4c0.3,0,0.6,0.1,0.9,0.4l3.3,3.3c0.2,0.2,0.4,0.5,0.4,0.9 c0,0.4-0.1,0.6-0.4,0.9L20.7,31.9c-0.2,0.2-0.5,0.4-0.9,0.4c-0.3,0-0.6-0.1-0.9-0.4L4.3,17.3c-0.2-0.2-0.4-0.5-0.4-0.9 c0-0.4,0.1-0.6,0.4-0.9l3.3-3.3c0.2-0.2,0.5-0.4,0.9-0.4S9.1,12.1,9.4,12.3z' fill='rgba(144, 144, 144, 0.2)' /%3E%3C/svg%3E"); + } + + select option { + color: #707070; + background: #ffffff; + } + + input[type="checkbox"] + label, + input[type="radio"] + label { + color: #999999; + } + + input[type="checkbox"] + label:before, + input[type="radio"] + label:before { + background: rgba(144, 144, 144, 0.075); + border-color: rgba(144, 144, 144, 0.2); + } + + input[type="checkbox"]:checked + label:before, + input[type="radio"]:checked + label:before { + background-color: #db6172; + border-color: #db6172; + color: #ffffff; + } + + input[type="checkbox"]:focus + label:before, + input[type="radio"]:focus + label:before { + border-color: #db6172; + box-shadow: 0 0 0 1px #db6172; + } + + ::-webkit-input-placeholder { + color: #999999 !important; + } + + :-moz-placeholder { + color: #999999 !important; + } + + ::-moz-placeholder { + color: #999999 !important; + } + + :-ms-input-placeholder { + color: #999999 !important; + } + + .formerize-placeholder { + color: #999999 !important; + } + +/* Icon */ + + .icon { + text-decoration: none; + border-bottom: none; + position: relative; + } + + .icon:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + .icon > .label { + display: none; + } + + .icon.solid:before { + font-weight: 900; + } + + .icon.brands:before { + font-family: 'Font Awesome 5 Brands'; + } + + .icon.major { + -moz-transform: rotate(45deg); + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + border-radius: 4px; + border: solid 1px; + display: block; + font-size: 1.75em; + height: 2.5em; + line-height: 2.5em; + margin: 0 auto 2em auto; + position: relative; + text-align: center; + top: 0.5em; + width: 2.5em; + } + + .icon.major:before { + -moz-transform: rotate(-45deg); + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + text-align: center; + } + + .icon.major { + border-color: rgba(144, 144, 144, 0.2); + } + + .icon.major:before { + color: #db6172; + } + +/* Image */ + + .image { + border-radius: 4px; + border: 0; + display: inline-block; + position: relative; + } + + .image img { + border-radius: 4px; + display: block; + } + + .image.left, .image.right { + max-width: 40%; + } + + .image.left img, .image.right img { + width: 100%; + } + + .image.left { + float: left; + margin: 0 2.5em 2em 0; + top: 0.25em; + } + + .image.right { + float: right; + margin: 0 0 2em 2.5em; + top: 0.25em; + } + + .image.fit { + display: block; + margin: 0 0 2em 0; + width: 100%; + } + + .image.fit img { + width: 100%; + } + + .image.main { + display: block; + margin: 0 0 3em 0; + width: 100%; + } + + .image.main img { + width: 100%; + } + + @media screen and (max-width: 736px) { + + .image.left { + margin: 0 1.5em 1em 0; + } + + .image.right { + margin: 0 0 1em 1.5em; + } + + } + +/* Image Circles */ + + .image-circles { + margin: 0 0 2em 0; + text-align: right; + } + + .image-circles .images { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + margin: 1em 0 0 -1em; + width: calc(100% + 1em); + } + + .image-circles .images > * { + -ms-flex: 1; + display: block; + margin: 0 0 0 1em; + position: relative; + white-space: nowrap; + width: 50%; + } + + .image-circles .images > *:before { + border-radius: 100%; + content: ''; + display: block; + height: 100%; + margin: 0 0 0 1em; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + width: calc(50% - 0.5em); + } + + .image-circles .images > * img { + border-radius: 100%; + display: block; + width: calc(50% - 0.5em); + } + + .image-circles .images:first-child { + margin-top: 0; + } + + .image-circles .images:nth-child(2n - 1) > * { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); + } + + .image-circles .images:nth-child(2n - 1) > * img { + -moz-transform: scaleX(-1); + -webkit-transform: scaleX(-1); + -ms-transform: scaleX(-1); + transform: scaleX(-1); + } + + @media screen and (max-width: 980px) { + + .image-circles { + width: 100%; + max-width: 30em; + } + + } + + @media screen and (max-width: 736px) { + + .image-circles { + max-width: 16em; + } + + } + + .image-circles .images > *:before { + box-shadow: inset 0 0 0 1px rgba(144, 144, 144, 0.2); + } + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 2em 0; + padding-left: 1.25em; + } + + ol li { + padding-left: 0.25em; + } + + ul { + list-style: disc; + margin: 0 0 2em 0; + padding-left: 1em; + } + + ul li { + padding-left: 0.5em; + } + + ul.alt { + list-style: none; + padding-left: 0; + } + + ul.alt li { + border-top: solid 1px; + padding: 0.5em 0; + } + + ul.alt li:first-child { + border-top: 0; + padding-top: 0; + } + + dl { + margin: 0 0 2em 0; + } + + dl dt { + display: block; + font-weight: normal; + margin: 0 0 1em 0; + } + + dl dd { + margin-left: 2em; + } + + ul.alt li { + border-top-color: rgba(144, 144, 144, 0.2); + } + +/* Actions */ + + ul.actions { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + cursor: default; + list-style: none; + margin-left: -1em; + padding-left: 0; + } + + ul.actions li { + padding: 0 0 0 1em; + vertical-align: middle; + } + + ul.actions.special { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; + } + + ul.actions.special li:first-child { + padding-left: 0; + } + + ul.actions.stacked { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + } + + ul.actions.stacked li { + padding: 1.3em 0 0 0; + } + + ul.actions.stacked li:first-child { + padding-top: 0; + } + + ul.actions.fit { + width: calc(100% + 1em); + } + + ul.actions.fit li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + width: 100%; + } + + ul.actions.fit li > * { + width: 100%; + } + + ul.actions.fit.stacked { + width: 100%; + } + + @media screen and (max-width: 480px) { + + ul.actions:not(.fixed) { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + margin-left: 0; + width: 100% !important; + } + + ul.actions:not(.fixed) li { + -moz-flex-grow: 1; + -webkit-flex-grow: 1; + -ms-flex-grow: 1; + flex-grow: 1; + -moz-flex-shrink: 1; + -webkit-flex-shrink: 1; + -ms-flex-shrink: 1; + flex-shrink: 1; + padding: 1em 0 0 0; + text-align: center; + width: 100%; + } + + ul.actions:not(.fixed) li > * { + width: 100%; + } + + ul.actions:not(.fixed) li:first-child { + padding-top: 0; + } + + ul.actions:not(.fixed) li input[type="submit"], + ul.actions:not(.fixed) li input[type="reset"], + ul.actions:not(.fixed) li input[type="button"], + ul.actions:not(.fixed) li button, + ul.actions:not(.fixed) li .button { + width: 100%; + } + + ul.actions:not(.fixed) li input[type="submit"].icon:before, + ul.actions:not(.fixed) li input[type="reset"].icon:before, + ul.actions:not(.fixed) li input[type="button"].icon:before, + ul.actions:not(.fixed) li button.icon:before, + ul.actions:not(.fixed) li .button.icon:before { + margin-left: -0.5em; + } + + } + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + } + + ul.icons li { + display: inline-block; + padding: 0 1em 0 0; + } + + ul.icons li:last-child { + padding-right: 0; + } + + ul.icons li .icon:before { + font-size: 1.25em; + } + +/* Section/Article */ + + section.special, article.special { + text-align: center; + } + + header p { + position: relative; + margin: 0 0 2em 0; + } + + header.major { + text-align: center; + margin: 0 0 3em 0; + } + + header.major > :last-child { + margin-bottom: 0; + } + + @media screen and (max-width: 980px) { + + header br { + display: none; + } + + } + + @media screen and (max-width: 736px) { + + header.major { + margin: 0 0 2em 0; + } + + } + + footer.major { + text-align: center; + margin: 3em 0 2em 0; + } + + footer.major > :last-child { + margin-bottom: 0; + } + + @media screen and (max-width: 736px) { + + footer.major { + margin: 2em 0 2em 0; + } + + } + +/* Spotlights */ + + .spotlights { + margin: 0 0 2em 0; + } + + .spotlights section { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-flex-direction: row; + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + border-top: solid 1px; + margin-top: 3.4em; + padding-top: 3.4em; + } + + .spotlights section .image { + position: relative; + width: 35%; + } + + .spotlights section .image img { + display: block; + width: 100%; + } + + .spotlights section .content { + -ms-flex: 1; + margin: 0 0 0 4em; + width: 65%; + } + + .spotlights section .content > :last-child { + margin-bottom: 0; + } + + .spotlights section:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + + .spotlights section:nth-child(2n) { + -moz-flex-direction: row-reverse; + -webkit-flex-direction: row-reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; + } + + .spotlights section:nth-child(2n) .content { + margin: 0 4em 0 0; + } + + @media screen and (max-width: 980px) { + + .spotlights section { + -moz-align-items: -moz-flex-start; + -webkit-align-items: -webkit-flex-start; + -ms-align-items: -ms-flex-start; + align-items: flex-start; + } + + .spotlights section .image { + top: 0.35em; + width: 40%; + } + + .spotlights section .content { + margin: 0 0 0 3em; + width: 60%; + } + + .spotlights section:nth-child(2n) .content { + margin: 0 3em 0 0; + } + + } + + @media screen and (max-width: 736px) { + + .spotlights section { + margin-top: 2em; + padding-top: 2em; + } + + } + + @media screen and (max-width: 480px) { + + .spotlights section { + display: block; + } + + .spotlights section .image { + display: block; + top: 0; + width: 100%; + margin: 0 0 2em 0; + } + + .spotlights section .content { + margin: 0; + width: 100%; + text-align: center; + } + + } + + .spotlights section { + border-top-color: rgba(144, 144, 144, 0.2); + } + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 2em 0; + width: 100%; + } + + table tbody tr { + border: solid 1px; + border-left: 0; + border-right: 0; + } + + table td { + padding: 0.75em 0.75em; + } + + table th { + font-size: 0.9em; + font-weight: normal; + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + table thead { + border-bottom: solid 2px; + } + + table tfoot { + border-top: solid 2px; + } + + table.alt { + border-collapse: separate; + } + + table.alt tbody tr td { + border: solid 1px; + border-left-width: 0; + border-top-width: 0; + } + + table.alt tbody tr td:first-child { + border-left-width: 1px; + } + + table.alt tbody tr:first-child td { + border-top-width: 1px; + } + + table.alt thead { + border-bottom: 0; + } + + table.alt tfoot { + border-top: 0; + } + + table tbody tr { + border-color: rgba(144, 144, 144, 0.2); + } + + table tbody tr:nth-child(2n + 1) { + background-color: rgba(144, 144, 144, 0.075); + } + + table th { + color: #707070; + } + + table thead { + border-bottom-color: rgba(144, 144, 144, 0.2); + } + + table tfoot { + border-top-color: rgba(144, 144, 144, 0.2); + } + + table.alt tbody tr td { + border-color: rgba(144, 144, 144, 0.2); + } + +/* Wrapper */ + + .wrapper { + padding: 7em 0 5em 0 ; + position: relative; + } + + .wrapper > .inner { + margin: 0 auto; + width: 75em; + } + + .wrapper.style1 { + background: #ffffff; + border-bottom: solid 1px #eaeaea; + } + + .wrapper.split > .inner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + } + + .wrapper.split > .inner > * { + -ms-flex: 1; + width: 50%; + } + + .wrapper.split > .inner > :nth-child(2n - 1) { + margin-right: 2em; + } + + .wrapper.split > .inner > :nth-child(2n) { + margin-left: 2em; + } + + @media screen and (max-width: 1680px) { + + .wrapper { + padding: 5em 0 3em 0 ; + } + + } + + @media screen and (max-width: 1280px) { + + .wrapper > .inner { + width: 100%; + padding: 0 3em; + } + + } + + @media screen and (max-width: 980px) { + + .wrapper.split { + text-align: center; + } + + .wrapper.split ul.actions { + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + width: 100%; + margin-left: 0; + } + + .wrapper.split ul.actions li:first-child { + padding-left: 0; + } + + .wrapper.split > .inner { + -moz-flex-direction: column-reverse; + -webkit-flex-direction: column-reverse; + -ms-flex-direction: column-reverse; + flex-direction: column-reverse; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + } + + .wrapper.split > .inner > * { + -ms-flex: none; + margin-bottom: 4em; + width: 100%; + } + + .wrapper.split > .inner > :nth-child(2n - 1) { + margin-right: 0; + } + + .wrapper.split > .inner > :nth-child(2n) { + margin-left: 0; + } + + .wrapper.split > .inner > :first-child { + margin-bottom: 0; + } + + } + + @media screen and (max-width: 736px) { + + .wrapper { + padding: 3em 0 1em 0 ; + } + + .wrapper > .inner { + padding: 0 1.5em; + } + + .wrapper.split > .inner > * { + margin-bottom: 2em; + } + + } + +/* Header */ + + body { + padding-top: 3.125em; + } + + @-moz-keyframes reveal-header { + 0% { + top: -4em; + opacity: 0; + } + + 100% { + top: 0; + opacity: 1; + } + } + + @-webkit-keyframes reveal-header { + 0% { + top: -4em; + opacity: 0; + } + + 100% { + top: 0; + opacity: 1; + } + } + + @-ms-keyframes reveal-header { + 0% { + top: -4em; + opacity: 0; + } + + 100% { + top: 0; + opacity: 1; + } + } + + @keyframes reveal-header { + 0% { + top: -4em; + opacity: 0; + } + + 100% { + top: 0; + opacity: 1; + } + } + + #header { + background-color: #ffffff; + border-bottom: solid 1px rgba(144, 144, 144, 0.2); + cursor: default; + height: 3.25em; + left: 0; + line-height: 3.25em; + position: fixed; + text-align: right; + top: 0; + width: 100%; + z-index: 10001; + } + + #header > h1 { + color: #707070; + display: inline-block; + height: inherit; + left: 1.25em; + line-height: inherit; + margin: 0; + padding: 0; + position: absolute; + top: 0; + } + + #header > h1 a { + font-size: 1.25em; + } + + #header > a { + -moz-transition: color 0.2s ease-in-out; + -webkit-transition: color 0.2s ease-in-out; + -ms-transition: color 0.2s ease-in-out; + transition: color 0.2s ease-in-out; + color: inherit; + display: inline-block; + font-size: 0.8em; + letter-spacing: 0.25em; + padding: 0 0.75em; + text-decoration: none; + text-transform: uppercase; + } + + #header > a[href="#menu"] { + text-decoration: none; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + } + + #header > a[href="#menu"]:before { + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + + #header > a[href="#menu"]:before { + content: '\f0c9'; + float: right; + line-height: inherit; + margin: 0 0 0 0.75em; + } + + #header > a + a[href="#menu"]:last-child { + border-left: solid 1px rgba(144, 144, 144, 0.2); + padding-left: 2em; + margin-left: 1em; + } + + #header > a:last-child { + padding-right: 1.25em; + } + + @media screen and (max-width: 736px) { + + #header > a { + padding: 0 0.5em; + } + + #header > a + a[href="#menu"]:last-child { + margin-left: 0.25em; + padding-left: 1em; + } + + #header > a:last-child { + padding-right: 1em; + } + + } + + #header + #banner { + margin-top: -3.125em; + } + + #header.reveal { + -moz-animation: reveal-header 0.5s ease; + -webkit-animation: reveal-header 0.5s ease; + -ms-animation: reveal-header 0.5s ease; + animation: reveal-header 0.5s ease; + } + + #header.alt { + -moz-animation: none; + -webkit-animation: none; + -ms-animation: none; + animation: none; + background-color: transparent; + box-shadow: 0 1px 0 0 #ffffff; + color: #ffffff; + position: absolute; + top: 3em; + left: 4em; + width: calc(100% - 8em); + } + + #header.alt > h1 { + color: #ffffff; + left: 0; + } + + #header.alt > a + a[href="#menu"]:last-child { + border-left-color: #ffffff; + } + + #header.alt > a:last-child { + padding-right: 0; + } + + @media screen and (max-width: 1280px) { + + #header.alt { + top: 2em; + left: 3em; + width: calc(100% - 6em); + } + + } + + @media screen and (max-width: 980px) { + + body { + padding-top: 44px; + } + + #header { + height: 44px; + line-height: 44px; + } + + #header > h1 { + left: 1em; + } + + #header > h1 a { + font-size: 1em; + } + + } + + @media screen and (max-width: 736px) { + + #header.alt { + top: 0.25em; + left: 1.5em; + width: calc(100% - 3em); + } + + } + + @media screen and (max-width: 480px) { + + #header { + min-width: 320px; + } + + #header.alt { + min-width: 0; + } + + } + +/* Menu */ + + #menu { + -moz-transform: translateX(20em); + -webkit-transform: translateX(20em); + -ms-transform: translateX(20em); + transform: translateX(20em); + -moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + -webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + -ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s; + -webkit-overflow-scrolling: touch; + background: #ffffff; + border-left: solid 1px rgba(144, 144, 144, 0.2); + box-shadow: none; + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3em 2em; + position: fixed; + right: 0; + top: 0; + visibility: hidden; + width: 20em; + z-index: 10002; + } + + #menu > ul { + margin: 0 0 1em 0; + } + + #menu > ul.links { + list-style: none; + padding: 0; + } + + #menu > ul.links > li { + padding: 0; + } + + #menu > ul.links > li > a:not(.button) { + border: 0; + border-top: solid 1px rgba(144, 144, 144, 0.2); + color: inherit; + display: block; + line-height: 3.5em; + text-decoration: none; + } + + #menu > ul.links > li > .button { + display: block; + margin: 0.5em 0 0 0; + } + + #menu > ul.links > li:first-child > a:not(.button) { + border-top: 0 !important; + } + + #menu .close { + background-image: url("images/close.svg"); + background-repeat: no-repeat; + background-size: contain; + background-position: top right; + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + border: 0; + color: #999999; + cursor: pointer; + display: block; + height: 3.5em; + position: absolute; + right: 0; + text-align: right; + top: 0; + vertical-align: middle; + width: 6em; + } + + #menu .close:before { + font-size: 1.25em; + } + + #menu .close:hover { + color: #707070; + } + + @media screen and (max-width: 736px) { + + #menu .close { + height: 4em; + line-height: 4em; + } + + } + + #menu.visible { + -moz-transform: translateX(0); + -webkit-transform: translateX(0); + -ms-transform: translateX(0); + transform: translateX(0); + box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.05); + visibility: visible; + } + + @media screen and (max-width: 736px) { + + #menu { + padding: 2.5em 1.75em; + } + + #menu .close { + background-size: 50%; + } + + } + +/* Banner */ + + #banner { + background-color: #303639; + color: #ffffff; + padding: 10.5em 0 4em 0 ; + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + -moz-justify-content: center; + -webkit-justify-content: center; + -ms-justify-content: center; + justify-content: center; + background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -webkit-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -ms-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-attachment: fixed; + background-position: center; + background-size: cover; + height: 75vh; + min-height: 30em; + position: relative; + } + + #banner input, #banner select, #banner textarea { + color: #ffffff; + } + + #banner a { + color: #db6172; + } + + #banner strong, #banner b { + color: #ffffff; + } + + #banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6 { + color: #ffffff; + } + + #banner blockquote { + border-left-color: #ffffff; + } + + #banner code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #banner hr { + border-bottom-color: #ffffff; + } + + #banner input[type="submit"], + #banner input[type="reset"], + #banner input[type="button"], + #banner button, + #banner .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px #ffffff; + color: #ffffff !important; + } + + #banner input[type="submit"]:hover, + #banner input[type="reset"]:hover, + #banner input[type="button"]:hover, + #banner button:hover, + #banner .button:hover { + background-color: rgba(255, 255, 255, 0.075); + } + + #banner input[type="submit"]:hover:active, + #banner input[type="reset"]:hover:active, + #banner input[type="button"]:hover:active, + #banner button:hover:active, + #banner .button:hover:active { + background-color: rgba(255, 255, 255, 0.15); + } + + #banner input[type="submit"].disabled, #banner input[type="submit"]:disabled, + #banner input[type="reset"].disabled, + #banner input[type="reset"]:disabled, + #banner input[type="button"].disabled, + #banner input[type="button"]:disabled, + #banner button.disabled, + #banner button:disabled, + #banner .button.disabled, + #banner .button:disabled { + background-color: #ffffff; + } + + #banner input[type="submit"].primary, + #banner input[type="reset"].primary, + #banner input[type="button"].primary, + #banner button.primary, + #banner .button.primary { + box-shadow: none; + background-color: #db6172; + color: #ffffff !important; + } + + #banner input[type="submit"].primary:hover, + #banner input[type="reset"].primary:hover, + #banner input[type="button"].primary:hover, + #banner button.primary:hover, + #banner .button.primary:hover { + background-color: #e07685; + } + + #banner input[type="submit"].primary:hover:active, + #banner input[type="reset"].primary:hover:active, + #banner input[type="button"].primary:hover:active, + #banner button.primary:hover:active, + #banner .button.primary:hover:active { + background-color: #d64c5f; + } + + #banner:after { + pointer-events: none; + -moz-transition: opacity 2s ease, visibility 2s; + -webkit-transition: opacity 2s ease, visibility 2s; + -ms-transition: opacity 2s ease, visibility 2s; + transition: opacity 2s ease, visibility 2s; + background-color: #303639; + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + visibility: hidden; + width: 100%; + z-index: 10001; + } + + #banner .inner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-align-items: center; + -webkit-align-items: center; + -ms-align-items: center; + align-items: center; + max-width: 75em; + } + + #banner .inner h2 { + font-size: 2.75em; + margin-bottom: 0; + margin-top: -0.25em; + line-height: 1.3; + } + + #banner .inner p { + font-size: 1.2em; + margin: 0.7em 0 0 0; + } + + #banner .inner .content { + -moz-transition: -moz-transform 1s ease-out, opacity 1s ease-out; + -webkit-transition: -webkit-transform 1s ease-out, opacity 1s ease-out; + -ms-transition: -ms-transform 1s ease-out, opacity 1s ease-out; + transition: transform 1s ease-out, opacity 1s ease-out; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + } + + #banner .inner .content > :last-child { + margin-bottom: 0; + } + + #banner .inner .actions { + -moz-transition: -moz-transform 1s ease-out, opacity 1s ease-out; + -webkit-transition: -webkit-transform 1s ease-out, opacity 1s ease-out; + -ms-transition: -ms-transform 1s ease-out, opacity 1s ease-out; + transition: transform 1s ease-out, opacity 1s ease-out; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + opacity: 1; + border-left: solid 1px #ffffff; + margin: 0 0 0 4em; + min-width: 20em; + padding: 1em 0 1em 3em; + } + + @media screen and (max-width: 1280px) { + + #banner { + background-attachment: scroll; + } + + #banner .inner { + max-width: 100%; + padding: 0 3em; + } + + } + + @media screen and (max-width: 980px) { + + #banner .inner { + -moz-flex-direction: column; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -moz-align-items: -moz-stretch; + -webkit-align-items: -webkit-stretch; + -ms-align-items: -ms-stretch; + align-items: stretch; + text-align: center; + } + + #banner .inner .actions { + border-left: 0; + margin: 3em 0 0 0; + min-width: 0; + padding: 0; + } + + } + + @media screen and (max-width: 736px) { + + #banner { + padding: 7.5em 0 3.5em 0 ; + height: auto; + min-height: 0; + } + + #banner .inner { + padding: 0 1.5em; + } + + #banner .inner h2 { + font-size: 1.75em; + } + + #banner .inner p { + font-size: 1em; + } + + #banner .inner .actions { + margin: 2em 0 0 0; + } + + } + + @media screen and (max-width: 480px) { + + #banner { + min-height: 75vh; + } + + #banner .inner { + -ms-flex: 1; + } + + } + + body.is-preload #banner:after { + opacity: 1; + visibility: visible; + } + + body.is-preload #banner .inner .content { + opacity: 0; + -moz-transform: translateY(-1em); + -webkit-transform: translateY(-1em); + -ms-transform: translateY(-1em); + transform: translateY(-1em); + } + + body.is-preload #banner .inner .actions { + opacity: 0; + -moz-transform: translateY(1em); + -webkit-transform: translateY(1em); + -ms-transform: translateY(1em); + transform: translateY(1em); + } + + @media screen and (max-width: 980px) { + + body.is-preload #banner .inner .content { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + body.is-preload #banner .inner .actions { + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + transform: translateY(0); + } + + } + +/* Footer */ + + #footer { + background-color: #303639; + color: #ffffff; + padding: 7em 0 5em 0 ; + background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -webkit-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -ms-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-attachment: fixed; + background-position: center; + background-size: cover; + } + + #footer input, #footer select, #footer textarea { + color: #ffffff; + } + + #footer a { + color: #db6172; + } + + #footer strong, #footer b { + color: #ffffff; + } + + #footer h1, #footer h2, #footer h3, #footer h4, #footer h5, #footer h6 { + color: #ffffff; + } + + #footer blockquote { + border-left-color: #ffffff; + } + + #footer code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #footer hr { + border-bottom-color: #ffffff; + } + + #footer input[type="submit"], + #footer input[type="reset"], + #footer input[type="button"], + #footer button, + #footer .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px #ffffff; + color: #ffffff !important; + } + + #footer input[type="submit"]:hover, + #footer input[type="reset"]:hover, + #footer input[type="button"]:hover, + #footer button:hover, + #footer .button:hover { + background-color: rgba(255, 255, 255, 0.075); + } + + #footer input[type="submit"]:hover:active, + #footer input[type="reset"]:hover:active, + #footer input[type="button"]:hover:active, + #footer button:hover:active, + #footer .button:hover:active { + background-color: rgba(255, 255, 255, 0.15); + } + + #footer input[type="submit"].disabled, #footer input[type="submit"]:disabled, + #footer input[type="reset"].disabled, + #footer input[type="reset"]:disabled, + #footer input[type="button"].disabled, + #footer input[type="button"]:disabled, + #footer button.disabled, + #footer button:disabled, + #footer .button.disabled, + #footer .button:disabled { + background-color: #ffffff; + } + + #footer input[type="submit"].primary, + #footer input[type="reset"].primary, + #footer input[type="button"].primary, + #footer button.primary, + #footer .button.primary { + box-shadow: none; + background-color: #db6172; + color: #ffffff !important; + } + + #footer input[type="submit"].primary:hover, + #footer input[type="reset"].primary:hover, + #footer input[type="button"].primary:hover, + #footer button.primary:hover, + #footer .button.primary:hover { + background-color: #e07685; + } + + #footer input[type="submit"].primary:hover:active, + #footer input[type="reset"].primary:hover:active, + #footer input[type="button"].primary:hover:active, + #footer button.primary:hover:active, + #footer .button.primary:hover:active { + background-color: #d64c5f; + } + + #footer a { + color: inherit; + } + + #footer .contact { + list-style: none; + padding: 0; + } + + #footer .contact li { + display: inline-block; + padding: 0; + } + + #footer .contact li:before { + content: '\2022'; + margin: 0 0.75em; + } + + #footer .contact li:first-child:before { + display: none; + } + + #footer .links { + list-style: none; + padding: 0; + } + + #footer .links li { + border-left: solid 1px; + display: inline-block; + line-height: 1; + margin: 0 0 0 1.5em; + padding: 0 0 0 1.5em; + } + + #footer .links li:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + #footer .links li a { + font-size: 0.8em; + letter-spacing: 0.25em; + text-decoration: none; + text-transform: uppercase; + } + + #footer > .inner { + display: -moz-flex; + display: -webkit-flex; + display: -ms-flex; + display: flex; + -moz-flex-wrap: wrap; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + margin: 0 auto; + width: 75em; + } + + #footer > .inner > * { + font-size: 0.8em; + width: 50%; + } + + #footer > .inner .icons { + -moz-order: 2; + -webkit-order: 2; + -ms-order: 2; + order: 2; + text-align: right; + } + + #footer > .inner .contact { + -moz-order: 4; + -webkit-order: 4; + -ms-order: 4; + order: 4; + text-align: right; + } + + #footer > .inner .links { + -moz-order: 1; + -webkit-order: 1; + -ms-order: 1; + order: 1; + } + + #footer > .inner .copyright { + -moz-order: 3; + -webkit-order: 3; + -ms-order: 3; + order: 3; + } + + @media screen and (max-width: 1680px) { + + #footer { + padding: 5em 0 3em 0 ; + } + + } + + @media screen and (max-width: 1280px) { + + #footer { + background: #303639; + } + + #footer > .inner { + width: 100%; + padding: 0 3em; + } + + } + + @media screen and (max-width: 980px) { + + #footer > .inner { + display: block; + } + + #footer > .inner > * { + width: 100%; + font-size: 1em; + text-align: center !important; + } + + } + + @media screen and (max-width: 736px) { + + #footer { + padding: 3em 0 1em 0 ; + } + + #footer > .inner { + width: 100%; + padding: 0 1.5em; + } + + #footer > .inner > * { + font-size: 0.8em; + } + + } + + @media screen and (max-width: 480px) { + + #footer .contact { + list-style: none; + } + + #footer .contact li { + display: block; + padding: 0; + } + + #footer .contact li:before { + display: none; + } + + #footer .links li { + margin: 0 0 0 0.75em; + padding: 0 0 0 0.75em; + } + + } + +/* Main */ + + #main { + background: #ffffff; + border-bottom: solid 1px #eaeaea; + } + + #main > header { + background-color: #303639; + color: #ffffff; + background-image: -moz-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -webkit-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: -ms-linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-image: linear-gradient(to top, rgba(48, 54, 57, 0.2), rgba(48, 54, 57, 0.2)), url("../../images/banner.jpg"); + background-attachment: fixed; + background-position: center; + background-size: cover; + padding: 7em 0; + position: relative; + text-align: center; + top: -7em; + } + + #main > header input, #main > header select, #main > header textarea { + color: #ffffff; + } + + #main > header a { + color: #db6172; + } + + #main > header strong, #main > header b { + color: #ffffff; + } + + #main > header h1, #main > header h2, #main > header h3, #main > header h4, #main > header h5, #main > header h6 { + color: #ffffff; + } + + #main > header blockquote { + border-left-color: #ffffff; + } + + #main > header code { + background: rgba(255, 255, 255, 0.075); + border-color: #ffffff; + } + + #main > header hr { + border-bottom-color: #ffffff; + } + + #main > header h2 { + font-size: 2.75em; + line-height: 1.3; + margin-bottom: 0; + } + + #main > header p { + margin: 1em 0 0 0; + } + + @media screen and (max-width: 1680px) { + + #main > header { + top: -5em; + } + + } + + @media screen and (max-width: 1280px) { + + #main > header { + background-attachment: scroll; + padding: 6em 3em; + } + + } + + @media screen and (max-width: 980px) { + + #main > header { + padding: 8em 3em; + } + + } + + @media screen and (max-width: 736px) { + + #main > header { + padding: 5em 1.5em; + top: -3em; + } + + #main > header h2 { + font-size: 1.75em; + } + + #main > header p { + font-size: 1em; + } + + } \ No newline at end of file diff --git a/assets/js/breakpoints.min.js b/assets/js/breakpoints.min.js new file mode 100644 index 0000000..32419cc --- /dev/null +++ b/assets/js/breakpoints.min.js @@ -0,0 +1,2 @@ +/* breakpoints.js v1.0 | @ajlkn | MIT licensed */ +var breakpoints=function(){"use strict";function e(e){t.init(e)}var t={list:null,media:{},events:[],init:function(e){t.list=e,window.addEventListener("resize",t.poll),window.addEventListener("orientationchange",t.poll),window.addEventListener("load",t.poll),window.addEventListener("fullscreenchange",t.poll)},active:function(e){var n,a,s,i,r,d,c;if(!(e in t.media)){if(">="==e.substr(0,2)?(a="gte",n=e.substr(2)):"<="==e.substr(0,2)?(a="lte",n=e.substr(2)):">"==e.substr(0,1)?(a="gt",n=e.substr(1)):"<"==e.substr(0,1)?(a="lt",n=e.substr(1)):"!"==e.substr(0,1)?(a="not",n=e.substr(1)):(a="eq",n=e),n&&n in t.list)if(i=t.list[n],Array.isArray(i)){if(r=parseInt(i[0]),d=parseInt(i[1]),isNaN(r)){if(isNaN(d))return;c=i[1].substr(String(d).length)}else c=i[0].substr(String(r).length);if(isNaN(r))switch(a){case"gte":s="screen";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: -1px)";break;case"not":s="screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (max-width: "+d+c+")"}else if(isNaN(d))switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen";break;case"gt":s="screen and (max-width: -1px)";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+")";break;default:s="screen and (min-width: "+r+c+")"}else switch(a){case"gte":s="screen and (min-width: "+r+c+")";break;case"lte":s="screen and (max-width: "+d+c+")";break;case"gt":s="screen and (min-width: "+(d+1)+c+")";break;case"lt":s="screen and (max-width: "+(r-1)+c+")";break;case"not":s="screen and (max-width: "+(r-1)+c+"), screen and (min-width: "+(d+1)+c+")";break;default:s="screen and (min-width: "+r+c+") and (max-width: "+d+c+")"}}else s="("==i.charAt(0)?"screen and "+i:i;t.media[e]=!!s&&s}return t.media[e]!==!1&&window.matchMedia(t.media[e]).matches},on:function(e,n){t.events.push({query:e,handler:n,state:!1}),t.active(e)&&n()},poll:function(){var e,n;for(e=0;e0:!!("ontouchstart"in window),e.mobile="wp"==e.os||"android"==e.os||"ios"==e.os||"bb"==e.os}};return e.init(),e}();!function(e,n){"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?module.exports=n():e.browser=n()}(this,function(){return browser}); diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js new file mode 100644 index 0000000..a1c07fd --- /dev/null +++ b/assets/js/jquery.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.4.1 | (c) JS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],E=C.document,r=Object.getPrototypeOf,s=t.slice,g=t.concat,u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.4.1",k=function(e,t){return new k.fn.init(e,t)},p=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;function d(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp($),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+$),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\([\\da-f]{1,6}"+M+"?|("+M+")|.)","ig"),ne=function(e,t,n){var r="0x"+t-65536;return r!=r||n?t:r<0?String.fromCharCode(r+65536):String.fromCharCode(r>>10|55296,1023&r|56320)},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(m.childNodes),m.childNodes),t[m.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&((e?e.ownerDocument||e:m)!==C&&T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!A[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&U.test(t)){(s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=k),o=(l=h(t)).length;while(o--)l[o]="#"+s+" "+xe(l[o]);c=l.join(","),f=ee.test(t)&&ye(e.parentNode)||e}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){A(t,!0)}finally{s===k&&e.removeAttribute("id")}}}return g(t.replace(B,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[k]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:m;return r!==C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),m!==C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=k,!C.getElementsByName||!C.getElementsByName(k).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+k+"-]").length||v.push("~="),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+k+"+*").length||v.push(".#.+[+~]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",$)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)===(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e===C||e.ownerDocument===m&&y(m,e)?-1:t===C||t.ownerDocument===m&&y(m,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e===C?-1:t===C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]===m?-1:s[r]===m?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if((e.ownerDocument||e)!==C&&T(e),d.matchesSelector&&E&&!A[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){A(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=p[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&p(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?k.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?k.grep(e,function(e){return e===n!==r}):"string"!=typeof n?k.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(k.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||q,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:L.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof k?t[0]:t,k.merge(this,k.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),D.test(r[1])&&k.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(k):k.makeArray(e,this)}).prototype=k.fn,q=k(E);var H=/^(?:parents|prev(?:Until|All))/,O={children:!0,contents:!0,next:!0,prev:!0};function P(e,t){while((e=e[t])&&1!==e.nodeType);return e}k.fn.extend({has:function(e){var t=k(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i,ge={option:[1,""],thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?k.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;nx",y.noCloneChecked=!!me.cloneNode(!0).lastChild.defaultValue;var Te=/^key/,Ce=/^(?:mouse|pointer|contextmenu|drag|drop)|click/,Ee=/^([^.]*)(?:\.(.+)|)/;function ke(){return!0}function Se(){return!1}function Ne(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ae(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ae(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Se;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return k().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=k.guid++)),e.each(function(){k.event.add(this,t,i,r,n)})}function De(e,i,o){o?(Q.set(e,i,!1),k.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Q.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(k.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Q.set(this,i,r),t=o(this,i),this[i](),r!==(n=Q.get(this,i))||t?Q.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n.value}else r.length&&(Q.set(this,i,{value:k.event.trigger(k.extend(r[0],k.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Q.get(e,i)&&k.event.add(e,i,ke)}k.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.get(t);if(v){n.handler&&(n=(o=n).handler,i=o.selector),i&&k.find.matchesSelector(ie,i),n.guid||(n.guid=k.guid++),(u=v.events)||(u=v.events={}),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof k&&k.event.triggered!==e.type?k.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(R)||[""]).length;while(l--)d=g=(s=Ee.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=k.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=k.event.special[d]||{},c=k.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&k.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),k.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Q.hasData(e)&&Q.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(R)||[""]).length;while(l--)if(d=g=(s=Ee.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=k.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||k.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)k.event.remove(e,d+t[l],n,r,!0);k.isEmptyObject(u)&&Q.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=k.event.fix(e),u=new Array(arguments.length),l=(Q.get(this,"events")||{})[s.type]||[],c=k.event.special[s.type]||{};for(u[0]=s,t=1;t\x20\t\r\n\f]*)[^>]*)\/>/gi,qe=/\s*$/g;function Oe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&k(e).children("tbody")[0]||e}function Pe(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function Re(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Me(e,t){var n,r,i,o,a,s,u,l;if(1===t.nodeType){if(Q.hasData(e)&&(o=Q.access(e),a=Q.set(t,o),l=o.events))for(i in delete a.handle,a.events={},l)for(n=0,r=l[i].length;n")},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=oe(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||k.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Vt,Gt=[],Yt=/(=)\?(?=&|$)|\?\?/;k.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Gt.pop()||k.expando+"_"+kt++;return this[e]=!0,e}}),k.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Yt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Yt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Yt,"$1"+r):!1!==e.jsonp&&(e.url+=(St.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||k.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?k(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Gt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Vt=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Vt.childNodes.length),k.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=D.exec(e))?[t.createElement(i[1])]:(i=we([e],t,o),o&&o.length&&k(o).remove(),k.merge([],i.childNodes)));var r,i,o},k.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(k.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},k.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){k.fn[t]=function(e){return this.on(t,e)}}),k.expr.pseudos.animated=function(t){return k.grep(k.timers,function(e){return t===e.elem}).length},k.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=k.css(e,"position"),c=k(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=k.css(e,"top"),u=k.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,k.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},k.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){k.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===k.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===k.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=k(e).offset()).top+=k.css(e,"borderTopWidth",!0),i.left+=k.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-k.css(r,"marginTop",!0),left:t.left-i.left-k.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===k.css(e,"position"))e=e.offsetParent;return e||ie})}}),k.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;k.fn[t]=function(e){return _(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),k.each(["top","left"],function(e,n){k.cssHooks[n]=ze(y.pixelPosition,function(e,t){if(t)return t=_e(e,n),$e.test(t)?k(e).position()[n]+"px":t})}),k.each({Height:"height",Width:"width"},function(a,s){k.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){k.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return _(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?k.css(e,t,i):k.style(e,t,n,i)},s,n?e:void 0,n)}})}),k.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){k.fn[n]=function(e,t){return 01){for(var r=0;r=i&&o>=t};break;case"bottom":h=function(t,e,n,i,o){return n>=i&&o>=n};break;case"middle":h=function(t,e,n,i,o){return e>=i&&o>=e};break;case"top-only":h=function(t,e,n,i,o){return i>=t&&n>=i};break;case"bottom-only":h=function(t,e,n,i,o){return n>=o&&o>=t};break;default:case"default":h=function(t,e,n,i,o){return n>=i&&o>=t}}return c=function(t){var i,o,l,s,r,a,u=this.state,h=!1,c=this.$element.offset();i=n.height(),o=t+i/2,l=t+i,s=this.$element.outerHeight(),r=c.top+e(this.options.top,s,i),a=c.top+s-e(this.options.bottom,s,i),h=this.test(t,o,l,r,a),h!=u&&(this.state=h,h?this.options.enter&&this.options.enter.apply(this.element):this.options.leave&&this.options.leave.apply(this.element)),this.options.scroll&&this.options.scroll.apply(this.element,[(o-r)/(a-r)])},p={id:a,options:u,test:h,handler:c,state:null,element:this,$element:s,timeoutId:null},o[a]=p,s.data("_scrollexId",p.id),p.options.initialize&&p.options.initialize.apply(this),s},jQuery.fn.unscrollex=function(){var e=t(this);if(0==this.length)return e;if(this.length>1){for(var n=0;n 0 + && $header.hasClass('alt')) { + + $window.on('resize', function() { $window.trigger('scroll'); }); + + $banner.scrollex({ + bottom: $header.outerHeight(), + terminate: function() { $header.removeClass('alt'); }, + enter: function() { $header.addClass('alt'); }, + leave: function() { $header.removeClass('alt'); $header.addClass('reveal'); } + }); + + } + + // Menu. + $('#menu') + .append('') + .appendTo($body) + .panel({ + delay: 500, + hideOnClick: true, + hideOnSwipe: true, + resetScroll: true, + resetForms: true, + side: 'right' + }); + +})(jQuery); \ No newline at end of file diff --git a/assets/js/util.js b/assets/js/util.js new file mode 100644 index 0000000..bdb8e9f --- /dev/null +++ b/assets/js/util.js @@ -0,0 +1,587 @@ +(function($) { + + /** + * Generate an indented list of links from a nav. Meant for use with panel(). + * @return {jQuery} jQuery object. + */ + $.fn.navList = function() { + + var $this = $(this); + $a = $this.find('a'), + b = []; + + $a.each(function() { + + var $this = $(this), + indent = Math.max(0, $this.parents('li').length - 1), + href = $this.attr('href'), + target = $this.attr('target'); + + b.push( + '' + + '' + + $this.text() + + '' + ); + + }); + + return b.join(''); + + }; + + /** + * Panel-ify an element. + * @param {object} userConfig User config. + * @return {jQuery} jQuery object. + */ + $.fn.panel = function(userConfig) { + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).panel(userConfig); + + return $this; + + } + + // Vars. + var $this = $(this), + $body = $('body'), + $window = $(window), + id = $this.attr('id'), + config; + + // Config. + config = $.extend({ + + // Delay. + delay: 0, + + // Hide panel on link click. + hideOnClick: false, + + // Hide panel on escape keypress. + hideOnEscape: false, + + // Hide panel on swipe. + hideOnSwipe: false, + + // Reset scroll position on hide. + resetScroll: false, + + // Reset forms on hide. + resetForms: false, + + // Side of viewport the panel will appear. + side: null, + + // Target element for "class". + target: $this, + + // Class to toggle. + visibleClass: 'visible' + + }, userConfig); + + // Expand "target" if it's not a jQuery object already. + if (typeof config.target != 'jQuery') + config.target = $(config.target); + + // Panel. + + // Methods. + $this._hide = function(event) { + + // Already hidden? Bail. + if (!config.target.hasClass(config.visibleClass)) + return; + + // If an event was provided, cancel it. + if (event) { + + event.preventDefault(); + event.stopPropagation(); + + } + + // Hide. + config.target.removeClass(config.visibleClass); + + // Post-hide stuff. + window.setTimeout(function() { + + // Reset scroll position. + if (config.resetScroll) + $this.scrollTop(0); + + // Reset forms. + if (config.resetForms) + $this.find('form').each(function() { + this.reset(); + }); + + }, config.delay); + + }; + + // Vendor fixes. + $this + .css('-ms-overflow-style', '-ms-autohiding-scrollbar') + .css('-webkit-overflow-scrolling', 'touch'); + + // Hide on click. + if (config.hideOnClick) { + + $this.find('a') + .css('-webkit-tap-highlight-color', 'rgba(0,0,0,0)'); + + $this + .on('click', 'a', function(event) { + + var $a = $(this), + href = $a.attr('href'), + target = $a.attr('target'); + + if (!href || href == '#' || href == '' || href == '#' + id) + return; + + // Cancel original event. + event.preventDefault(); + event.stopPropagation(); + + // Hide panel. + $this._hide(); + + // Redirect to href. + window.setTimeout(function() { + + if (target == '_blank') + window.open(href); + else + window.location.href = href; + + }, config.delay + 10); + + }); + + } + + // Event: Touch stuff. + $this.on('touchstart', function(event) { + + $this.touchPosX = event.originalEvent.touches[0].pageX; + $this.touchPosY = event.originalEvent.touches[0].pageY; + + }) + + $this.on('touchmove', function(event) { + + if ($this.touchPosX === null + || $this.touchPosY === null) + return; + + var diffX = $this.touchPosX - event.originalEvent.touches[0].pageX, + diffY = $this.touchPosY - event.originalEvent.touches[0].pageY, + th = $this.outerHeight(), + ts = ($this.get(0).scrollHeight - $this.scrollTop()); + + // Hide on swipe? + if (config.hideOnSwipe) { + + var result = false, + boundary = 20, + delta = 50; + + switch (config.side) { + + case 'left': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX > delta); + break; + + case 'right': + result = (diffY < boundary && diffY > (-1 * boundary)) && (diffX < (-1 * delta)); + break; + + case 'top': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY > delta); + break; + + case 'bottom': + result = (diffX < boundary && diffX > (-1 * boundary)) && (diffY < (-1 * delta)); + break; + + default: + break; + + } + + if (result) { + + $this.touchPosX = null; + $this.touchPosY = null; + $this._hide(); + + return false; + + } + + } + + // Prevent vertical scrolling past the top or bottom. + if (($this.scrollTop() < 0 && diffY < 0) + || (ts > (th - 2) && ts < (th + 2) && diffY > 0)) { + + event.preventDefault(); + event.stopPropagation(); + + } + + }); + + // Event: Prevent certain events inside the panel from bubbling. + $this.on('click touchend touchstart touchmove', function(event) { + event.stopPropagation(); + }); + + // Event: Hide panel if a child anchor tag pointing to its ID is clicked. + $this.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.removeClass(config.visibleClass); + + }); + + // Body. + + // Event: Hide panel on body click/tap. + $body.on('click touchend', function(event) { + $this._hide(event); + }); + + // Event: Toggle. + $body.on('click', 'a[href="#' + id + '"]', function(event) { + + event.preventDefault(); + event.stopPropagation(); + + config.target.toggleClass(config.visibleClass); + + }); + + // Window. + + // Event: Hide on ESC. + if (config.hideOnEscape) + $window.on('keydown', function(event) { + + if (event.keyCode == 27) + $this._hide(event); + + }); + + return $this; + + }; + + /** + * Apply "placeholder" attribute polyfill to one or more forms. + * @return {jQuery} jQuery object. + */ + $.fn.placeholder = function() { + + // Browser natively supports placeholders? Bail. + if (typeof (document.createElement('input')).placeholder != 'undefined') + return $(this); + + // No elements? + if (this.length == 0) + return $this; + + // Multiple elements? + if (this.length > 1) { + + for (var i=0; i < this.length; i++) + $(this[i]).placeholder(); + + return $this; + + } + + // Vars. + var $this = $(this); + + // Text, TextArea. + $this.find('input[type=text],textarea') + .each(function() { + + var i = $(this); + + if (i.val() == '' + || i.val() == i.attr('placeholder')) + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('blur', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == '') + i + .addClass('polyfill-placeholder') + .val(i.attr('placeholder')); + + }) + .on('focus', function() { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + return; + + if (i.val() == i.attr('placeholder')) + i + .removeClass('polyfill-placeholder') + .val(''); + + }); + + // Password. + $this.find('input[type=password]') + .each(function() { + + var i = $(this); + var x = $( + $('
') + .append(i.clone()) + .remove() + .html() + .replace(/type="password"/i, 'type="text"') + .replace(/type=password/i, 'type=text') + ); + + if (i.attr('id') != '') + x.attr('id', i.attr('id') + '-polyfill-field'); + + if (i.attr('name') != '') + x.attr('name', i.attr('name') + '-polyfill-field'); + + x.addClass('polyfill-placeholder') + .val(x.attr('placeholder')).insertAfter(i); + + if (i.val() == '') + i.hide(); + else + x.hide(); + + i + .on('blur', function(event) { + + event.preventDefault(); + + var x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + + i.hide(); + x.show(); + + } + + }); + + x + .on('focus', function(event) { + + event.preventDefault(); + + var i = x.parent().find('input[name=' + x.attr('name').replace('-polyfill-field', '') + ']'); + + x.hide(); + + i + .show() + .focus(); + + }) + .on('keypress', function(event) { + + event.preventDefault(); + x.val(''); + + }); + + }); + + // Events. + $this + .on('submit', function() { + + $this.find('input[type=text],input[type=password],textarea') + .each(function(event) { + + var i = $(this); + + if (i.attr('name').match(/-polyfill-field$/)) + i.attr('name', ''); + + if (i.val() == i.attr('placeholder')) { + + i.removeClass('polyfill-placeholder'); + i.val(''); + + } + + }); + + }) + .on('reset', function(event) { + + event.preventDefault(); + + $this.find('select') + .val($('option:first').val()); + + $this.find('input,textarea') + .each(function() { + + var i = $(this), + x; + + i.removeClass('polyfill-placeholder'); + + switch (this.type) { + + case 'submit': + case 'reset': + break; + + case 'password': + i.val(i.attr('defaultValue')); + + x = i.parent().find('input[name=' + i.attr('name') + '-polyfill-field]'); + + if (i.val() == '') { + i.hide(); + x.show(); + } + else { + i.show(); + x.hide(); + } + + break; + + case 'checkbox': + case 'radio': + i.attr('checked', i.attr('defaultValue')); + break; + + case 'text': + case 'textarea': + i.val(i.attr('defaultValue')); + + if (i.val() == '') { + i.addClass('polyfill-placeholder'); + i.val(i.attr('placeholder')); + } + + break; + + default: + i.val(i.attr('defaultValue')); + break; + + } + }); + + }); + + return $this; + + }; + + /** + * Moves elements to/from the first positions of their respective parents. + * @param {jQuery} $elements Elements (or selector) to move. + * @param {bool} condition If true, moves elements to the top. Otherwise, moves elements back to their original locations. + */ + $.prioritize = function($elements, condition) { + + var key = '__prioritize'; + + // Expand $elements if it's not already a jQuery object. + if (typeof $elements != 'jQuery') + $elements = $($elements); + + // Step through elements. + $elements.each(function() { + + var $e = $(this), $p, + $parent = $e.parent(); + + // No parent? Bail. + if ($parent.length == 0) + return; + + // Not moved? Move it. + if (!$e.data(key)) { + + // Condition is false? Bail. + if (!condition) + return; + + // Get placeholder (which will serve as our point of reference for when this element needs to move back). + $p = $e.prev(); + + // Couldn't find anything? Means this element's already at the top, so bail. + if ($p.length == 0) + return; + + // Move element to top of parent. + $e.prependTo($parent); + + // Mark element as moved. + $e.data(key, $p); + + } + + // Moved already? + else { + + // Condition is true? Bail. + if (condition) + return; + + $p = $e.data(key); + + // Move element back to its original location (using our placeholder). + $e.insertAfter($p); + + // Unmark element as moved. + $e.removeData(key); + + } + + }); + + }; + +})(jQuery); \ No newline at end of file diff --git a/assets/sass/base/_page.scss b/assets/sass/base/_page.scss new file mode 100644 index 0000000..5713925 --- /dev/null +++ b/assets/sass/base/_page.scss @@ -0,0 +1,46 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Basic */ + + // MSIE: Required for IEMobile. + @-ms-viewport { + width: device-width; + } + + // MSIE: Prevents scrollbar from overlapping content. + body { + -ms-overflow-style: scrollbar; + } + + // Ensures page width is always >=320px. + @include breakpoint('<=xsmall') { + html, body { + min-width: 320px; + } + } + + // Set box model to border-box. + // Based on css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + html { + box-sizing: border-box; + } + + *, *:before, *:after { + box-sizing: inherit; + } + + body { + + // Stops initial animations until page loads. + &.is-preload { + *, *:before, *:after { + @include vendor('animation', 'none !important'); + @include vendor('transition', 'none !important'); + } + } + + } \ No newline at end of file diff --git a/assets/sass/base/_reset.scss b/assets/sass/base/_reset.scss new file mode 100644 index 0000000..e4d14c9 --- /dev/null +++ b/assets/sass/base/_reset.scss @@ -0,0 +1,76 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +// Reset. +// Based on meyerweb.com/eric/tools/css/reset (v2.0 | 20110126 | License: public domain) + + html, body, div, span, applet, object, + iframe, h1, h2, h3, h4, h5, h6, p, blockquote, + pre, a, abbr, acronym, address, big, cite, + code, del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, b, + u, i, center, dl, dt, dd, ol, ul, li, fieldset, + form, label, legend, table, caption, tbody, + tfoot, thead, tr, th, td, article, aside, + canvas, details, embed, figure, figcaption, + footer, header, hgroup, menu, nav, output, ruby, + section, summary, time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; + } + + body { + line-height: 1; + } + + ol, ul { + list-style: none; + } + + blockquote, q { + quotes: none; + + &:before, + &:after { + content: ''; + content: none; + } + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + body { + -webkit-text-size-adjust: none; + } + + mark { + background-color: transparent; + color: inherit; + } + + input::-moz-focus-inner { + border: 0; + padding: 0; + } + + input, select, textarea { + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + appearance: none; + } \ No newline at end of file diff --git a/assets/sass/base/_typography.scss b/assets/sass/base/_typography.scss new file mode 100644 index 0000000..072b2cb --- /dev/null +++ b/assets/sass/base/_typography.scss @@ -0,0 +1,206 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Type */ + + body { + background-color: _palette(bg-alt); + color: _palette(fg); + } + + body, input, select, textarea { + font-family: _font(family); + font-size: 14pt; + font-weight: _font(weight); + line-height: 1.65; + + @include breakpoint('<=xlarge') { + font-size: 12pt; + } + + @include breakpoint('<=large') { + font-size: 11pt; + } + } + + a { + text-decoration: underline; + + &:hover { + text-decoration: none; + } + } + + strong, b { + font-weight: _font(weight-bold); + } + + em, i { + font-style: italic; + } + + p { + margin: 0 0 _size(element-margin) 0; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: _font(weight-bold); + letter-spacing: _font(kerning-heading); + line-height: 1.5; + margin: 0 0 (_size(element-margin) * 0.4) 0; + + a { + color: inherit; + text-decoration: none; + } + } + + h2 { + font-size: 1.75em; + } + + h3 { + font-size: 1.25em; + } + + h4 { + font-size: 1em; + } + + h5 { + font-size: 0.8em; + } + + h6 { + font-size: 0.7em; + } + + @include breakpoint('<=medium') { + h1, h2, h3, h4, h5, h6 { + br { + display: none; + } + } + } + + @include breakpoint('<=small') { + h2 { + font-size: 1.25em; + } + + h3 { + font-size: 1.1em; + } + } + + sub { + font-size: 0.8em; + position: relative; + top: 0.5em; + } + + sup { + font-size: 0.8em; + position: relative; + top: -0.5em; + } + + blockquote { + border-left: solid 4px; + font-style: italic; + margin: 0 0 _size(element-margin) 0; + padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin); + } + + code { + border-radius: _size(border-radius); + border: solid 1px; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0.25em; + padding: 0.25em 0.65em; + } + + pre { + -webkit-overflow-scrolling: touch; + font-family: _font(family-fixed); + font-size: 0.9em; + margin: 0 0 _size(element-margin) 0; + + code { + display: block; + line-height: 1.75em; + padding: 1em 1.5em; + overflow-x: auto; + } + } + + hr { + border: 0; + border-bottom: solid 1px; + margin: _size(element-margin) 0; + + &.major { + margin: (_size(element-margin) * 1.5) 0; + } + } + + .align-left { + text-align: left; + } + + .align-center { + text-align: center; + } + + .align-right { + text-align: right; + } + + @mixin color-typography($p: null) { + $highlight: _palette($p, highlight); + + @if $p != null { + background-color: _palette($p, bg); + color: _palette($p, fg); + } + + input, select, textarea { + color: _palette($p, fg-bold); + } + + a { + @if $p == $highlight { + color: _palette($p, fg-bold); + } + @else { + color: _palette(accent1, bg); + } + } + + strong, b { + color: _palette($p, fg-bold); + } + + h1, h2, h3, h4, h5, h6 { + color: _palette($p, fg-bold); + } + + blockquote { + border-left-color: _palette($p, border); + } + + code { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + + hr { + border-bottom-color: _palette($p, border); + } + } + + @include color-typography; \ No newline at end of file diff --git a/assets/sass/components/_actions.scss b/assets/sass/components/_actions.scss new file mode 100644 index 0000000..60608e7 --- /dev/null +++ b/assets/sass/components/_actions.scss @@ -0,0 +1,101 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Actions */ + + ul.actions { + @include vendor('display', 'flex'); + cursor: default; + list-style: none; + margin-left: (_size(element-margin) * -0.5); + padding-left: 0; + + li { + padding: 0 0 0 (_size(element-margin) * 0.5); + vertical-align: middle; + } + + &.special { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + &.stacked { + @include vendor('flex-direction', 'column'); + margin-left: 0; + + li { + padding: (_size(element-margin) * 0.65) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + + &.fit { + width: calc(100% + #{_size(element-margin) * 0.5}); + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + width: 100%; + + > * { + width: 100%; + } + } + + &.stacked { + width: 100%; + } + } + + @include breakpoint('<=xsmall') { + &:not(.fixed) { + @include vendor('flex-direction', 'column'); + margin-left: 0; + width: 100% !important; + + li { + @include vendor('flex-grow', '1'); + @include vendor('flex-shrink', '1'); + padding: (_size(element-margin) * 0.5) 0 0 0; + text-align: center; + width: 100%; + + > * { + width: 100%; + } + + &:first-child { + padding-top: 0; + } + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + width: 100%; + + &.icon { + &:before { + margin-left: -0.5em; + } + } + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_box.scss b/assets/sass/components/_box.scss new file mode 100644 index 0000000..75e7d06 --- /dev/null +++ b/assets/sass/components/_box.scss @@ -0,0 +1,34 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid 1px; + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } + + @mixin color-box($p: null) { + .box { + border-color: _palette($p, border); + } + } + + @include color-box; \ No newline at end of file diff --git a/assets/sass/components/_button.scss b/assets/sass/components/_button.scss new file mode 100644 index 0000000..8ba394b --- /dev/null +++ b/assets/sass/components/_button.scss @@ -0,0 +1,104 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', 'background-color #{_duration(transition)} ease-in-out, color #{_duration(transition)} ease-in-out'); + border-radius: _size(border-radius); + border: 0; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 4.1em; + letter-spacing: _font(kerning-alt); + line-height: 4.25em; + padding: 0 3em; + text-align: center; + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + width: 100%; + } + + &.small { + font-size: 0.8em; + } + + &.major { + min-width: 20em; + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.35; + } + } + + @mixin color-button($p: null) { + $highlight: _palette($p, highlight); + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + background-color: transparent; + box-shadow: inset 0 0 0 1px _palette($p, border); + color: _palette($p, fg-bold) !important; + + &:hover { + background-color: _palette($p, border-bg); + + &:active { + background-color: _palette($p, border-bg-alt); + } + } + + &.disabled, + &:disabled { + background-color: _palette($p, border); + } + + &.primary { + box-shadow: none; + + @if $p == $highlight { + background-color: _palette($p, fg-bold); + color: _palette($p, bg) !important; + } + @else { + background-color: _palette($highlight, bg); + color: _palette($highlight, fg-bold) !important; + + &:hover { + background-color: lighten(_palette($highlight, bg), 5); + + &:active { + background-color: darken(_palette($highlight, bg), 5); + } + } + } + } + } + } + + @include color-button; \ No newline at end of file diff --git a/assets/sass/components/_features.scss b/assets/sass/components/_features.scss new file mode 100644 index 0000000..caec303 --- /dev/null +++ b/assets/sass/components/_features.scss @@ -0,0 +1,68 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Features */ + + .features { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + margin: -1em 0 _size(element-margin) -1em; + width: calc(100% + 1em); + + section { + @include padding(3em, 3em); + border-radius: _size(border-radius); + margin: 1em 0 0 1em; + text-align: center; + width: calc(33.33333% - 1em); + } + + @include breakpoint('<=large') { + section { + @include padding(3em, 2em); + } + } + + @include breakpoint('<=medium') { + section { + width: calc(50% - 1em); + } + } + + @include breakpoint('<=small') { + section { + @include padding(3em, 1.5em); + } + } + + @include breakpoint('<=xsmall') { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + section { + margin: 0 0 1em 0; + width: 100%; + } + } + } + + @mixin color-features($p: null) { + .features { + section { + @if $p == null { + background-color: _palette(bg); + border-bottom: solid 1px darken(_palette(bg-alt), 5); + } + @else { + background-color: mix(_palette($p, bg), _palette($p, fg-bold), 90%); + border-bottom: none; + } + } + } + } + + @include color-features; \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss new file mode 100644 index 0000000..13273e0 --- /dev/null +++ b/assets/sass/components/_form.scss @@ -0,0 +1,242 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Form */ + + form { + margin: 0 0 _size(element-margin) 0; + } + + label { + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + @include vendor('appearance', 'none'); + border-radius: _size(border-radius); + border: solid 1px; + color: inherit; + display: block; + outline: 0; + padding: 0 1em; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + } + + select { + background-size: 1.25rem; + background-repeat: no-repeat; + background-position: calc(100% - 1rem) center; + height: _size(element-height); + padding-right: _size(element-height); + text-overflow: ellipsis; + + &:focus { + &::-ms-value { + background-color: transparent; + } + } + + &::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0.75em 1em; + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon(false, solid); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + border-radius: _size(border-radius); + border: solid 1px; + content: ''; + display: inline-block; + font-size: 0.8em; + height: (_size(element-height) * 0.75); + left: 0; + line-height: (_size(element-height) * 0.75); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.75); + } + } + + &:checked + label { + &:before { + content: '\f00c'; + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } + + ::-webkit-input-placeholder { + opacity: 1.0; + } + + :-moz-placeholder { + opacity: 1.0; + } + + ::-moz-placeholder { + opacity: 1.0; + } + + :-ms-input-placeholder { + opacity: 1.0; + } + + @mixin color-form($p: null) { + $highlight: _palette($p, highlight); + + label { + color: _palette($p, fg-bold); + } + + input[type="text"], + input[type="password"], + input[type="email"], + select, + textarea { + background-color: _palette($p, border-bg); + border-color: _palette($p, border); + + &:focus { + @if $p == $highlight { + border-color: _palette($p, fg-bold); + box-shadow: 0 0 0 1px _palette($p, fg-bold); + } + @else { + border-color: _palette(accent1, bg); + box-shadow: 0 0 0 1px _palette(accent1, bg); + } + } + } + + select { + background-image: svg-url(""); + + option { + color: _palette($p, fg-bold); + background: _palette($p, bg); + } + } + + input[type="checkbox"], + input[type="radio"], { + & + label { + color: _palette($p, fg); + + &:before { + background: _palette($p, border-bg); + border-color: _palette($p, border); + } + } + + &:checked + label { + &:before { + @if $p == $highlight { + background-color: _palette($p, fg-bold); + border-color: _palette($p, fg-bold); + color: _palette($p, bg); + } + @else { + background-color: _palette(accent1, bg); + border-color: _palette(accent1, bg); + color: _palette(accent1, fg-bold); + } + } + } + + &:focus + label { + &:before { + @if $p == $highlight { + border-color: _palette($p, fg-bold); + box-shadow: 0 0 0 1px _palette($p, fg-bold); + } + @else { + border-color: _palette(accent1, bg); + box-shadow: 0 0 0 1px _palette(accent1, bg); + } + } + } + } + + ::-webkit-input-placeholder { + color: _palette($p, fg-light) !important; + } + + :-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + ::-moz-placeholder { + color: _palette($p, fg-light) !important; + } + + :-ms-input-placeholder { + color: _palette($p, fg-light) !important; + } + + .formerize-placeholder { + color: _palette($p, fg-light) !important; + } + } + + @include color-form; \ No newline at end of file diff --git a/assets/sass/components/_icon.scss b/assets/sass/components/_icon.scss new file mode 100644 index 0000000..9be2fe8 --- /dev/null +++ b/assets/sass/components/_icon.scss @@ -0,0 +1,71 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &.solid { + &:before { + font-weight: 900; + } + } + + &.brands { + &:before { + font-family: 'Font Awesome 5 Brands'; + } + } + + &.major { + @include vendor('transform', 'rotate(45deg)'); + border-radius: _size(border-radius); + border: solid 1px; + display: block; + font-size: 1.75em; + height: 2.5em; + line-height: 2.5em; + margin: 0 auto _size(element-margin) auto; + position: relative; + text-align: center; + top: 0.5em; + width: 2.5em; + + &:before { + @include vendor('transform', 'rotate(-45deg)'); + + text-align: center; + } + } + } + + @mixin color-icon($p: null) { + $highlight: _palette($p, highlight); + + .icon { + &.major { + border-color: _palette($p, border); + + &:before { + @if $p == $highlight { + color: _palette($highlight, fg-bold); + } + @else { + color: _palette($highlight, bg); + } + } + } + } + } + + @include color-icon; \ No newline at end of file diff --git a/assets/sass/components/_icons.scss b/assets/sass/components/_icons.scss new file mode 100644 index 0000000..2769636 --- /dev/null +++ b/assets/sass/components/_icons.scss @@ -0,0 +1,28 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Icons */ + + ul.icons { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 1em 0 0; + + &:last-child { + padding-right: 0; + } + + .icon { + &:before { + font-size: 1.25em; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_image-circles.scss b/assets/sass/components/_image-circles.scss new file mode 100644 index 0000000..79ad983 --- /dev/null +++ b/assets/sass/components/_image-circles.scss @@ -0,0 +1,84 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Image Circles */ + + .image-circles { + margin: 0 0 _size(element-margin) 0; + text-align: right; + + .images { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'row'); + margin: 1em 0 0 -1em; + width: calc(100% + 1em); + + > * { + -ms-flex: 1; + display: block; + margin: 0 0 0 1em; + position: relative; + white-space: nowrap; + width: 50%; + + &:before { + border-radius: 100%; + content: ''; + display: block; + height: 100%; + margin: 0 0 0 1em; + overflow: hidden; + position: absolute; + right: 0; + top: 0; + width: calc(50% - 0.5em); + } + + img { + border-radius: 100%; + display: block; + width: calc(50% - 0.5em); + } + } + + &:first-child { + margin-top: 0; + } + + &:nth-child(2n - 1) { + > * { + @include vendor('transform', 'scaleX(-1)'); + + img { + @include vendor('transform', 'scaleX(-1)'); + } + } + } + } + + @include breakpoint('<=medium') { + width: 100%; + max-width: 30em; + } + + @include breakpoint('<=small') { + max-width: 16em; + } + } + + @mixin color-image-circles($p: null) { + .image-circles { + .images { + > * { + &:before { + box-shadow: inset 0 0 0 1px _palette($p, border); + } + } + } + } + } + + @include color-image-circles; \ No newline at end of file diff --git a/assets/sass/components/_image.scss b/assets/sass/components/_image.scss new file mode 100644 index 0000000..909cd07 --- /dev/null +++ b/assets/sass/components/_image.scss @@ -0,0 +1,70 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + margin: 0 2.5em 2em 0; + top: 0.25em; + } + + &.right { + float: right; + margin: 0 0 2em 2.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + } + + @include breakpoint('<=small') { + &.left { + margin: 0 1.5em 1em 0; + } + + &.right { + margin: 0 0 1em 1.5em; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_list.scss b/assets/sass/components/_list.scss new file mode 100644 index 0000000..84ff1f1 --- /dev/null +++ b/assets/sass/components/_list.scss @@ -0,0 +1,68 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid 1px; + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + } + + @mixin color-list($p: null) { + ul { + &.alt { + li { + border-top-color: _palette($p, border); + } + } + } + } + + @include color-list; \ No newline at end of file diff --git a/assets/sass/components/_row.scss b/assets/sass/components/_row.scss new file mode 100644 index 0000000..1e8a634 --- /dev/null +++ b/assets/sass/components/_row.scss @@ -0,0 +1,31 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Row */ + + .row { + @include html-grid(2em); + + @include breakpoint('<=xlarge') { + @include html-grid(2em, 'xlarge'); + } + + @include breakpoint('<=large') { + @include html-grid(1.5em, 'large'); + } + + @include breakpoint('<=medium') { + @include html-grid(1.5em, 'medium'); + } + + @include breakpoint('<=small') { + @include html-grid(1.25em, 'small'); + } + + @include breakpoint('<=xsmall') { + @include html-grid(1.25em, 'xsmall'); + } + } \ No newline at end of file diff --git a/assets/sass/components/_section.scss b/assets/sass/components/_section.scss new file mode 100644 index 0000000..8cde0ab --- /dev/null +++ b/assets/sass/components/_section.scss @@ -0,0 +1,58 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + position: relative; + margin: 0 0 _size(element-margin) 0; + } + + &.major { + text-align: center; + margin: 0 0 (_size(element-margin) * 1.5) 0; + + > :last-child { + margin-bottom: 0; + } + } + + @include breakpoint('<=medium') { + br { + display: none; + } + } + + @include breakpoint('<=small') { + &.major { + margin: 0 0 _size(element-margin) 0; + } + } + } + + footer { + &.major { + text-align: center; + margin: (_size(element-margin) * 1.5) 0 _size(element-margin) 0; + + > :last-child { + margin-bottom: 0; + } + } + + @include breakpoint('<=small') { + &.major { + margin: _size(element-margin) 0 _size(element-margin) 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/components/_spotlights.scss b/assets/sass/components/_spotlights.scss new file mode 100644 index 0000000..6e76523 --- /dev/null +++ b/assets/sass/components/_spotlights.scss @@ -0,0 +1,114 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Spotlights */ + + .spotlights { + margin: 0 0 _size(element-margin) 0; + + section { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('flex-direction', 'row'); + border-top: solid 1px; + margin-top: _size(section-spacing) * 0.85; + padding-top: _size(section-spacing) * 0.85; + + .image { + position: relative; + width: 35%; + + img { + display: block; + width: 100%; + } + } + + .content { + -ms-flex: 1; + margin: 0 0 0 _size(section-spacing); + width: 65%; + + > :last-child { + margin-bottom: 0; + } + } + + &:first-child { + border-top: 0; + margin-top: 0; + padding-top: 0; + } + + &:nth-child(2n) { + @include vendor('flex-direction', 'row-reverse'); + + .content { + margin: 0 _size(section-spacing) 0 0; + } + } + } + + @include breakpoint('<=medium') { + section { + $section-spacing: _size(section-spacing) * 0.75; + + @include vendor('align-items', 'flex-start'); + + .image { + top: 0.35em; + width: 40%; + } + + .content { + margin: 0 0 0 $section-spacing; + width: 60%; + } + + &:nth-child(2n) { + .content { + margin: 0 $section-spacing 0 0; + } + } + } + } + + @include breakpoint('<=small') { + section { + margin-top: _size(element-margin); + padding-top: _size(element-margin); + } + } + + @include breakpoint('<=xsmall') { + section { + display: block; + + .image { + display: block; + top: 0; + width: 100%; + margin: 0 0 _size(element-margin) 0; + } + + .content { + margin: 0; + width: 100%; + text-align: center; + } + } + } + } + + @mixin color-spotlights($p: null) { + .spotlights { + section { + border-top-color: _palette($p, border); + } + } + } + + @include color-spotlights; \ No newline at end of file diff --git a/assets/sass/components/_table.scss b/assets/sass/components/_table.scss new file mode 100644 index 0000000..f65ed70 --- /dev/null +++ b/assets/sass/components/_table.scss @@ -0,0 +1,114 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid 1px; + border-left: 0; + border-right: 0; + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid 2px; + } + + tfoot { + border-top: solid 2px; + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid 1px; + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: 1px; + } + } + + &:first-child { + td { + border-top-width: 1px; + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } + + @mixin color-table($p: null) { + table { + tbody { + tr { + border-color: _palette($p, border); + + &:nth-child(2n + 1) { + background-color: _palette($p, border-bg); + } + } + } + + th { + color: _palette($p, fg-bold); + } + + thead { + border-bottom-color: _palette($p, border); + } + + tfoot { + border-top-color: _palette($p, border); + } + + &.alt { + tbody { + tr { + td { + border-color: _palette($p, border); + } + } + } + } + } + } + + @include color-table; \ No newline at end of file diff --git a/assets/sass/components/_wrapper.scss b/assets/sass/components/_wrapper.scss new file mode 100644 index 0000000..6bdd9d7 --- /dev/null +++ b/assets/sass/components/_wrapper.scss @@ -0,0 +1,112 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Wrapper */ + + .wrapper { + @include padding(7em, 0); + position: relative; + + > .inner { + margin: 0 auto; + width: _size(inner); + } + + &.style1 { + background: _palette(bg); + border-bottom: solid 1px darken(_palette(bg-alt), 5); + } + + &.style2 { + } + + &.split { + > .inner { + @include vendor('display', 'flex'); + + > * { + -ms-flex: 1; + width: 50%; + } + + > :nth-child(2n - 1) { + margin-right: (_size(section-spacing) * 0.5); + } + + > :nth-child(2n) { + margin-left: (_size(section-spacing) * 0.5); + } + } + } + + @include breakpoint('<=xlarge') { + @include padding(5em, 0); + } + + @include breakpoint('<=large') { + > .inner { + width: 100%; + padding: 0 (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=medium') { + &.split { + text-align: center; + + ul.actions { + @include vendor('justify-content', 'center'); + width: 100%; + margin-left: 0; + + li { + &:first-child { + padding-left: 0; + } + } + } + + > .inner { + @include vendor('flex-direction', 'column-reverse'); + @include vendor('align-items', 'center'); + + > * { + -ms-flex: none; + margin-bottom: _size(section-spacing); + width: 100%; + } + + > :nth-child(2n - 1) { + margin-right: 0; + } + + > :nth-child(2n) { + margin-left: 0; + } + + > :first-child { + margin-bottom: 0; + } + } + } + } + + @include breakpoint('<=small') { + @include padding(3em, 0); + + > .inner { + padding: 0 1.5em; + } + + &.split { + > .inner { + > * { + margin-bottom: _size(element-margin); + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_banner.scss b/assets/sass/layout/_banner.scss new file mode 100644 index 0000000..a11e9b9 --- /dev/null +++ b/assets/sass/layout/_banner.scss @@ -0,0 +1,176 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Banner */ + + #banner { + $overlay: transparentize(_palette(accent2, bg), 0.8); + + @include color-typography(accent2); + @include color-button(accent2); + @include padding(6em, 0, (4.5em, 0, 0, 0)); + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('background-image', ( + 'linear-gradient(to top, #{$overlay}, #{$overlay})', + 'url("../../images/banner.jpg")', + )); + background-attachment: fixed; + background-position: center; + background-size: cover; + height: 75vh; + min-height: 30em; + position: relative; + + &:after { + @include vendor('pointer-events', 'none'); + @include vendor('transition', ( + 'opacity 2s ease', + 'visibility 2s' + )); + background-color: _palette(accent2, bg); + content: ''; + height: 100%; + left: 0; + opacity: 0; + position: absolute; + top: 0; + visibility: hidden; + width: 100%; + z-index: _misc(z-index-base) + 1; + } + + .inner { + @include vendor('display', 'flex'); + @include vendor('align-items', 'center'); + max-width: _size(inner); + + h2 { + font-size: 2.75em; + margin-bottom: 0; + margin-top: -0.25em; + line-height: 1.3; + } + + p { + font-size: 1.2em; + margin: (_size(element-margin) * 0.35) 0 0 0; + } + + .content { + @include vendor('transition', ( + 'transform 1s ease-out', + 'opacity 1s ease-out' + )); + @include vendor('transform', 'translateY(0)'); + opacity: 1; + + > :last-child { + margin-bottom: 0; + } + } + + .actions { + @include vendor('transition', ( + 'transform 1s ease-out', + 'opacity 1s ease-out' + )); + @include vendor('transform', 'translateY(0)'); + opacity: 1; + + border-left: solid 1px _palette(accent2, border); + margin: 0 0 0 _size(section-spacing); + min-width: 20em; + padding: 1em 0 1em (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=large') { + background-attachment: scroll; + + .inner { + max-width: 100%; + padding: 0 (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=medium') { + .inner { + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'stretch'); + text-align: center; + + .actions { + border-left: 0; + margin: (_size(section-spacing) * 0.75) 0 0 0; + min-width: 0; + padding: 0; + } + } + } + + @include breakpoint('<=small') { + @include padding(5.5em, 0, (2em, 0, 0, 0)); + height: auto; + min-height: 0; + + .inner { + padding: 0 1.5em; + + h2 { + font-size: 1.75em; + } + + p { + font-size: 1em; + } + + .actions { + margin: _size(element-margin) 0 0 0; + } + } + } + + @include breakpoint('<=xsmall') { + min-height: 75vh; + + .inner { + -ms-flex: 1; + } + } + + body.is-preload & { + &:after { + opacity: 1; + visibility: visible; + } + + .inner { + .content { + opacity: 0; + @include vendor('transform', 'translateY(-1em)'); + } + + .actions { + opacity: 0; + @include vendor('transform', 'translateY(1em)'); + } + } + + @include breakpoint('<=medium') { + .inner { + .content { + @include vendor('transform', 'translateY(0)'); + } + + .actions { + @include vendor('transform', 'translateY(0)'); + } + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_footer.scss b/assets/sass/layout/_footer.scss new file mode 100644 index 0000000..c24819a --- /dev/null +++ b/assets/sass/layout/_footer.scss @@ -0,0 +1,161 @@ +/// +///KABI.tk +/// + +/* Footer */ + + #footer { + $overlay: transparentize(_palette(accent2, bg), 0.8); + + @include color-typography(accent2); + @include color-button(accent2); + @include padding(7em, 0); + @include vendor('background-image', ( + 'linear-gradient(to top, #{$overlay}, #{$overlay})', + 'url("../../images/banner.jpg")', + )); + background-attachment: fixed; + background-position: center; + background-size: cover; + + a { + color: inherit; + } + + .contact { + list-style: none; + padding: 0; + + li { + display: inline-block; + padding: 0; + + &:before { + content: '\2022'; + margin: 0 0.75em; + } + + &:first-child { + &:before { + display: none; + } + } + } + } + + .links { + list-style: none; + padding: 0; + + li { + border-left: solid 1px; + display: inline-block; + line-height: 1; + margin: 0 0 0 1.5em; + padding: 0 0 0 1.5em; + + &:first-child { + border-left: 0; + margin-left: 0; + padding-left: 0; + } + + a { + font-size: 0.8em; + letter-spacing: _font(kerning-alt); + text-decoration: none; + text-transform: uppercase; + } + } + } + + > .inner { + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + margin: 0 auto; + width: _size(inner); + + > * { + font-size: 0.8em; + width: 50%; + } + + .icons { + @include vendor('order', '2'); + text-align: right; + } + + .contact { + @include vendor('order', '4'); + text-align: right; + } + + .links { + @include vendor('order', '1'); + } + + .copyright { + @include vendor('order', '3'); + } + } + + @include breakpoint('<=xlarge') { + @include padding(5em, 0); + } + + @include breakpoint('<=large') { + background: _palette(accent2, bg); + + > .inner { + width: 100%; + padding: 0 (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=medium') { + > .inner { + display: block; + + > * { + width: 100%; + font-size: 1em; + text-align: center !important; + } + } + } + + @include breakpoint('<=small') { + @include padding(3em, 0); + + > .inner { + width: 100%; + padding: 0 1.5em; + + > * { + font-size: 0.8em; + } + } + } + + @include breakpoint('<=xsmall') { + .contact { + list-style: none; + + li { + display: block; + padding: 0; + + &:before { + display: none; + } + } + } + + .links { + li { + margin: 0 0 0 0.75em; + padding: 0 0 0 0.75em; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_header.scss b/assets/sass/layout/_header.scss new file mode 100644 index 0000000..f34fbcf --- /dev/null +++ b/assets/sass/layout/_header.scss @@ -0,0 +1,177 @@ +/// +/// Prototype by Pixelarity +/// pixelarity.com | hello@pixelarity.com +/// License: pixelarity.com/license +/// + +/* Header */ + + body { + padding-top: 3.125em; + } + + @include keyframes('reveal-header') { + 0% { top: -4em; opacity: 0; } + 100% { top: 0; opacity: 1; } + } + + #header { + background-color: _palette(bg); + border-bottom: solid 1px _palette(border); + cursor: default; + height: 3.25em; + left: 0; + line-height: 3.25em; + position: fixed; + text-align: right; + top: 0; + width: 100%; + z-index: _misc(z-index-base) + 1; + + > h1 { + color: _palette(fg-bold); + display: inline-block; + height: inherit; + left: 1.25em; + line-height: inherit; + margin: 0; + padding: 0; + position: absolute; + top: 0; + + a { + font-size: 1.25em; + } + } + + > a { + @include vendor('transition', 'color #{_duration(transition)} ease-in-out'); + color: inherit; + display: inline-block; + font-size: 0.8em; + letter-spacing: _font(kerning-alt); + padding: 0 0.75em; + text-decoration: none; + text-transform: uppercase; + + &[href="#menu"] { + @include icon(false, solid); + -webkit-tap-highlight-color: rgba(0,0,0,0); + + &:before { + content: '\f0c9'; + float: right; + line-height: inherit; + margin: 0 0 0 0.75em; + } + } + + & + a[href="#menu"]:last-child { + border-left: solid 1px _palette(border); + padding-left: 2em; + margin-left: 1em; + } + + &:last-child { + padding-right: 1.25em; + } + + @include breakpoint('<=small') { + padding: 0 0.5em; + + & + a[href="#menu"]:last-child { + margin-left: 0.25em; + padding-left: 1em; + } + + &:last-child { + padding-right: 1em; + } + } + } + + & + #banner { + margin-top: -3.125em; + } + + &.reveal { + @include vendor('animation', 'reveal-header 0.5s ease'); + } + + &.alt { + @include vendor('animation', 'none'); + background-color: transparent; + box-shadow: 0 1px 0 0 _palette(accent2, border); + color: _palette(accent2, fg); + position: absolute; + top: (_size(section-spacing) - 1em); + left: _size(section-spacing); + width: calc(100% - #{_size(section-spacing) * 2}); + + > h1 { + color: _palette(accent2, fg-bold); + left: 0; + } + + > a { + & + a[href="#menu"]:last-child { + border-left-color: _palette(accent2, border); + } + + &:last-child { + padding-right: 0; + } + } + } + } + + @include breakpoint('<=large') { + #header { + &.alt { + $section-spacing: _size(section-spacing) * 0.75; + + top: ($section-spacing - 1em); + left: $section-spacing; + width: calc(100% - #{$section-spacing * 2}); + } + } + } + + @include breakpoint('<=medium') { + body { + padding-top: 44px; + } + + #header { + height: 44px; + line-height: 44px; + + > h1 { + left: 1em; + + a { + font-size: 1em; + } + } + } + } + + @include breakpoint('<=small') { + #header { + &.alt { + top: 0.25em; + left: 1.5em; + width: calc(100% - 3em); + } + } + } + + @include breakpoint('<=xsmall') { + #header { + min-width: 320px; + + &.alt { + min-width: 0; + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_main.scss b/assets/sass/layout/_main.scss new file mode 100644 index 0000000..829b837 --- /dev/null +++ b/assets/sass/layout/_main.scss @@ -0,0 +1,71 @@ +/// +/// KABI.tk +/// + +/* Main */ + + #main { + background: _palette(bg); + border-bottom: solid 1px darken(_palette(bg-alt), 5); + + > header { + $overlay: transparentize(_palette(accent2, bg), 0.8); + + @include color-typography(accent2); + @include vendor('background-image', ( + 'linear-gradient(to top, #{$overlay}, #{$overlay})', + 'url("../../images/banner.jpg")', + )); + background-attachment: fixed; + background-position: center; + background-size: cover; + padding: 7em 0; + position: relative; + text-align: center; + top: -7em; + + h2 { + font-size: 2.75em; + line-height: 1.3; + margin-bottom: 0; + } + + p { + margin: (_size(element-margin) * 0.5) 0 0 0; + } + } + + @include breakpoint('<=xlarge') { + > header { + top: -5em; + } + } + + @include breakpoint('<=large') { + > header { + background-attachment: scroll; + padding: 6em (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=medium') { + > header { + padding: 8em (_size(section-spacing) * 0.75); + } + } + + @include breakpoint('<=small') { + > header { + padding: 5em 1.5em; + top: -3em; + + h2 { + font-size: 1.75em; + } + + p { + font-size: 1em; + } + } + } + } \ No newline at end of file diff --git a/assets/sass/layout/_menu.scss b/assets/sass/layout/_menu.scss new file mode 100644 index 0000000..4827167 --- /dev/null +++ b/assets/sass/layout/_menu.scss @@ -0,0 +1,104 @@ +/// +/// KABI.tk +/// + +/* Menu */ + + #menu { + @include vendor('transform', 'translateX(20em)'); + @include vendor('transition', ('transform #{_duration(nav)} ease', 'box-shadow #{_duration(nav)} ease', 'visibility #{_duration(nav)}')); + -webkit-overflow-scrolling: touch; + background: _palette(bg); + border-left: solid 1px _palette(border); + box-shadow: none; + height: 100%; + max-width: 80%; + overflow-y: auto; + padding: 3em 2em; + position: fixed; + right: 0; + top: 0; + visibility: hidden; + width: 20em; + z-index: _misc(z-index-base) + 2; + + > ul { + margin: 0 0 (_size(element-margin) * 0.5) 0; + + &.links { + list-style: none; + padding: 0; + + > li { + padding: 0; + + > a:not(.button) { + border: 0; + border-top: solid 1px _palette(border); + color: inherit; + display: block; + letter-spacing: _size(letter-spacing-alt); + line-height: 3.5em; + text-decoration: none; + } + + > .button { + display: block; + margin: 0.5em 0 0 0; + } + + &:first-child { + > a:not(.button) { + border-top: 0 !important; + } + } + } + } + } + + .close { + background-image: url('images/close.svg'); + background-repeat: no-repeat; + background-size: contain; + background-position: top right; + -webkit-tap-highlight-color: rgba(0,0,0,0); + border: 0; + color: _palette(fg-light); + cursor: pointer; + display: block; + height: 3.5em; + position: absolute; + right: 0; + text-align: right; + top: 0; + vertical-align: middle; + width: 6em; + + &:before { + font-size: 1.25em; + } + + &:hover { + color: _palette(fg-bold); + } + + @include breakpoint('<=small') { + height: 4em; + line-height: 4em; + } + } + + &.visible { + @include vendor('transform', 'translateX(0)'); + box-shadow: 0 0 2em 0 rgba(0,0,0,0.05); + visibility: visible; + } + + @include breakpoint('<=small') { + padding: 2.5em 1.75em; + + .close { + background-size: 50%; + } + } + } \ No newline at end of file diff --git a/assets/sass/libs/_breakpoints.scss b/assets/sass/libs/_breakpoints.scss new file mode 100644 index 0000000..c5301d8 --- /dev/null +++ b/assets/sass/libs/_breakpoints.scss @@ -0,0 +1,223 @@ +// breakpoints.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Breakpoints. + /// @var {list} + $breakpoints: () !global; + +// Mixins. + + /// Sets breakpoints. + /// @param {map} $x Breakpoints. + @mixin breakpoints($x: ()) { + $breakpoints: $x !global; + } + + /// Wraps @content in a @media block targeting a specific orientation. + /// @param {string} $orientation Orientation. + @mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } + } + + /// Wraps @content in a @media block using a given query. + /// @param {string} $query Query. + @mixin breakpoint($query: null) { + + $breakpoint: null; + $op: null; + $media: null; + + // Determine operator, breakpoint. + + // Greater than or equal. + @if (str-slice($query, 0, 2) == '>=') { + + $op: 'gte'; + $breakpoint: str-slice($query, 3); + + } + + // Less than or equal. + @elseif (str-slice($query, 0, 2) == '<=') { + + $op: 'lte'; + $breakpoint: str-slice($query, 3); + + } + + // Greater than. + @elseif (str-slice($query, 0, 1) == '>') { + + $op: 'gt'; + $breakpoint: str-slice($query, 2); + + } + + // Less than. + @elseif (str-slice($query, 0, 1) == '<') { + + $op: 'lt'; + $breakpoint: str-slice($query, 2); + + } + + // Not. + @elseif (str-slice($query, 0, 1) == '!') { + + $op: 'not'; + $breakpoint: str-slice($query, 2); + + } + + // Equal. + @else { + + $op: 'eq'; + $breakpoint: $query; + + } + + // Build media. + @if ($breakpoint and map-has-key($breakpoints, $breakpoint)) { + + $a: map-get($breakpoints, $breakpoint); + + // Range. + @if (type-of($a) == 'list') { + + $x: nth($a, 1); + $y: nth($a, 2); + + // Max only. + @if ($x == null) { + + // Greater than or equal (>= 0 / anything) + @if ($op == 'gte') { + $media: 'screen'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< 0 / invalid) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: -1px)'; + } + + // Not (> y) + @elseif ($op == 'not') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (<= y) + @else { + $media: 'screen and (max-width: ' + $y + ')'; + } + + } + + // Min only. + @else if ($y == null) { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= inf / anything) + @elseif ($op == 'lte') { + $media: 'screen'; + } + + // Greater than (> inf / invalid) + @elseif ($op == 'gt') { + $media: 'screen and (max-width: -1px)'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Equal (>= x) + @else { + $media: 'screen and (min-width: ' + $x + ')'; + } + + } + + // Min and max. + @else { + + // Greater than or equal (>= x) + @if ($op == 'gte') { + $media: 'screen and (min-width: ' + $x + ')'; + } + + // Less than or equal (<= y) + @elseif ($op == 'lte') { + $media: 'screen and (max-width: ' + $y + ')'; + } + + // Greater than (> y) + @elseif ($op == 'gt') { + $media: 'screen and (min-width: ' + ($y + 1) + ')'; + } + + // Less than (< x) + @elseif ($op == 'lt') { + $media: 'screen and (max-width: ' + ($x - 1) + ')'; + } + + // Not (< x and > y) + @elseif ($op == 'not') { + $media: 'screen and (max-width: ' + ($x - 1) + '), screen and (min-width: ' + ($y + 1) + ')'; + } + + // Equal (>= x and <= y) + @else { + $media: 'screen and (min-width: ' + $x + ') and (max-width: ' + $y + ')'; + } + + } + + } + + // String. + @else { + + // Missing a media type? Prefix with "screen". + @if (str-slice($a, 0, 1) == '(') { + $media: 'screen and ' + $a; + } + + // Otherwise, use as-is. + @else { + $media: $a; + } + + } + + } + + // Output. + @media #{$media} { + @content; + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_functions.scss b/assets/sass/libs/_functions.scss new file mode 100644 index 0000000..f563aab --- /dev/null +++ b/assets/sass/libs/_functions.scss @@ -0,0 +1,90 @@ +/// Removes a specific item from a list. +/// @author Hugo Giraudel +/// @param {list} $list List. +/// @param {integer} $index Index. +/// @return {list} Updated list. +@function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + +} + +/// Gets a value from a map. +/// @author Hugo Giraudel +/// @param {map} $map Map. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + +} + +/// Gets a duration value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _duration($keys...) { + @return val($duration, $keys...); +} + +/// Gets a font value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _font($keys...) { + @return val($font, $keys...); +} + +/// Gets a misc value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _misc($keys...) { + @return val($misc, $keys...); +} + +/// Gets a palette value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _palette($keys...) { + @return val($palette, $keys...); +} + +/// Gets a size value. +/// @param {string} $keys Key(s). +/// @return {string} Value. +@function _size($keys...) { + @return val($size, $keys...); +} \ No newline at end of file diff --git a/assets/sass/libs/_html-grid.scss b/assets/sass/libs/_html-grid.scss new file mode 100644 index 0000000..7438a8c --- /dev/null +++ b/assets/sass/libs/_html-grid.scss @@ -0,0 +1,149 @@ +// html-grid.scss v1.0 | @ajlkn | MIT licensed */ + +// Mixins. + + /// Initializes the current element as an HTML grid. + /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually). + /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list). + @mixin html-grid($gutters: 1.5em, $suffix: '') { + + // Initialize. + $cols: 12; + $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00; + $unit: 100% / $cols; + + // Suffixes. + $suffixes: null; + + @if (type-of($suffix) == 'list') { + $suffixes: $suffix; + } + @else { + $suffixes: ($suffix); + } + + // Gutters. + $guttersCols: null; + $guttersRows: null; + + @if (type-of($gutters) == 'list') { + + $guttersCols: nth($gutters, 1); + $guttersRows: nth($gutters, 2); + + } + @else { + + $guttersCols: $gutters; + $guttersRows: 0; + + } + + // Row. + display: flex; + flex-wrap: wrap; + box-sizing: border-box; + align-items: stretch; + + // Columns. + > * { + box-sizing: border-box; + } + + // Gutters. + &.gtr-uniform { + > * { + > :last-child { + margin-bottom: 0; + } + } + } + + // Alignment. + &.aln-left { + justify-content: flex-start; + } + + &.aln-center { + justify-content: center; + } + + &.aln-right { + justify-content: flex-end; + } + + &.aln-top { + align-items: flex-start; + } + + &.aln-middle { + align-items: center; + } + + &.aln-bottom { + align-items: flex-end; + } + + // Step through suffixes. + @each $suffix in $suffixes { + + // Suffix. + @if ($suffix != '') { + $suffix: '-' + $suffix; + } + @else { + $suffix: ''; + } + + // Row. + + // Important. + > .imp#{$suffix} { + order: -1; + } + + // Columns, offsets. + @for $i from 1 through $cols { + > .col-#{$i}#{$suffix} { + width: $unit * $i; + } + + > .off-#{$i}#{$suffix} { + margin-left: $unit * $i; + } + } + + // Step through multipliers. + @each $multiplier in $multipliers { + + // Gutters. + $class: null; + + @if ($multiplier != 1) { + $class: '.gtr-' + ($multiplier * 100); + } + + &#{$class} { + margin-top: ($guttersRows * $multiplier * -1); + margin-left: ($guttersCols * $multiplier * -1); + + > * { + padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier); + } + + // Uniform. + &.gtr-uniform { + margin-top: $guttersCols * $multiplier * -1; + + > * { + padding-top: $guttersCols * $multiplier; + } + } + + } + + } + + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_mixins.scss b/assets/sass/libs/_mixins.scss new file mode 100644 index 0000000..a331483 --- /dev/null +++ b/assets/sass/libs/_mixins.scss @@ -0,0 +1,78 @@ +/// Makes an element's :before pseudoelement a FontAwesome icon. +/// @param {string} $content Optional content value to use. +/// @param {string} $category Optional category to use. +/// @param {string} $where Optional pseudoelement to target (before or after). +@mixin icon($content: false, $category: regular, $where: before) { + + text-decoration: none; + + &:#{$where} { + + @if $content { + content: $content; + } + + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; + display: inline-block; + font-style: normal; + font-variant: normal; + text-rendering: auto; + line-height: 1; + text-transform: none !important; + + @if ($category == brands) { + font-family: 'Font Awesome 5 Brands'; + } + @elseif ($category == solid) { + font-family: 'Font Awesome 5 Free'; + font-weight: 900; + } + @else { + font-family: 'Font Awesome 5 Free'; + font-weight: 400; + } + + } + +} + +/// Applies padding to an element, taking the current element-margin value into account. +/// @param {mixed} $tb Top/bottom padding. +/// @param {mixed} $lr Left/right padding. +/// @param {list} $pad Optional extra padding (in the following order top, right, bottom, left) +/// @param {bool} $important If true, adds !important. +@mixin padding($tb, $lr, $pad: (0,0,0,0), $important: null) { + + @if $important { + $important: '!important'; + } + + $x: 0.1em; + + @if unit(_size(element-margin)) == 'rem' { + $x: 0.1rem; + } + + padding: ($tb + nth($pad,1)) ($lr + nth($pad,2)) max($x, $tb - _size(element-margin) + nth($pad,3)) ($lr + nth($pad,4)) #{$important}; + +} + +/// Encodes a SVG data URL so IE doesn't choke (via codepen.io/jakob-e/pen/YXXBrp). +/// @param {string} $svg SVG data URL. +/// @return {string} Encoded SVG data URL. +@function svg-url($svg) { + + $svg: str-replace($svg, '"', '\''); + $svg: str-replace($svg, '%', '%25'); + $svg: str-replace($svg, '<', '%3C'); + $svg: str-replace($svg, '>', '%3E'); + $svg: str-replace($svg, '&', '%26'); + $svg: str-replace($svg, '#', '%23'); + $svg: str-replace($svg, '{', '%7B'); + $svg: str-replace($svg, '}', '%7D'); + $svg: str-replace($svg, ';', '%3B'); + + @return url("data:image/svg+xml;charset=utf8,#{$svg}"); + +} \ No newline at end of file diff --git a/assets/sass/libs/_skel.scss b/assets/sass/libs/_skel.scss new file mode 100644 index 0000000..f5e0dcd --- /dev/null +++ b/assets/sass/libs/_skel.scss @@ -0,0 +1,587 @@ +// skel.scss v3.0.2-dev | (c) skel.io | MIT licensed */ + +// Vars. + + /// Breakpoints. + /// @var {list} + $breakpoints: () !global; + + /// Vendor prefixes. + /// @var {list} + $vendor-prefixes: ( + '-moz-', + '-webkit-', + '-ms-', + '' + ); + + /// Properties that should be vendorized. + /// @var {list} + $vendor-properties: ( + 'align-content', + 'align-items', + 'align-self', + 'animation', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-timing-function', + 'appearance', + 'backface-visibility', + 'box-sizing', + 'filter', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'justify-content', + 'object-fit', + 'object-position', + 'order', + 'perspective', + 'pointer-events', + 'transform', + 'transform-origin', + 'transform-style', + 'transition', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + 'user-select' + ); + + /// Values that should be vendorized. + /// @var {list} + $vendor-values: ( + 'filter', + 'flex', + 'linear-gradient', + 'radial-gradient', + 'transform' + ); + +// Functions. + + /// Removes a specific item from a list. + /// @author Hugo Giraudel + /// @param {list} $list List. + /// @param {integer} $index Index. + /// @return {list} Updated list. + @function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + + } + + /// Replaces a substring within another string. + /// @author Hugo Giraudel + /// @param {string} $string String. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {string} Updated string. + @function str-replace($string, $search, $replace: '') { + + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + + } + + /// Replaces a substring within each string in a list. + /// @param {list} $strings List of strings. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {list} Updated list of strings. + @function str-replace-all($strings, $search, $replace: '') { + + @each $string in $strings { + $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + } + + @return $strings; + + } + + /// Gets a value from a map. + /// @author Hugo Giraudel + /// @param {map} $map Map. + /// @param {string} $keys Key(s). + /// @return {string} Value. + @function val($map, $keys...) { + + @if nth($keys, 1) == null { + $keys: remove-nth($keys, 1); + } + + @each $key in $keys { + $map: map-get($map, $key); + } + + @return $map; + + } + +// Mixins. + + /// Sets the global box model. + /// @param {string} $model Model (default is content). + @mixin boxModel($model: 'content') { + + $x: $model + '-box'; + + *, *:before, *:after { + -moz-box-sizing: #{$x}; + -webkit-box-sizing: #{$x}; + box-sizing: #{$x}; + } + + } + + /// Wraps @content in a @media block using a given breakpoint. + /// @param {string} $breakpoint Breakpoint. + /// @param {map} $queries Additional queries. + @mixin breakpoint($breakpoint: null, $queries: null) { + + $query: 'screen'; + + // Breakpoint. + @if $breakpoint and map-has-key($breakpoints, $breakpoint) { + $query: $query + ' and ' + map-get($breakpoints, $breakpoint); + } + + // Queries. + @if $queries { + @each $k, $v in $queries { + $query: $query + ' and (' + $k + ':' + $v + ')'; + } + } + + @media #{$query} { + @content; + } + + } + + /// Wraps @content in a @media block targeting a specific orientation. + /// @param {string} $orientation Orientation. + @mixin orientation($orientation) { + @media screen and (orientation: #{$orientation}) { + @content; + } + } + + /// Utility mixin for containers. + /// @param {mixed} $width Width. + @mixin containers($width) { + + // Locked? + $lock: false; + + @if length($width) == 2 { + $width: nth($width, 1); + $lock: true; + } + + // Modifiers. + .container.\31 25\25 { width: 100%; max-width: $width * 1.25; min-width: $width; } + .container.\37 5\25 { width: $width * 0.75; } + .container.\35 0\25 { width: $width * 0.5; } + .container.\32 5\25 { width: $width * 0.25; } + + // Main class. + .container { + @if $lock { + width: $width !important; + } + @else { + width: $width; + } + } + + } + + /// Utility mixin for grid. + /// @param {list} $gutters Column and row gutters (default is 40px). + /// @param {string} $breakpointName Optional breakpoint name. + @mixin grid($gutters: 40px, $breakpointName: null) { + + // Gutters. + @include grid-gutters($gutters); + @include grid-gutters($gutters, \32 00\25, 2); + @include grid-gutters($gutters, \31 50\25, 1.5); + @include grid-gutters($gutters, \35 0\25, 0.5); + @include grid-gutters($gutters, \32 5\25, 0.25); + + // Cells. + $x: ''; + + @if $breakpointName { + $x: '\\28' + $breakpointName + '\\29'; + } + + .\31 2u#{$x}, .\31 2u\24#{$x} { width: 100%; clear: none; margin-left: 0; } + .\31 1u#{$x}, .\31 1u\24#{$x} { width: 91.6666666667%; clear: none; margin-left: 0; } + .\31 0u#{$x}, .\31 0u\24#{$x} { width: 83.3333333333%; clear: none; margin-left: 0; } + .\39 u#{$x}, .\39 u\24#{$x} { width: 75%; clear: none; margin-left: 0; } + .\38 u#{$x}, .\38 u\24#{$x} { width: 66.6666666667%; clear: none; margin-left: 0; } + .\37 u#{$x}, .\37 u\24#{$x} { width: 58.3333333333%; clear: none; margin-left: 0; } + .\36 u#{$x}, .\36 u\24#{$x} { width: 50%; clear: none; margin-left: 0; } + .\35 u#{$x}, .\35 u\24#{$x} { width: 41.6666666667%; clear: none; margin-left: 0; } + .\34 u#{$x}, .\34 u\24#{$x} { width: 33.3333333333%; clear: none; margin-left: 0; } + .\33 u#{$x}, .\33 u\24#{$x} { width: 25%; clear: none; margin-left: 0; } + .\32 u#{$x}, .\32 u\24#{$x} { width: 16.6666666667%; clear: none; margin-left: 0; } + .\31 u#{$x}, .\31 u\24#{$x} { width: 8.3333333333%; clear: none; margin-left: 0; } + + .\31 2u\24#{$x} + *, + .\31 1u\24#{$x} + *, + .\31 0u\24#{$x} + *, + .\39 u\24#{$x} + *, + .\38 u\24#{$x} + *, + .\37 u\24#{$x} + *, + .\36 u\24#{$x} + *, + .\35 u\24#{$x} + *, + .\34 u\24#{$x} + *, + .\33 u\24#{$x} + *, + .\32 u\24#{$x} + *, + .\31 u\24#{$x} + * { + clear: left; + } + + .\-11u#{$x} { margin-left: 91.6666666667% } + .\-10u#{$x} { margin-left: 83.3333333333% } + .\-9u#{$x} { margin-left: 75% } + .\-8u#{$x} { margin-left: 66.6666666667% } + .\-7u#{$x} { margin-left: 58.3333333333% } + .\-6u#{$x} { margin-left: 50% } + .\-5u#{$x} { margin-left: 41.6666666667% } + .\-4u#{$x} { margin-left: 33.3333333333% } + .\-3u#{$x} { margin-left: 25% } + .\-2u#{$x} { margin-left: 16.6666666667% } + .\-1u#{$x} { margin-left: 8.3333333333% } + + } + + /// Utility mixin for grid. + /// @param {list} $gutters Gutters. + /// @param {string} $class Optional class name. + /// @param {integer} $multiplier Multiplier (default is 1). + @mixin grid-gutters($gutters, $class: null, $multiplier: 1) { + + // Expand gutters if it's not a list. + @if length($gutters) == 1 { + $gutters: ($gutters, 0); + } + + // Get column and row gutter values. + $c: nth($gutters, 1); + $r: nth($gutters, 2); + + // Get class (if provided). + $x: ''; + + @if $class { + $x: '.' + $class; + } + + // Default. + .row#{$x} > * { padding: ($r * $multiplier) 0 0 ($c * $multiplier); } + .row#{$x} { margin: ($r * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } + + // Uniform. + .row.uniform#{$x} > * { padding: ($c * $multiplier) 0 0 ($c * $multiplier); } + .row.uniform#{$x} { margin: ($c * $multiplier * -1) 0 -1px ($c * $multiplier * -1); } + + } + + /// Wraps @content in vendorized keyframe blocks. + /// @param {string} $name Name. + @mixin keyframes($name) { + + @-moz-keyframes #{$name} { @content; } + @-webkit-keyframes #{$name} { @content; } + @-ms-keyframes #{$name} { @content; } + @keyframes #{$name} { @content; } + + } + + /// + /// Sets breakpoints. + /// @param {map} $x Breakpoints. + /// + @mixin skel-breakpoints($x: ()) { + $breakpoints: $x !global; + } + + /// + /// Initializes layout module. + /// @param {map} config Config. + /// + @mixin skel-layout($config: ()) { + + // Config. + $configPerBreakpoint: (); + + $z: map-get($config, 'breakpoints'); + + @if $z { + $configPerBreakpoint: $z; + } + + // Reset. + $x: map-get($config, 'reset'); + + @if $x { + + /* Reset */ + + @include reset($x); + + } + + // Box model. + $x: map-get($config, 'boxModel'); + + @if $x { + + /* Box Model */ + + @include boxModel($x); + + } + + // Containers. + $containers: map-get($config, 'containers'); + + @if $containers { + + /* Containers */ + + .container { + margin-left: auto; + margin-right: auto; + } + + // Use default is $containers is just "true". + @if $containers == true { + $containers: 960px; + } + + // Apply base. + @include containers($containers); + + // Apply per-breakpoint. + @each $name in map-keys($breakpoints) { + + // Get/use breakpoint setting if it exists. + $x: map-get($configPerBreakpoint, $name); + + // Per-breakpoint config exists? + @if $x { + $y: map-get($x, 'containers'); + + // Setting exists? Use it. + @if $y { + $containers: $y; + } + + } + + // Create @media block. + @media screen and #{map-get($breakpoints, $name)} { + @include containers($containers); + } + + } + + } + + // Grid. + $grid: map-get($config, 'grid'); + + @if $grid { + + /* Grid */ + + // Use defaults if $grid is just "true". + @if $grid == true { + $grid: (); + } + + // Sub-setting: Gutters. + $grid-gutters: 40px; + $x: map-get($grid, 'gutters'); + + @if $x { + $grid-gutters: $x; + } + + // Rows. + .row { + border-bottom: solid 1px transparent; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row > * { + float: left; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; + } + + .row:after, .row:before { + content: ''; + display: block; + clear: both; + height: 0; + } + + .row.uniform > * > :first-child { + margin-top: 0; + } + + .row.uniform > * > :last-child { + margin-bottom: 0; + } + + // Gutters (0%). + @include grid-gutters($grid-gutters, \30 \25, 0); + + // Apply base. + @include grid($grid-gutters); + + // Apply per-breakpoint. + @each $name in map-keys($breakpoints) { + + // Get/use breakpoint setting if it exists. + $x: map-get($configPerBreakpoint, $name); + + // Per-breakpoint config exists? + @if $x { + $y: map-get($x, 'grid'); + + // Setting exists? + @if $y { + + // Sub-setting: Gutters. + $x: map-get($y, 'gutters'); + + @if $x { + $grid-gutters: $x; + } + + } + + } + + // Create @media block. + @media screen and #{map-get($breakpoints, $name)} { + @include grid($grid-gutters, $name); + } + + } + + } + + } + + /// Resets browser styles. + /// @param {string} $mode Mode (default is 'normalize'). + @mixin reset($mode: 'normalize') { + + @if $mode == 'normalize' { + + // normalize.css v3.0.2 | MIT License | git.io/normalize + html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0} + + } + @else if $mode == 'full' { + + // meyerweb.com/eric/tools/css/reset v2.0 | 20110126 | License: none (public domain) + html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}table{border-collapse:collapse;border-spacing:0;}body{-webkit-text-size-adjust:none} + + } + + } + + /// Vendorizes a declaration's property and/or value(s). + /// @param {string} $property Property. + /// @param {mixed} $value String/list of value(s). + @mixin vendor($property, $value) { + + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + + $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $expandValue: true; + + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Expand just the value? + @elseif $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } + + } \ No newline at end of file diff --git a/assets/sass/libs/_vars.scss b/assets/sass/libs/_vars.scss new file mode 100644 index 0000000..68dcac2 --- /dev/null +++ b/assets/sass/libs/_vars.scss @@ -0,0 +1,64 @@ +// Misc. + $misc: ( + z-index-base: 10000 + ); + +// Duration. + $duration: ( + nav: 0.5s, + transition: 0.2s + ); + +// Size. + $size: ( + border-radius: 4px, + element-height: 2.75em, + element-margin: 2em, + inner: 75em, + section-spacing: 4em + ); + +// Font. + $font: ( + family: (Arial, Helvetica, sans-serif), + family-fixed: ('Courier New', monospace), + weight: normal, + weight-bold: normal, + kerning-heading: -0.0125em, + kerning-alt: 0.25em + ); + +// Palette. + $palette: ( + bg: #ffffff, + bg-alt: #f7f7f7, + fg: #999999, + fg-bold: #707070, + fg-light: #999999, + border: rgba(144,144,144,0.2), + border-bg: rgba(144,144,144,0.075), + border-bg-alt: rgba(144,144,144,0.15), + highlight: accent1, + + accent1: ( + bg: #db6172, + fg: mix(#db6172, #ffffff, 25%), + fg-bold: #ffffff, + fg-light: mix(#db6172, #ffffff, 40%), + border: rgba(255,255,255,0.35), + border-bg: rgba(255,255,255,0.125), + border-bg-alt: rgba(255,255,255,0.15), + highlight: accent1 + ), + + accent2: ( + bg: #303639, + fg: #ffffff, + fg-bold: #ffffff, + fg-light: #ffffff, + border: #ffffff, + border-bg: rgba(255,255,255,0.075), + border-bg-alt: rgba(255,255,255,0.15), + highlight: accent1 + ) + ); \ No newline at end of file diff --git a/assets/sass/libs/_vendor.scss b/assets/sass/libs/_vendor.scss new file mode 100644 index 0000000..6599a3f --- /dev/null +++ b/assets/sass/libs/_vendor.scss @@ -0,0 +1,376 @@ +// vendor.scss v1.0 | @ajlkn | MIT licensed */ + +// Vars. + + /// Vendor prefixes. + /// @var {list} + $vendor-prefixes: ( + '-moz-', + '-webkit-', + '-ms-', + '' + ); + + /// Properties that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-properties: ( + + // Animation. + 'animation', + 'animation-delay', + 'animation-direction', + 'animation-duration', + 'animation-fill-mode', + 'animation-iteration-count', + 'animation-name', + 'animation-play-state', + 'animation-timing-function', + + // Appearance. + 'appearance', + + // Backdrop filter. + 'backdrop-filter', + + // Background image options. + 'background-clip', + 'background-origin', + 'background-size', + + // Box sizing. + 'box-sizing', + + // Clip path. + 'clip-path', + + // Filter effects. + 'filter', + + // Flexbox. + 'align-content', + 'align-items', + 'align-self', + 'flex', + 'flex-basis', + 'flex-direction', + 'flex-flow', + 'flex-grow', + 'flex-shrink', + 'flex-wrap', + 'justify-content', + 'order', + + // Font feature. + 'font-feature-settings', + 'font-language-override', + 'font-variant-ligatures', + + // Font kerning. + 'font-kerning', + + // Fragmented borders and backgrounds. + 'box-decoration-break', + + // Grid layout. + 'grid-column', + 'grid-column-align', + 'grid-column-end', + 'grid-column-start', + 'grid-row', + 'grid-row-align', + 'grid-row-end', + 'grid-row-start', + 'grid-template-columns', + 'grid-template-rows', + + // Hyphens. + 'hyphens', + 'word-break', + + // Masks. + 'mask', + 'mask-border', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-slice', + 'mask-border-source', + 'mask-border-width', + 'mask-clip', + 'mask-composite', + 'mask-image', + 'mask-origin', + 'mask-position', + 'mask-repeat', + 'mask-size', + + // Multicolumn. + 'break-after', + 'break-before', + 'break-inside', + 'column-count', + 'column-fill', + 'column-gap', + 'column-rule', + 'column-rule-color', + 'column-rule-style', + 'column-rule-width', + 'column-span', + 'column-width', + 'columns', + + // Object fit. + 'object-fit', + 'object-position', + + // Regions. + 'flow-from', + 'flow-into', + 'region-fragment', + + // Scroll snap points. + 'scroll-snap-coordinate', + 'scroll-snap-destination', + 'scroll-snap-points-x', + 'scroll-snap-points-y', + 'scroll-snap-type', + + // Shapes. + 'shape-image-threshold', + 'shape-margin', + 'shape-outside', + + // Tab size. + 'tab-size', + + // Text align last. + 'text-align-last', + + // Text decoration. + 'text-decoration-color', + 'text-decoration-line', + 'text-decoration-skip', + 'text-decoration-style', + + // Text emphasis. + 'text-emphasis', + 'text-emphasis-color', + 'text-emphasis-position', + 'text-emphasis-style', + + // Text size adjust. + 'text-size-adjust', + + // Text spacing. + 'text-spacing', + + // Transform. + 'transform', + 'transform-origin', + + // Transform 3D. + 'backface-visibility', + 'perspective', + 'perspective-origin', + 'transform-style', + + // Transition. + 'transition', + 'transition-delay', + 'transition-duration', + 'transition-property', + 'transition-timing-function', + + // Unicode bidi. + 'unicode-bidi', + + // User select. + 'user-select', + + // Writing mode. + 'writing-mode', + + ); + + /// Values that should be vendorized. + /// Data via caniuse.com, github.com/postcss/autoprefixer, and developer.mozilla.org + /// @var {list} + $vendor-values: ( + + // Cross fade. + 'cross-fade', + + // Element function. + 'element', + + // Filter function. + 'filter', + + // Flexbox. + 'flex', + 'inline-flex', + + // Grab cursors. + 'grab', + 'grabbing', + + // Gradients. + 'linear-gradient', + 'repeating-linear-gradient', + 'radial-gradient', + 'repeating-radial-gradient', + + // Grid layout. + 'grid', + 'inline-grid', + + // Image set. + 'image-set', + + // Intrinsic width. + 'max-content', + 'min-content', + 'fit-content', + 'fill', + 'fill-available', + 'stretch', + + // Sticky position. + 'sticky', + + // Transform. + 'transform', + + // Zoom cursors. + 'zoom-in', + 'zoom-out', + + ); + +// Functions. + + /// Removes a specific item from a list. + /// @author Hugo Giraudel + /// @param {list} $list List. + /// @param {integer} $index Index. + /// @return {list} Updated list. + @function remove-nth($list, $index) { + + $result: null; + + @if type-of($index) != number { + @warn "$index: #{quote($index)} is not a number for `remove-nth`."; + } + @else if $index == 0 { + @warn "List index 0 must be a non-zero integer for `remove-nth`."; + } + @else if abs($index) > length($list) { + @warn "List index is #{$index} but list is only #{length($list)} item long for `remove-nth`."; + } + @else { + + $result: (); + $index: if($index < 0, length($list) + $index + 1, $index); + + @for $i from 1 through length($list) { + + @if $i != $index { + $result: append($result, nth($list, $i)); + } + + } + + } + + @return $result; + + } + + /// Replaces a substring within another string. + /// @author Hugo Giraudel + /// @param {string} $string String. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {string} Updated string. + @function str-replace($string, $search, $replace: '') { + + $index: str-index($string, $search); + + @if $index { + @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace); + } + + @return $string; + + } + + /// Replaces a substring within each string in a list. + /// @param {list} $strings List of strings. + /// @param {string} $search Substring. + /// @param {string} $replace Replacement. + /// @return {list} Updated list of strings. + @function str-replace-all($strings, $search, $replace: '') { + + @each $string in $strings { + $strings: set-nth($strings, index($strings, $string), str-replace($string, $search, $replace)); + } + + @return $strings; + + } + +// Mixins. + + /// Wraps @content in vendorized keyframe blocks. + /// @param {string} $name Name. + @mixin keyframes($name) { + + @-moz-keyframes #{$name} { @content; } + @-webkit-keyframes #{$name} { @content; } + @-ms-keyframes #{$name} { @content; } + @keyframes #{$name} { @content; } + + } + + /// Vendorizes a declaration's property and/or value(s). + /// @param {string} $property Property. + /// @param {mixed} $value String/list of value(s). + @mixin vendor($property, $value) { + + // Determine if property should expand. + $expandProperty: index($vendor-properties, $property); + + // Determine if value should expand (and if so, add '-prefix-' placeholder). + $expandValue: false; + + @each $x in $value { + @each $y in $vendor-values { + @if $y == str-slice($x, 1, str-length($y)) { + + $value: set-nth($value, index($value, $x), '-prefix-' + $x); + $expandValue: true; + + } + } + } + + // Expand property? + @if $expandProperty { + @each $vendor in $vendor-prefixes { + #{$vendor}#{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Expand just the value? + @elseif $expandValue { + @each $vendor in $vendor-prefixes { + #{$property}: #{str-replace-all($value, '-prefix-', $vendor)}; + } + } + + // Neither? Treat them as a normal declaration. + @else { + #{$property}: #{$value}; + } + + } \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss new file mode 100644 index 0000000..cd1be8d --- /dev/null +++ b/assets/sass/main.scss @@ -0,0 +1,70 @@ +@import 'libs/vars'; +@import 'libs/functions'; +@import 'libs/mixins'; +@import 'libs/vendor'; +@import 'libs/breakpoints'; +@import 'libs/html-grid'; +@import 'fontawesome-all.min.css'; + +/* + KABI.tk +*/ + +// Breakpoints. + + @include breakpoints(( + xlarge: ( 1281px, 1680px ), + large: ( 981px, 1280px ), + medium: ( 737px, 980px ), + small: ( 481px, 736px ), + xsmall: ( 361px, 480px ), + xxsmall: ( null, 360px ) + )); + +// Mixins. + + @mixin color($p) { + @include color-typography($p); + @include color-box($p); + @include color-button($p); + @include color-features($p); + @include color-form($p); + @include color-icon($p); + @include color-image-circles($p); + @include color-list($p); + @include color-section($p); + @include color-spotlights($p); + @include color-table($p); + } + +// Base. + + @import 'base/reset'; + @import 'base/page'; + @import 'base/typography'; + +// Component. + + @import 'components/row'; + @import 'components/box'; + @import 'components/button'; + @import 'components/features'; + @import 'components/form'; + @import 'components/icon'; + @import 'components/image'; + @import 'components/image-circles'; + @import 'components/list'; + @import 'components/actions'; + @import 'components/icons'; + @import 'components/section'; + @import 'components/spotlights'; + @import 'components/table'; + @import 'components/wrapper'; + +// Layout. + + @import 'layout/header'; + @import 'layout/menu'; + @import 'layout/banner'; + @import 'layout/footer'; + @import 'layout/main'; \ No newline at end of file diff --git a/assets/webfonts/fa-brands-400.eot b/assets/webfonts/fa-brands-400.eot new file mode 100644 index 0000000..e79f40f Binary files /dev/null and b/assets/webfonts/fa-brands-400.eot differ diff --git a/assets/webfonts/fa-brands-400.svg b/assets/webfonts/fa-brands-400.svg new file mode 100644 index 0000000..ba0d850 --- /dev/null +++ b/assets/webfonts/fa-brands-400.svg @@ -0,0 +1,3442 @@ + + + + + +Created by FontForge 20190112 at Tue Jun 4 15:16:44 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-brands-400.ttf b/assets/webfonts/fa-brands-400.ttf new file mode 100644 index 0000000..217ffe9 Binary files /dev/null and b/assets/webfonts/fa-brands-400.ttf differ diff --git a/assets/webfonts/fa-brands-400.woff b/assets/webfonts/fa-brands-400.woff new file mode 100644 index 0000000..a2d8025 Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff differ diff --git a/assets/webfonts/fa-brands-400.woff2 b/assets/webfonts/fa-brands-400.woff2 new file mode 100644 index 0000000..e27b0bf Binary files /dev/null and b/assets/webfonts/fa-brands-400.woff2 differ diff --git a/assets/webfonts/fa-regular-400.eot b/assets/webfonts/fa-regular-400.eot new file mode 100644 index 0000000..d62be2f Binary files /dev/null and b/assets/webfonts/fa-regular-400.eot differ diff --git a/assets/webfonts/fa-regular-400.svg b/assets/webfonts/fa-regular-400.svg new file mode 100644 index 0000000..751083e --- /dev/null +++ b/assets/webfonts/fa-regular-400.svg @@ -0,0 +1,803 @@ + + + + + +Created by FontForge 20190112 at Tue Jun 4 15:16:44 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-regular-400.ttf b/assets/webfonts/fa-regular-400.ttf new file mode 100644 index 0000000..eb3cb5e Binary files /dev/null and b/assets/webfonts/fa-regular-400.ttf differ diff --git a/assets/webfonts/fa-regular-400.woff b/assets/webfonts/fa-regular-400.woff new file mode 100644 index 0000000..43b1a9a Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff differ diff --git a/assets/webfonts/fa-regular-400.woff2 b/assets/webfonts/fa-regular-400.woff2 new file mode 100644 index 0000000..b9344a7 Binary files /dev/null and b/assets/webfonts/fa-regular-400.woff2 differ diff --git a/assets/webfonts/fa-solid-900.eot b/assets/webfonts/fa-solid-900.eot new file mode 100644 index 0000000..c77baa8 Binary files /dev/null and b/assets/webfonts/fa-solid-900.eot differ diff --git a/assets/webfonts/fa-solid-900.svg b/assets/webfonts/fa-solid-900.svg new file mode 100644 index 0000000..627128b --- /dev/null +++ b/assets/webfonts/fa-solid-900.svg @@ -0,0 +1,4649 @@ + + + + + +Created by FontForge 20190112 at Tue Jun 4 15:16:44 2019 + By Robert Madole +Copyright (c) Font Awesome + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/assets/webfonts/fa-solid-900.ttf b/assets/webfonts/fa-solid-900.ttf new file mode 100644 index 0000000..c6c3dd4 Binary files /dev/null and b/assets/webfonts/fa-solid-900.ttf differ diff --git a/assets/webfonts/fa-solid-900.woff b/assets/webfonts/fa-solid-900.woff new file mode 100644 index 0000000..77c1786 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff differ diff --git a/assets/webfonts/fa-solid-900.woff2 b/assets/webfonts/fa-solid-900.woff2 new file mode 100644 index 0000000..e30fb67 Binary files /dev/null and b/assets/webfonts/fa-solid-900.woff2 differ diff --git a/choose-map.html b/choose-map.html new file mode 100644 index 0000000..a7a07bf --- /dev/null +++ b/choose-map.html @@ -0,0 +1,6 @@ +

 

+

Kraut.World by KABI.tk

+

 

+

To create maps, please contact us at missioncontrol@kraut.world.

+

 

+

\ No newline at end of file diff --git a/coc_de.html b/coc_de.html new file mode 100644 index 0000000..0678ea7 --- /dev/null +++ b/coc_de.html @@ -0,0 +1,116 @@ + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + +
+
+

Nutzungsbedingungen

+

Code of Conduct

+
+
+ +


KABI.tk ist bestrebt, eine belästigungsfreie Nutzung für alle zu bieten. Wir dulden keine Belästigung von Teilnehmer:innen in irgendeiner Form.

+

Dieser Verhaltenskodex (CoC) gilt für alle KABI-Services, die von KABI Fancy Media sowohl online als auch offline angeboten werden. Jede:r, die/der gegen diesen Verhaltenskodex verstößt, kann nach Ermessen des Response-Teams sanktioniert oder aus diesen Bereichen ausgeschlossen werden.

+

Einige KABI-Dienste können zusätzliche Regeln haben, die den Teilnehmern deutlich zugänglich gemacht werden. Die Teilnehmer sind dafür verantwortlich, diese Regeln zu kennen und sich daran zu halten.

+

Zum Begriff Belästigung gehören (nicht abschließend):

+
    +
  • Beleidigende Kommentare in Bezug auf Geschlecht, Geschlechtsidentität und -ausdruck, sexuelle Orientierung, Behinderung, psychische Krankheit, Neuro(a)typizität, körperliches Aussehen, Körpergröße, Alter, Phenotyp oder Religion.
  • +
  • Unerwünschte Kommentare über den Lebensstil und Praktiken einer Person, einschließlich solcher, die sich auf Essen, Gesundheit, Erziehung, Drogengebrauch und Beschäftigung beziehen.
  • +
  • Absichtlich falsches Gendern oder die Verwendung von abgelehnten (Benutzer:innen-)Namen.
  • +
  • Unangebrachte oder themenfremde sexuelle Bilder oder Verhaltensweisen in Bereichen, in denen sie nicht angemessen sind.
  • +
  • Körperlicher Kontakt und simulierter Körperkontakt (z. B. textliche Beschreibungen wie "Umarmung") ohne Zustimmung oder nach Aufforderung, dies zu unterlassen.
  • +
  • Androhung von Gewalt
  • +
  • Anstiftung zur Gewalt gegenüber einer Person, einschließlich der Aufforderung, Gewalt gegen die eigene Person auszuüben oder sichg selbst zu verletzen.
  • +
  • Vorsätzliche Einschüchterung.
  • +
  • Stalking oder Verfolgung.
  • +
  • Belästigendes Fotografieren, Anfertigen von Bildschirm- oder anderen Aufzeichnungen, einschließlich des Protokollierens von Online-Aktivitäten zu Belästigungszwecken.
  • +
  • Anhaltende Unterbrechung von Diskussionen.
  • +
  • Unerwünschte sexuelle Aufmerksamkeit.
  • +
  • Fortgesetzte Kommunikation unter vier Augen bzw. in Privatchats nach der Aufforderung, diese einzustellen.
  • +
  • Vorsätzliches "Outing" irgendeines Aspekts der Identität einer Person ohne deren Zustimmung, es sei denn, dies ist notwendig, um gefährdete Personen vor vorsätzlichem Missbrauch zu schützen.
  • +
  • Veröffentlichung von nicht-belästigender privater Kommunikation.
  • +
+

KABI priorisiert die Sicherheit von marginalisierten Menschen gegenüber dem Komfort von privilegierten Menschen. KABI behält sich das Recht vor, nicht auf Beschwerden zu reagieren, die Folgendes betreffen:

+
    +
  • 'Umgekehrte' -ismen, einschließlich 'umgekehrter Rassismus', 'umgekehrter Sexismus' und 'Cisphobie'.
  • +
  • Angemessene Kommunikation von Grenzen, wie z. B. "Lass mich in Ruhe", "Geh weg" oder "Ich diskutiere das nicht mit dir."
  • +
  • Kommunizieren in einem "Ton", den Sie nicht sympathisch finden.
  • +
  • Kritisieren von rassistischem, sexistischem, cissexistischem oder anderweitig unterdrückendem Verhalten oder Annahmen
  • +
+

Beispiele

+

KABI kann Ausdrücke wie "Du rassistisches Arschloch, geh sterben" akzeptieren. Dies bedeutet jedoch nicht, dass Sie sich in Gesprächen so verhalten sollten. KABI wird den gleichen Ausdruck in Verbindung mit den oben genannten Ausschlusskriterien wie "Du behindertes weißes Arschloch, f*ck dich." nicht akzeptieren. Wir akzeptieren keine Äußerungen oder Verhaltensweisen, die sexistische, rassistische oder anderweitig aus o.g. Gründen ausgrenzende Formulierungen fördern oder weiter etablieren, sowie die Verbindung von sexistischen oder sexualisierten Formulierungen mit Schimpfwörtern wie "f*ck alle XY".

+

Verhalten melden

+

Wenn Sie von einer/m Benutzer:in eines KABI-Services belästigt werden, bemerken, dass jemand anderes belästigt wird, oder andere Bedenken haben, wenden Sie sich bitte an das Response-Team unter hello@kabi.tk. Wenn die Person, die Sie belästigt, zum Team gehört, wird sie sich von der Bearbeitung Ihres Vorfalls zurückziehen. Wir werden so schnell wie möglich reagieren.

+

Wir respektieren Vertraulichkeitsanfragen zum Schutz von Missbrauchsopfern. Es liegt in unserem Ermessen, eine Person, über die wir Belästigungsbeschwerden erhalten haben, öffentlich zu nennen oder Dritte privat vor ihr zu warnen, wenn wir glauben, dass dies die Sicherheit der Mitglieder:innen von KABI-Services oder der allgemeinen Öffentlichkeit erhöht. Wir werden die Namen von Belästigungsopfern nicht ohne deren ausdrückliche Zustimmung nennen.

+

Konsequenzen

+

Von Teilnehmer:innen, die aufgefordert werden, jegliches belästigende Verhalten einzustellen, wird erwartet, dass sie dem sofort nachkommen.

+

Wenn ein/-e Teilnehmer:in ein belästigendes Verhalten an den Tag legt, kann das Reaktionsteam alle Maßnahmen ergreifen, die es für angemessen hält, bis hin zum Ausschluss aus allen KABI-Services und der Identifizierung des Teilnehmenden als Belästiger:in gegenüber anderen KABI-Service Nutzenden oder der Öffentlichkeit.

+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/coc_en.html b/coc_en.html new file mode 100644 index 0000000..044f6ca --- /dev/null +++ b/coc_en.html @@ -0,0 +1,114 @@ + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + +
+

Code of Conduct

+

(CoC)

+
+
+


KABI.tk strives to provide a harassment-free experience for all. We do not tolerate harassment of participants in any form.

+

This Code of Conduct (CoC) applies to all KABI services offered by KABI Fancy Media or associated with, both online and offline. Anyone who violates this Code of Conduct may be sanctioned or excluded from these areas at the discretion of the Response Team.

+

Some KABI services may have additional rules that are clearly made available to participants. Participants are responsible for knowing and abiding by these rules.

+

The term 'harassment' includes (not exhaustively):

+
    +
  • Offensive comments related to gender, gender identity and expression, sexual orientation, disability, mental illness, neuro(a)typicity, physical appearance, body size, age, phenotype, or religion.
  • +
  • Unwelcome comments about an individual's lifestyle and practices, including those related to food, health, education, drug use, and employment.
  • +
  • Intentional misgendering or use of disavowed (user-) names.
  • +
  • Inappropriate or off-topic sexual imagery or behavior in contexts or situations where it is not appropriate.
  • +
  • Physical contact and simulated physical contact (e.g. textual descriptions such as "hugging") without consent or after being asked to refrain from doing so.
  • +
  • Threats of violence.
  • +
  • Inciting violence against a person, including soliciting violence against or harming oneself.
  • +
  • Intentional intimidation.
  • +
  • Stalking or persecution.
  • +
  • Harassing photographing, making screen captures or other recordings, including logging online activity for harassment purposes.
  • +
  • Persistent interruption of discussions.
  • +
  • Unwelcome sexual attention.
  • +
  • Continued communication in private or in direct-chats after being asked to stop.
  • +
  • Intentional "outing" of any aspect of a person's identity without that person's consent, except as necessary to protect vulnerable individuals from intentional abuse.
  • +
  • Posting of non-harassing private communications.
  • +
+

KABI prioritizes the safety of marginalized people over the comfort of privileged people. KABI reserves the right not to respond to complaints regarding the following:

+
    +
  • 'Reverse' -isms, including 'reverse racism', 'reverse sexism', and 'cisphobia'.
  • +
  • Appropriately communicating boundaries, such as "leave me alone," "go away," or "I'm not discussing this with you."
  • +
  • Communicating in a "tone" that you are not sympathetic to.
  • +
  • Criticizing racist, sexist, cissexist, or otherwise oppressive behavior or assumptions.
  • +
+

Examples

+

KABI may accept expressions such as "You racist asshole, go get dying." Yet, this does not mean that you should act or behave in this manner in conversations. KABI will not accept the same term in connection with the above-mentioned exclusion criteria such as "You fat white asshole, f*ck off." We will not accept expressions or behavior encouraging or of further establishing sexist, racist, or otherwise excluding wordings as well as the connection of sexist wording with swear words such as "f*uck all XY".

+

Report user behavior

+

If you are being harassed by a User of a KABI service, notice that someone else is being harassed, or have other concerns, please contact the Response Team at hello@kabi.tk. If the person harassing you is a member of the team, they will recuse themselves from handling your incident. We will respond as soon as possible.

+

We respect confidentiality requests to protect victims of abuse. We have the discretion to publicly name a person about whom we have received harassment complaints or to privately warn third parties about them if we believe doing so will enhance the safety of KABI Services members or the general public. We will not name victims of harassment without their express consent.

+

Consequences

+

Participants who are asked to stop any harassing behavior are expected to comply immediately.

+

If a participant engages in harassing behavior, the response team may take any action it deems appropriate, up to and including expulsion from all KABI services and identification of the participant as a harasser to other KABI service users or the public.

+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/gdpr_de.html b/gdpr_de.html new file mode 100644 index 0000000..db5834b --- /dev/null +++ b/gdpr_de.html @@ -0,0 +1,91 @@ + + + + + + + + + + Kraut.World + + + + + + + + + + + + + +
+
+

Datenschutz

+

nach DSGVO

+
+
+ +

Kraut.World ist ein Service zum Einbinden von Workadventure-Karten. Bei der Nutzung des Services werden seitens des Serviceanbieters KABI.tk ausschließlich

+
    +
  • Datum, Uhrzeit des Zugriffs,
  • +
  • Ihre IP-Adresse,
  • +
  • Ihr genutzer Browser,
  • +
  • Daten über die aufgerufenen Karten sowie Ihr Avatar und Avatarname
  • +
+

in den Logfiles gespeichert. Die Logfiles dienen der Fehleranalyse und werden regelmäßig nach 48 automatisiert gelöscht. Eine Identifizierung Ihrer Person ist anhand dieser Daten nicht möglich.

+

Weitere Daten werden nicht erhoben.

+
+

Auf den Karten besteht aber die Möglichkeit, weitere Inhalte einzubinden. Davon wird häufig Gebraucht gemacht. Externe Inhalte sind alle Arten von im Internet angebotenen Services wie bspw. Websiten, Chats, Video-Konferenzsysteme etc. Diese Inhalte rufen Sie auf, indem Sie Ihren Avatar an die Stelle der Einbindung bewegen. Sofern Sie diese externen Inhalte laden, finden Sie die entsprechenden Datenschutz-Beschreibungen bei diesen Anbietern.

+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/gdpr_en.html b/gdpr_en.html new file mode 100644 index 0000000..82aabf8 --- /dev/null +++ b/gdpr_en.html @@ -0,0 +1,91 @@ + + + + + + + + + + Kraut.World + + + + + + + + + + + + + +
+
+

Privacy

+

GDPR

+
+
+ +

Kraut.World is a service for embedding workadventure maps. When using the service, the service provider KABItk only

+
    +
  • date, time of the access,
  • +
  • your IP-address,
  • +
  • the used browser,
  • +
  • temporary data like your avatar and name setting
  • +
+

are saved in the log files. The log files are used for error analysis and are regularly deleted automatically after 48 hours. An identification of your person is not possible on the basis of this data.

+

Further data is not collected..

+
+

However, it is possible to include additional content on the cards. This is frequently used. External contents are all kinds of services offered on the Internet, such as websites, chats, video conferencing systems etc. You can access this content by moving your avatar to the location where it is embedded. If you load this external content, you will find the corresponding data protection descriptions at these providers.

+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/images/avatars_css_sec2_TEMPLATE.jpg b/images/avatars_css_sec2_TEMPLATE.jpg new file mode 100644 index 0000000..97743e4 Binary files /dev/null and b/images/avatars_css_sec2_TEMPLATE.jpg differ diff --git a/images/banner.jpg b/images/banner.jpg new file mode 100644 index 0000000..4fc4bb3 Binary files /dev/null and b/images/banner.jpg differ diff --git a/images/fav/android-chrome-192x192.png b/images/fav/android-chrome-192x192.png new file mode 100644 index 0000000..9765f1b Binary files /dev/null and b/images/fav/android-chrome-192x192.png differ diff --git a/images/fav/android-chrome-512x512.png b/images/fav/android-chrome-512x512.png new file mode 100644 index 0000000..4311104 Binary files /dev/null and b/images/fav/android-chrome-512x512.png differ diff --git a/images/fav/apple-touch-icon.png b/images/fav/apple-touch-icon.png new file mode 100644 index 0000000..55a8369 Binary files /dev/null and b/images/fav/apple-touch-icon.png differ diff --git a/images/fav/favicon-16x16.png b/images/fav/favicon-16x16.png new file mode 100644 index 0000000..f0a1c9a Binary files /dev/null and b/images/fav/favicon-16x16.png differ diff --git a/images/fav/favicon-32x32.png b/images/fav/favicon-32x32.png new file mode 100644 index 0000000..dff8f65 Binary files /dev/null and b/images/fav/favicon-32x32.png differ diff --git a/images/fav/favicon.ico b/images/fav/favicon.ico new file mode 100644 index 0000000..8cbead0 Binary files /dev/null and b/images/fav/favicon.ico differ diff --git a/images/logos/kabi_full.png b/images/logos/kabi_full.png new file mode 100644 index 0000000..be46626 Binary files /dev/null and b/images/logos/kabi_full.png differ diff --git a/images/pic01.jpg b/images/pic01.jpg new file mode 100644 index 0000000..5e000f0 Binary files /dev/null and b/images/pic01.jpg differ diff --git a/images/pic02.jpg b/images/pic02.jpg new file mode 100644 index 0000000..a6ed41d Binary files /dev/null and b/images/pic02.jpg differ diff --git a/images/pic03.jpg b/images/pic03.jpg new file mode 100644 index 0000000..1a348ae Binary files /dev/null and b/images/pic03.jpg differ diff --git a/images/pic04.jpg b/images/pic04.jpg new file mode 100644 index 0000000..61d7d19 Binary files /dev/null and b/images/pic04.jpg differ diff --git a/images/pic05.jpg b/images/pic05.jpg new file mode 100644 index 0000000..c12fd70 Binary files /dev/null and b/images/pic05.jpg differ diff --git a/images/pic06.jpg b/images/pic06.jpg new file mode 100644 index 0000000..4c2b740 Binary files /dev/null and b/images/pic06.jpg differ diff --git a/images/pic07.jpg b/images/pic07.jpg new file mode 100644 index 0000000..9d5ad45 Binary files /dev/null and b/images/pic07.jpg differ diff --git a/images/pic08.jpg b/images/pic08.jpg new file mode 100644 index 0000000..b03286e Binary files /dev/null and b/images/pic08.jpg differ diff --git a/images/pic09.jpg b/images/pic09.jpg new file mode 100644 index 0000000..db90457 Binary files /dev/null and b/images/pic09.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..85e64cf --- /dev/null +++ b/index.html @@ -0,0 +1,251 @@ + + + + + + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + + +
+
+
+

Kraut.World Workadventure
+ Was ist unser Ziel?

+

Wir versuchen, Initiativen, Hackspaces und Menschen aus verschiedenen Regionen zusammenzubringen indem jede/-r die anderen besucht, an gemeinsamen Treffen und Vorträgen teilnimmt und neue Freunde findet.

+ Dabei können Sie wie im richtigen Leben herumlaufen und mit den Menschen sprechen, denen Sie begegnen. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+

Was ist die World?

+

Die Kraut.World, eine 2D-Welt ist eine spieleartige Welt, durch die Sie mit einer Figur laufen und mit anderen Menschen in Kontakt zu treten können.

+ Entstanden ist die Idee für diese Welt nach dem Abschluss des rC3, dem Remote-Congress des Chaos Computer Club. Dort war eine ähnliche 2D-Welt eingerichtet und damit nun diese, teilweise sehr liebevoll gebauten 2D-Welt-Karten der einzelnen Hackspaces, nicht einfach nur in Schubladen verschwinden, haben wir uns entschlossen die nötigen Dinge zusammen zutragen, um einigen Hackspaces aus Thüringen, Sachsen, Brandenburg und Nordrhein-Westfalen ein neues Zuhause zu geben.

+
+
+
+ +
+

Wo bin ich und wie kann ich mich bewegen?

+

Ihre Figur können Sie mit den Pfeiltasten ← ↑ → ↓ oder mit den Buchstaben A W S D Ihrer Tastatur bewegen. Aktuell steht leider noch kein Bildschirm-Joystick zur Nutzung am Tablet zur Verfügung, daher ist die World aktuell nur per PC/Laptop nutzbar.

+ Nach dem Start befinden Sie sich in Thüringen. Hier finden Sie verschiedene Gebäude, Bäume, Berge und Flüsse. Die Gebäude stehen stellvertretend für die Orte in denen es Hackspaces oder Freifunk-Initiativen u.a. gibt. So finden Sie zum Beispiel den “Jenaer Turm” etwas östlich (rechts) vom Startpunkt und gelangen zum KrautSpace Jena. Auf den Karten sind oft Wegweiser, die Ihnen eine Übersicht bieten. Sie können auch das Layout Ihres Browsers anpassen und den Zoomfaktor verkleinern, damit Sie eine bessere Übersicht bekommen.

+
+
+
+ +
+

Unterhaltung mit mehr als vier Personen

+

Wenn Sie in der World auf eine andere Figur treffen und nah genug zueinander stehen, eröffnet sich ein Audio/Video-Gespräch. Symbolisiert wird das zum einen durch den Kreis, welcher sich um die Figur bildet, aber auch über die Mini-Videochat-Fenster die an der rechten Seite erscheinen.

+ + Bis zu vier Figuren können so gleichzeitig in einem Gespräch sein. + Sollten Sie einmal mit mehr als vier Figuren gleichzeitig ein Gespräch abhalten wollen, suchen Sie einen Video-Raum auf, diese finden Sie auf vielen Karten: Das sind integrierte Jitsi-Sessions via KABItalk. Hier können sich viele Personen unterhalten oder Vorträge halten. Die Jitsi-Räume sind auch von außerhalb, bspw. per App am Smartphone betretbar.

+
+
+
+
+
+ + +
+
+
+

Die Technik hinter Kraut.World

+

Kraut.World basiert auf Workadventure. Gehostet wird Kraut.World sowie die Jitsi-Instanz KABItalk durch KABI.tk FancyMedia.
Die einzelnen Karten sind dabei völlig selbstständig und werden extern eingebunden, d.h. die Erstellung der Karten und deren Hosting findet separat statt. Jede Interessentin und jeder Interessent kann eigene Karten erstellen und diese einbinden und behält alle Rechte am eigenen Werk.

+
+
+
+ +

Erstellen von Karten

+

Dazu nutzen Sie bitte den Editor, den Sie hier herunterladen können:

+

Tiled Mapeditor + +

+
+ +

Hosten von Karten

+

Karten können auf GitHub oder einem anderen Repository-Manager Ihrer Wahl hosten. Wichtig dabei ist, dass Zugriff auf raw-Files uneingeschränkt möglich ist.

+
+
+ +

Einbinden von Karten

+

Zusammensetzung von URLs
+ https://play.kraut.world/_/global/
+
{raw-repository-main.json} +

+
+ +

Repository

+

Den aktuell eingesetzen Code finden Sie auf Gitea.

+

Repository

+
+
+ +

KABItalk

+

Kraut.World verwendet KABItalk als Jitsi-Instanz. Alle Video-Räume sind auch extern über https://talk.kabi.tk/{raumname} erreichbar.

+
+
+ +

Mission control

+

Für Interessierte gibt es einen Matrix-Raum, ein Pad sowie die Möglichkeit des Mailkontakts.

+

Matrix | Pad | Mail

+
+
+ +
+
+ + +
+
+ +
+

Eigene Veranstaltung auf Kraut.World

+

Kontaktaufnahme notwendig

+

Es ist möglich, eine eigene Veranstaltung auf Kraut.World abzuhalten. Nehmen Sie dazu bitte rechtzeitig Kontakt mit uns auf. Eingebundene Karten müssen unter Umständen aktiv zugelassen werden. Das Einbindung von externen, nicht mit dem Team von Kraut.World abgestimmten Karten kann andernfalls ohne Benachrichtigung jederzeit unterbunden werden.

+

Eigene Subdomain

+

Es ist möglich, für Ihre Veranstaltung eine eigene Subdomain der Form https://IhreWelt.kraut.world zu bekommen, damit die Teilnehmenden direkt in die entsprechende Welt gelangen. +

+ +
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index_const.html b/index_const.html new file mode 100644 index 0000000..a66bc19 --- /dev/null +++ b/index_const.html @@ -0,0 +1,251 @@ + + + + + + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + + +
+
+
+

Kraut.World Workadventure
+ Was ist unser Ziel?

+

Wir versuchen, Initiativen, Hackspaces und Menschen aus verschiedenen Regionen zusammenzubringen indem jede/-r die anderen besucht, an gemeinsamen Treffen und Vorträgen teilnimmt und neue Freunde findet.

+ Dabei können Sie wie im richtigen Leben herumlaufen und mit den Menschen sprechen, denen Sie begegnen. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+

Was ist die World?

+

Die Kraut.World, eine 2D-Welt ist eine spieleartige Welt, durch die Sie mit einer Figur laufen und mit anderen Menschen in Kontakt zu treten können.

+ Entstanden ist die Idee für diese Welt nach dem Abschluss des rC3, dem Remote-Congress des Chaos Computer Club. Dort war eine ähnliche 2D-Welt eingerichtet und damit nun diese, teilweise sehr liebevoll gebauten 2D-Welt-Karten der einzelnen Hackspaces, nicht einfach nur in Schubladen verschwinden, haben wir uns entschlossen die nötigen Dinge zusammen zutragen, um einigen Hackspaces aus Thüringen, Sachsen, Brandenburg und Nordrhein-Westfalen ein neues Zuhause zu geben.

+
+
+
+ +
+

Wo bin ich und wie kann ich mich bewegen?

+

Ihre Figur können Sie mit den Pfeiltasten ← ↑ → ↓ oder mit den Buchstaben A W S D Ihrer Tastatur bewegen. Aktuell steht leider noch kein Bildschirm-Joystick zur Nutzung am Tablet zur Verfügung, daher ist die World aktuell nur per PC/Laptop nutzbar.

+ Nach dem Start befinden Sie sich in Thüringen. Hier finden Sie verschiedene Gebäude, Bäume, Berge und Flüsse. Die Gebäude stehen stellvertretend für die Orte in denen es Hackspaces oder Freifunk-Initiativen u.a. gibt. So finden Sie zum Beispiel den “Jenaer Turm” etwas östlich (rechts) vom Startpunkt und gelangen zum KrautSpace Jena. Auf den Karten sind oft Wegweiser, die Ihnen eine Übersicht bieten. Sie können auch das Layout Ihres Browsers anpassen und den Zoomfaktor verkleinern, damit Sie eine bessere Übersicht bekommen.

+
+
+
+ +
+

Unterhaltung mit mehr als vier Personen

+

Wenn Sie in der World auf eine andere Figur treffen und nah genug zueinander stehen, eröffnet sich ein Audio/Video-Gespräch. Symbolisiert wird das zum einen durch den Kreis, welcher sich um die Figur bildet, aber auch über die Mini-Videochat-Fenster die an der rechten Seite erscheinen.

+ + Bis zu vier Figuren können so gleichzeitig in einem Gespräch sein. + Sollten Sie einmal mit mehr als vier Figuren gleichzeitig ein Gespräch abhalten wollen, suchen Sie einen Video-Raum auf, diese finden Sie auf vielen Karten: Das sind integrierte Jitsi-Sessions via KABItalk. Hier können sich viele Personen unterhalten oder Vorträge halten. Die Jitsi-Räume sind auch von außerhalb, bspw. per App am Smartphone betretbar.

+
+
+
+
+
+ + +
+
+
+

Die Technik hinter Kraut.World

+

Kraut.World basiert auf Workadventure. Gehostet wird Kraut.World sowie die Jitsi-Instanz KABItalk durch KABI.tk FancyMedia.
Die einzelnen Karten sind dabei völlig selbstständig und werden extern eingebunden, d.h. die Erstellung der Karten und deren Hosting findet separat statt. Jede Interessentin und jeder Interessent kann eigene Karten erstellen und diese einbinden und behält alle Rechte am eigenen Werk.

+
+
+
+ +

Erstellen von Karten

+

Dazu nutzen Sie bitte den Editor, den Sie hier herunterladen können:

+

Tiled Mapeditor + +

+
+ +

Hosten von Karten

+

Karten können auf GitHub oder einem anderen Repository-Manager Ihrer Wahl hosten. Wichtig dabei ist, dass Zugriff auf raw-Files uneingeschränkt möglich ist.

+
+
+ +

Einbinden von Karten

+

Zusammensetzung von URLs
+ https://play.kraut.world/_/global/
+
{raw-repository-main.json} +

+
+ +

Repository

+

Den aktuell eingesetzen Code finden Sie auf Gitea.

+

Repository

+
+
+ +

KABItalk

+

Kraut.World verwendet KABItalk als Jitsi-Instanz. Alle Video-Räume sind auch extern über https://talk.kabi.tk/{raumname} erreichbar.

+
+
+ +

Mission control

+

Für Interessierte gibt es einen Matrix-Raum, ein Pad sowie die Möglichkeit des Mailkontakts.

+

Matrix | Pad | Mail

+
+
+ +
+
+ + +
+
+ +
+

Eigene Veranstaltung auf Kraut.World

+

Kontaktaufnahme notwendig

+

Es ist möglich, eine eigene Veranstaltung auf Kraut.World abzuhalten. Nehmen Sie dazu bitte rechtzeitig Kontakt mit uns auf. Eingebundene Karten müssen unter Umständen aktiv zugelassen werden. Das Einbindung von externen, nicht mit dem Team von Kraut.World abgestimmten Karten kann andernfalls ohne Benachrichtigung jederzeit unterbunden werden.

+

Eigene Subdomain

+

Es ist möglich, für Ihre Veranstaltung eine eigene Subdomain der Form https://IhreWelt.kraut.world zu bekommen, damit die Teilnehmenden direkt in die entsprechende Welt gelangen. +

+ +
+
+ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/index_en.html b/index_en.html new file mode 100644 index 0000000..8937b96 --- /dev/null +++ b/index_en.html @@ -0,0 +1,229 @@ + + + + + + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + + +
+
+
+

Kraut.World Workadventure
+ What is our goal?

+

We try to bring initiatives, hackspaces and people from different regions together by visiting one anothers, participating in joint meetings and talks, and making new friendships.

+ You can walk around and talk to the people you meet, just like in the real world. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+

What is the World?

+

The 2D World is a game-like space where you can create a character (displayed as a cool avatar) and use it to interact with other people while walking through the designed locations. The idea for this world originated after the rC3, the remote congress of the Chaos Computer Club in 2020, where a similar 2D world was set up.

We don’t want those lovely made maps to just disappear, so we decided to gather the necessary technical backends to give some hackspaces from Thuringia, Saxony, Brandenburg, Berlin and North Rhine-Westphalia a new home.

+
+
+
+ +
+

Where am I and how can I move around?

+

You can move your character using the arrow keys ← ↑ → ↓ or the letters A W S D on your keyboard. However, there is no on-screen joystick available, at the moment. So, the World can currently be used via PC/laptop only.

+

Once you're all set, you will automatically be in a 2D Thuringia. There, you find various buildings, trees, mountains and rivers. The buildings are representative for the places where hackspaces or other initiatives are located. For example, you can visit the "Jena Tower" a bit east (right) of the starting point and get to the local hackspace. There are often signposts on the maps to give you a general overview. You can also adjust the layout of your browser by reducing the zoom factor to get a better sight.

+
+
+
+ +
+

Conversation with more than four people

+

Interacting with other users is pretty easy and totally possible in the World. Once you come across another character, an audio/video popup will appear, and you can select either one.

Up to four people can be in one same conversation. If you want to hold a discussion with more than four participants at the same time, look for a video room. These can be found on many maps: these are integrated Jitsi sessions via KABItalk, where many people can talk or give lectures. The Jitsi rooms can also be accessed from outside, e.g. via app on your smartphone.

+
+
+
+
+
+ + +
+
+
+

The tech behind Kraut.World

+

Kraut.World is based on Workadventure. Kraut.World and the Jitsi instance KABItalk are hosted by KABI.tk FancyMedia.
The individual maps are completely independent and are integrated from external sources, i.e. the creation of the maps and their hosting is done separately. Every interested person can create his or her own maps and integrate them, retaining all rights to his or her own work.

+
+
+
+ +

Creating maps

+

Please use the editor software that you can download here:

+

Tiled Mapeditor + +

+
+ +

Map hosting

+

Maps can be hosted on GitHub or another repository manager of your choice. It is important that access to raw files is unrestricted.

+
+
+ +

Integrating of maps

+

URL composition
+ https://play.kraut.world/_/global/
+
{raw-repository-main.json} +

+
+ +

Repository

+

You can find the current code on Gitea.

+

Repository

+
+
+ +

KABItalk

+

Kraut.World uses the Jitsi instance KABItalk. All video rooms are also accessible externally via https://talk.kabi.tk/{roomname}

+
+
+ +

Mission control

+

There is a Matrix room, a Pad, and the possibility of mail contact for people interested in the project.

+

Matrix | Pad | Mail

+
+
+ +
+
+ + +
+
+ +
+

Your own event in the Kraut.World

+

Previous contacting required

+

You can freely plan your own event on Kraut.World. Yet, you just have to contact us beforehand so we lay the ground for you. Maps may need to be actively approved. The integration of external maps that have not been agreed upon with the Kraut.World team will be unaccessible at any time without a warning!

+

Your own subdomain

+

It may be possible to get a separate subdomain for your event, such as https://YourMap.kraut.world, so participants will be redirected to the map in use. +

+ +
+
+ + + + + + + + + + + + + + diff --git a/index_fr.html b/index_fr.html new file mode 100644 index 0000000..a794557 --- /dev/null +++ b/index_fr.html @@ -0,0 +1,230 @@ + + + + + + + + + + + + + + + Kraut.World + + + + + + + + + + + + + + + + +
+
+
+

Kraut.World Workadventure
+ Quel est notre but?

+

On essaie de rassembler des initiatives, hackspaces et des gens de differentes regions en participant à des réunions et discussions conjointes et en nouant de nouvelles amitiés.

+ Vous pouver vous promener et discuter aux gens que vous rencontrerez. +

+ +
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+
+ +
+

C'est quoi le World?

+

Le monde 2D est un espace de type jeu où vous pouvez créer un personnage (affiché comme un avatar sympa) et l'utiliser pour interagir avec d'autres personnes tout en marchant dans les lieux conçus. L'idée de ce monde est née après le rC3, le congrès à distance du Chaos Computer Club en 2020, où un monde 2D similaire a été mis en place.

On ne veut pas que ces belles cartes disparaissent juste comme ça, alors on a décidé de rassembler les backends techniques nécessaires pour donner un nouveau foyer à certains hackspaces de Thuringe, Saxe, Brandebourg, Berlin et Rhénanie du Nord-Westphalie.

+
+
+
+ +
+

Où suis-je et comment puis-je me déplacer?

+

+Vous pouvez déplacer votre personnage à l'aide des touches fléchées ← ↑ → ↓ ou des lettres A W S D de votre clavier. Cependant, il n'y a pas de joystick à l'écran disponible pour le moment. Ainsi, le monde ne peut actuellement être utilisé que via un PC / ordinateur portable.

+

Une fois prêt, vous serez automatiquement dans une Thuringe 2D. Là, vous trouverez plusieurs bâtiments, arbres, montagnes et rivières. Les bâtiments sont représentatifs des endroits où se trouvent des hackspaces ou d'autres initiatives. Par exemple, vous pouvez visiter la "Jena Tower" un peu à l'est (à droite) du point de départ et accéder au hackspace local. Il y a souvent des panneaux indicateurs sur les cartes pour vous donner un aperçu général. Vous pouvez également ajuster la disposition de votre navigateur en réduisant le facteur de zoom pour obtenir une vue plus agréable.

+
+
+
+ +
+

Conversation avec plus de quatre personnes

+

Interagir avec d'autres utilisateurs est assez facile et totalement possible dans le monde. Une fois que vous rencontrez un autre personnage, une fenêtre contextuelle audio / vidéo apparaît et vous pouvez sélectionner l'un ou l'autre.

Jusqu'à quatre personnes peuvent participer à une même conversation. Si vous souhaitez organiser une discussion avec plus de quatre participants en même temps, recherchez une salle vidéo. Celles-ci peuvent être trouvées sur de nombreuses cartes: ce sont des sessions Jitsi intégrées via KABItalk, où de nombreuses personnes peuvent parler ou donner des conférences. Les chambres Jitsi sont également accessibles de l'extérieur, par ex. via l'application sur votre smartphone.

+
+
+
+
+
+ + +
+
+
+

La téchnologie dérrière Kraut.World

+

Kraut.World est basé sur Workadventure. Kraut.World et l'instance Jitsi KABItalk qui sont hébergées par KABI.tk FancyMedia.
Les cartes individuelles sont complètement indépendantes et sont intégrées à partir de sources externes, c'est-à-dire que la création des cartes et leur hébergement se fait séparément. Chaque personne intéressée peut créer ses propres cartes et les intégrer, en conservant tous les droits sur son propre travail.

+
+
+
+ +

Creation des cartes

+

Veuillez utiliser le logiciel d'édition que vous pouvez télécharger ici:

+

Tiled Mapeditor + +

+
+ +

Hébergement de cartes

+

Les cartes peuvent être hébergées sur GitHub ou un autre gestionnaire de référentiel de votre choix. Il est important que l'accès aux fichiers bruts soit illimité.

+
+
+ +

Integration des cartes

+

Composition URL
+ https://play.kraut.world/_/global/
+
{raw-repository-main.json} +

+
+ +

Dépôt/Repository

+

Vous pouvez trouver le code actuel sur Gitea.

+

Repository

+
+
+ +

KABItalk

+

Kraut.World utilise l'instance Jitsi KABItalk. Toutes les salles vidéo sont également accessibles de l'extérieur via https://talk.kabi.tk/{roomname}

+
+
+ +

Contrôle de mission

+

Il y a une salle Matrix, un Pad, et la possibilité de contact mail pour les personnes intéressées par le projet.

+

Matrix | Pad | Mail

+
+
+ +
+
+ + +
+
+ +
+

Votre propre événement dans le Kraut.World

+

Contact préalable requis

+

Vous pouvez planifier librement votre propre événement sur Kraut.World. Il vous suffit de nous contacter au préalable afin que nous vous préparions le terrain. Les cartes devront peut-être être activement approuvées. L'intégration de cartes externes non convenues avec l'équipe Kraut.World sera inaccessible à tout moment sans avertissement!

+

Votre propre sous-domaine

+

Il peut être possible d'obtenir un sous-domaine distinct pour votre événement, tel que https://YourMap.kraut.world, afin que les participants soient redirigés vers la carte utilisée. +

+ +
+
+ + + + + + + + + + + + + +