From 1b07a0021ad61f21f4414e8bb9045d605ce87f64 Mon Sep 17 00:00:00 2001 From: Derek Date: Wed, 2 Sep 2020 22:17:44 -0400 Subject: add timeline view add timeline route --- pydis_site/apps/home/urls.py | 3 ++- pydis_site/apps/home/views/__init__.py | 4 ++-- pydis_site/apps/home/views/home.py | 5 +++++ 3 files changed, 9 insertions(+), 3 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/apps/home/urls.py b/pydis_site/apps/home/urls.py index 61e87a39..cf0c7457 100644 --- a/pydis_site/apps/home/urls.py +++ b/pydis_site/apps/home/urls.py @@ -6,7 +6,7 @@ from django.contrib.messages import ERROR from django.urls import include, path from pydis_site.utils.views import MessageRedirectView -from .views import AccountDeleteView, AccountSettingsView, HomeView +from .views import AccountDeleteView, AccountSettingsView, HomeView, timeline app_name = 'home' urlpatterns = [ @@ -38,4 +38,5 @@ urlpatterns = [ path('admin/', admin.site.urls), path('notifications/', include('django_nyt.urls')), + path('timeline/', timeline), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) diff --git a/pydis_site/apps/home/views/__init__.py b/pydis_site/apps/home/views/__init__.py index 801fd398..36b88b1b 100644 --- a/pydis_site/apps/home/views/__init__.py +++ b/pydis_site/apps/home/views/__init__.py @@ -1,4 +1,4 @@ from .account import DeleteView as AccountDeleteView, SettingsView as AccountSettingsView -from .home import HomeView +from .home import HomeView, timeline -__all__ = ["AccountDeleteView", "AccountSettingsView", "HomeView"] +__all__ = ["AccountDeleteView", "AccountSettingsView", "HomeView", "timeline"] diff --git a/pydis_site/apps/home/views/home.py b/pydis_site/apps/home/views/home.py index 20e38ab0..7ad995cc 100644 --- a/pydis_site/apps/home/views/home.py +++ b/pydis_site/apps/home/views/home.py @@ -126,3 +126,8 @@ class HomeView(View): """Collect repo data and render the homepage view.""" repo_data = self._get_repo_data() return render(request, "home/index.html", {"repo_data": repo_data}) + + +def timeline(request: WSGIRequest) -> HttpResponse: + """Render timeline view.""" + return render(request, 'home/timeline.html') -- cgit v1.2.3 From 6b692e992666f78c4b03e34b19c1ad8f8ca6ab8c Mon Sep 17 00:00:00 2001 From: Derek Date: Wed, 2 Sep 2020 22:20:17 -0400 Subject: add timeline template rough first draft --- pydis_site/templates/home/timeline.html | 475 ++++++++++++++++++++++++++++++++ 1 file changed, 475 insertions(+) create mode 100644 pydis_site/templates/home/timeline.html (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html new file mode 100644 index 00000000..d9cdd625 --- /dev/null +++ b/pydis_site/templates/home/timeline.html @@ -0,0 +1,475 @@ +{% extends 'base/base.html' %} +{% load static %} + +{% block title %}Home{% endblock %} +{% block head %} + + +{% endblock %} + +{% block content %} + {% include "base/navbar.html" %} + +
+
+
+
+ Picture +
+ +
+

Python Discord is created

+

lorem ipsum

+ +
+ Jan 8th, 2017 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 1,000 members

+

lorem ipsum

+ +
+ Nov 10th, 2017 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Our logo is born. Thanks Aperture!

+

picture here?

+ +
+ Feb 3rd, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 2,000 members; pythondiscord.com and @Python are live

+

lorem ipsum

+ +
+ Mar 4th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

First code jam with the theme “snakes”

+

lorem ipsum

+ +
+ Mar 23rd, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The privacy policy is created

+

lorem ipsum

+ +
+ May 21st, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Do You Even Python and PyDis merger

+

lorem ipsum

+ +
+ Jun 9th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 5,000 members

+

lorem ipsum

+ +
+ Jun 20th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

+

lorem ipsum

+ +
+ Jul 10th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

First Hacktoberfest PyDis event; @SeasonalBot is created

+

lorem ipsum

+ +
+ Oct 1st, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 10,000 members

+

lorem ipsum

+ +
+ Nov 24th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

django-simple-bulma is released on PyPi

+

lorem ipsum

+ +
+ Dec 19th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 15,000 members; the “hot ones special” video is released

+

lorem ipsum

+ +
+ Apr 8th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

the Django rewrite of pythondiscord.com is now live!

+

lorem ipsum

+ +
+ Sep 15, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

flake8-annotations is released on PyPI

+

lorem ipsum

+ +
+ Sep 25th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The code of conduct is created

+

lorem ipsum

+ +
+ Oct 26th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 30,000 members

+

lorem ipsum

+ +
+ Dec 22nd, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

+

lorem ipsum

+ +
+ Jan 17, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The new help channel system is live

+

lorem ipsum

+ +
+ Apr 5th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 40,000 members, and is now bigger than Liechtenstein.

+

picture here?

+ +
+ Apr 14, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

+

lorem ipsum

+ +
+ Apr 17th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

ModMail is now live

+

lorem ipsum

+ +
+ May 25th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord is now listed on python.org/community

+

lorem ipsum

+ +
+ May 28th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord Public Statistics are now live

+

lorem ipsum

+ +
+ Jun 4th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

+

lorem ipsum

+ +
+ Jul 31st, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord is now the new home of the PyWeek event!

+

lorem ipsum

+ +
+ Aug 16th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 100,000 members.

+

lorem ipsum

+ +
+ Sep ??, 2020 + Read more +
+
+
+
+
+ + {% endblock %} -- cgit v1.2.3 From e1382867ab2a96cf1b656b9b9f5154c0e7fa6aac Mon Sep 17 00:00:00 2001 From: Derek Date: Wed, 2 Sep 2020 22:28:19 -0400 Subject: add static timeline assets --- pydis_site/static/css/home/style.css | 1 + .../static/images/timeline/cd-icon-location.svg | 4 ++ .../static/images/timeline/cd-icon-movie.svg | 4 ++ .../static/images/timeline/cd-icon-picture.svg | 5 ++ pydis_site/static/js/timeline/main.js | 71 ++++++++++++++++++++++ 5 files changed, 85 insertions(+) create mode 100644 pydis_site/static/css/home/style.css create mode 100755 pydis_site/static/images/timeline/cd-icon-location.svg create mode 100755 pydis_site/static/images/timeline/cd-icon-movie.svg create mode 100755 pydis_site/static/images/timeline/cd-icon-picture.svg create mode 100644 pydis_site/static/js/timeline/main.js (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/style.css b/pydis_site/static/css/home/style.css new file mode 100644 index 00000000..4eaca7c2 --- /dev/null +++ b/pydis_site/static/css/home/style.css @@ -0,0 +1 @@ +@import url("https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700");*,*::after,*::before{box-sizing:inherit}*{font:inherit}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,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, white)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #fff);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}:root{--space-unit: 1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs: calc(0.25*var(--space-unit));--space-xxs: calc(0.375*var(--space-unit));--space-xs: calc(0.5*var(--space-unit));--space-sm: calc(0.75*var(--space-unit));--space-md: calc(1.25*var(--space-unit));--space-lg: calc(2*var(--space-unit));--space-xl: calc(3.25*var(--space-unit));--space-xxl: calc(5.25*var(--space-unit));--space-xxxl: calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}:root{--max-width-xxs: 32rem;--max-width-xs: 38rem;--max-width-sm: 48rem;--max-width-md: 64rem;--max-width-lg: 80rem;--max-width-xl: 90rem;--max-width-xxl: 120rem}.container{width:calc(100% - 1.25em);width:calc(100% - 2*var(--component-padding));margin-left:auto;margin-right:auto}.max-width-xxs{max-width:32rem;max-width:var(--max-width-xxs)}.max-width-xs{max-width:38rem;max-width:var(--max-width-xs)}.max-width-sm{max-width:48rem;max-width:var(--max-width-sm)}.max-width-md{max-width:64rem;max-width:var(--max-width-md)}.max-width-lg{max-width:80rem;max-width:var(--max-width-lg)}.max-width-xl{max-width:90rem;max-width:var(--max-width-xl)}.max-width-xxl{max-width:120rem;max-width:var(--max-width-xxl)}.max-width-adaptive-sm{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-sm{max-width:48rem;max-width:var(--max-width-sm)}}.max-width-adaptive-md{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-md{max-width:64rem;max-width:var(--max-width-md)}}.max-width-adaptive,.max-width-adaptive-lg{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:80rem;max-width:var(--max-width-lg)}}.max-width-adaptive-xl{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-xl{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive-xl{max-width:90rem;max-width:var(--max-width-xl)}}.grid{--grid-gap: 0px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid>*{-ms-flex-preferred-size:100%;flex-basis:100%}[class*="grid-gap"]{margin-bottom:1em * -1;margin-bottom:calc(var(--grid-gap, 1em)*-1);margin-right:1em * -1;margin-right:calc(var(--grid-gap, 1em)*-1)}[class*="grid-gap"]>*{margin-bottom:1em;margin-bottom:var(--grid-gap, 1em);margin-right:1em;margin-right:var(--grid-gap, 1em)}.grid-gap-xxxxs{--grid-gap: var(--space-xxxxs)}.grid-gap-xxxs{--grid-gap: var(--space-xxxs)}.grid-gap-xxs{--grid-gap: var(--space-xxs)}.grid-gap-xs{--grid-gap: var(--space-xs)}.grid-gap-sm{--grid-gap: var(--space-sm)}.grid-gap-md{--grid-gap: var(--space-md)}.grid-gap-lg{--grid-gap: var(--space-lg)}.grid-gap-xl{--grid-gap: var(--space-xl)}.grid-gap-xxl{--grid-gap: var(--space-xxl)}.grid-gap-xxxl{--grid-gap: var(--space-xxxl)}.grid-gap-xxxxl{--grid-gap: var(--space-xxxxl)}.col{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}@media (min-width: 32rem){.col\@xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xs{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xs{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xs{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xs{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xs{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xs{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xs{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xs{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xs{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xs{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xs{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xs{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 48rem){.col\@sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@sm{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@sm{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@sm{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@sm{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@sm{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@sm{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@sm{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@sm{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@sm{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@sm{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@sm{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@sm{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 64rem){.col\@md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@md{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@md{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@md{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@md{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@md{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@md{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@md{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@md{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@md{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@md{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@md{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@md{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 80rem){.col\@lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@lg{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@lg{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@lg{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@lg{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@lg{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@lg{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@lg{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@lg{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@lg{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@lg{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@lg{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@lg{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 90rem){.col\@xl{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xl{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xl{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xl{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xl{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xl{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xl{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xl{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xl{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xl{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xl{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xl{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xl{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}:root{--radius-sm: calc(var(--radius, 0.25em)/2);--radius-md: var(--radius, 0.25em);--radius-lg: calc(var(--radius, 0.25em)*2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);--shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);--shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);--bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)}:root{--body-line-height: 1.4;--heading-line-height: 1.2}body{font-size:1em;font-size:var(--text-base-size, 1em);font-family:'Droid Serif', serif;font-family:var(--font-primary, sans-serif);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}h1,h2,h3,h4{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;line-height:var(--heading-line-height, 1.2)}.text-xxxl{font-size:2.48832em;font-size:var(--text-xxxl, 2.488em)}h1,.text-xxl{font-size:2.0736em;font-size:var(--text-xxl, 2.074em)}h2,.text-xl{font-size:1.728em;font-size:var(--text-xl, 1.728em)}h3,.text-lg{font-size:1.44em;font-size:var(--text-lg, 1.44em)}h4,.text-md{font-size:1.2em;font-size:var(--text-md, 1.2em)}small,.text-sm{font-size:0.83333em;font-size:var(--text-sm, 0.833em)}.text-xs{font-size:0.69444em;font-size:var(--text-xs, 0.694em)}a,.link{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4);text-decoration:underline}strong,.text-bold{font-weight:bold}s{text-decoration:line-through}u,.text-underline{text-decoration:underline}.text-component{--component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1));--component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1))}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:1.2;line-height:var(--component-heading-line-height, 1.2);margin-bottom:0.25em;margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1))}.text-component h2,.text-component h3,.text-component h4{margin-top:0.75em;margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component p,.text-component blockquote,.text-component ul li,.text-component ol li{line-height:1.4;line-height:var(--component-body-line-height)}.text-component ul,.text-component ol,.text-component p,.text-component blockquote,.text-component .text-component__block{margin-bottom:0.75em;margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component ul,.text-component ol{padding-left:1em}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component img{display:block;margin:0 auto}.text-component figcaption{text-align:center;margin-top:0.5em;margin-top:var(--space-xs)}.text-component em{font-style:italic}.text-component hr{margin-top:2em;margin-top:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-bottom:2em;margin-bottom:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-left:auto;margin-right:auto}.text-component>*:first-child{margin-top:0}.text-component>*:last-child{margin-bottom:0}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}@media (min-width: 48rem){.text-component__block--left,.text-component__block--right{width:45%}.text-component__block--left img,.text-component__block--right img{width:100%}.text-component__block--left{float:left;margin-right:0.75em;margin-right:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component__block--right{float:right;margin-left:0.75em;margin-left:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}}@media (min-width: 90rem){.text-component__block--outset{width:calc(100% + 10.5em);width:calc(100% + 2*var(--space-xxl))}.text-component__block--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right){margin-left:-5.25em;margin-left:calc(-1*var(--space-xxl))}.text-component__block--left,.text-component__block--right{width:50%}.text-component__block--right.text-component__block--outset{margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}}:root{--icon-xxs: 12px;--icon-xs: 16px;--icon-sm: 24px;--icon-md: 32px;--icon-lg: 48px;--icon-xl: 64px;--icon-xxl: 128px}.icon{display:inline-block;color:inherit;fill:currentColor;height:1em;width:1em;line-height:1;-ms-flex-negative:0;flex-shrink:0}.icon--xxs{font-size:12px;font-size:var(--icon-xxs)}.icon--xs{font-size:16px;font-size:var(--icon-xs)}.icon--sm{font-size:24px;font-size:var(--icon-sm)}.icon--md{font-size:32px;font-size:var(--icon-md)}.icon--lg{font-size:48px;font-size:var(--icon-lg)}.icon--xl{font-size:64px;font-size:var(--icon-xl)}.icon--xxl{font-size:128px;font-size:var(--icon-xxl)}.icon--is-spinning{-webkit-animation:icon-spin 1s infinite linear;animation:icon-spin 1s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}.btn{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;white-space:nowrap;text-decoration:none;line-height:1;font-size:1em;font-size:var(--btn-font-size, 1em);padding-top:0.5em;padding-top:var(--btn-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--btn-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--btn-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--btn-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--btn-radius, 0.25em)}.btn--primary{background-color:hsl(220, 90%, 56%);background-color:var(--color-primary, #2a6df4);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--subtle{background-color:hsl(240, 1%, 83%);background-color:var(--color-contrast-low, #d3d3d4);color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.btn--accent{background-color:hsl(355, 90%, 61%);background-color:var(--color-accent, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--disabled{cursor:not-allowed}.btn--sm{font-size:0.8em;font-size:var(--btn-font-size-sm, 0.8em)}.btn--md{font-size:1.2em;font-size:var(--btn-font-size-md, 1.2em)}.btn--lg{font-size:1.4em;font-size:var(--btn-font-size-lg, 1.4em)}.btn--icon{padding:0.5em;padding:var(--btn-padding-y, 0.5em)}.form-control{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #f2f2f2);padding-top:0.5em;padding-top:var(--form-control-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--form-control-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--form-control-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--form-control-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--form-control-radius, 0.25em)}.form-control::-webkit-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control::-moz-placeholder{opacity:1;color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-ms-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-moz-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control[disabled],.form-control[readonly]{cursor:not-allowed}.form-legend{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;font-size:1.2em;font-size:var(--text-md, 1.2em);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.form-label{display:inline-block}.form__msg-error{background-color:hsl(355, 90%, 61%);background-color:var(--color-error, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff);font-size:0.83333em;font-size:var(--text-sm, 0.833em);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0.5em;padding:var(--space-xs);margin-top:0.75em;margin-top:var(--space-sm);border-radius:0.25em;border-radius:var(--radius-md, 0.25em);position:absolute;clip:rect(1px, 1px, 1px, 1px)}.form__msg-error::before{content:'';position:absolute;left:0.75em;left:var(--space-sm);top:0;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);width:0;height:0;border:8px solid transparent;border-bottom-color:hsl(355, 90%, 61%);border-bottom-color:var(--color-error)}.form__msg-error--is-visible{position:relative;clip:auto}.radio-list>*,.checkbox-list>*{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.radio-list>*:last-of-type,.checkbox-list>*:last-of-type{margin-bottom:0}.radio-list label,.checkbox-list label{line-height:1.4;line-height:var(--body-line-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-list input,.checkbox-list input{vertical-align:top;margin-right:0.25em;margin-right:var(--space-xxxs);-ms-flex-negative:0;flex-shrink:0}:root{--zindex-header: 2;--zindex-popover: 5;--zindex-fixed-element: 10;--zindex-overlay: 15}@media not all and (min-width: 32rem){.display\@xs{display:none !important}}@media (min-width: 32rem){.hide\@xs{display:none !important}}@media not all and (min-width: 48rem){.display\@sm{display:none !important}}@media (min-width: 48rem){.hide\@sm{display:none !important}}@media not all and (min-width: 64rem){.display\@md{display:none !important}}@media (min-width: 64rem){.hide\@md{display:none !important}}@media not all and (min-width: 80rem){.display\@lg{display:none !important}}@media (min-width: 80rem){.hide\@lg{display:none !important}}@media not all and (min-width: 90rem){.display\@xl{display:none !important}}@media (min-width: 90rem){.hide\@xl{display:none !important}}:root{--display: block}.is-visible{display:block !important;display:var(--display) !important}.is-hidden{display:none !important}.sr-only{position:absolute;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column{-ms-flex-direction:column;flex-direction:column}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.items-center{-ms-flex-align:center;align-items:center}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}@media (min-width: 32rem){.flex-wrap\@xs{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xs{-ms-flex-direction:column;flex-direction:column}.flex-row\@xs{-ms-flex-direction:row;flex-direction:row}.flex-center\@xs{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xs{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xs{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xs{-ms-flex-pack:center;justify-content:center}.justify-between\@xs{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xs{-ms-flex-align:center;align-items:center}.items-start\@xs{-ms-flex-align:start;align-items:flex-start}.items-end\@xs{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 48rem){.flex-wrap\@sm{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@sm{-ms-flex-direction:column;flex-direction:column}.flex-row\@sm{-ms-flex-direction:row;flex-direction:row}.flex-center\@sm{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@sm{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@sm{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@sm{-ms-flex-pack:center;justify-content:center}.justify-between\@sm{-ms-flex-pack:justify;justify-content:space-between}.items-center\@sm{-ms-flex-align:center;align-items:center}.items-start\@sm{-ms-flex-align:start;align-items:flex-start}.items-end\@sm{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 64rem){.flex-wrap\@md{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@md{-ms-flex-direction:column;flex-direction:column}.flex-row\@md{-ms-flex-direction:row;flex-direction:row}.flex-center\@md{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@md{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@md{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@md{-ms-flex-pack:center;justify-content:center}.justify-between\@md{-ms-flex-pack:justify;justify-content:space-between}.items-center\@md{-ms-flex-align:center;align-items:center}.items-start\@md{-ms-flex-align:start;align-items:flex-start}.items-end\@md{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 80rem){.flex-wrap\@lg{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@lg{-ms-flex-direction:column;flex-direction:column}.flex-row\@lg{-ms-flex-direction:row;flex-direction:row}.flex-center\@lg{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@lg{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@lg{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@lg{-ms-flex-pack:center;justify-content:center}.justify-between\@lg{-ms-flex-pack:justify;justify-content:space-between}.items-center\@lg{-ms-flex-align:center;align-items:center}.items-start\@lg{-ms-flex-align:start;align-items:flex-start}.items-end\@lg{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 90rem){.flex-wrap\@xl{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xl{-ms-flex-direction:column;flex-direction:column}.flex-row\@xl{-ms-flex-direction:row;flex-direction:row}.flex-center\@xl{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xl{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xl{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xl{-ms-flex-pack:center;justify-content:center}.justify-between\@xl{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xl{-ms-flex-align:center;align-items:center}.items-start\@xl{-ms-flex-align:start;align-items:flex-start}.items-end\@xl{-ms-flex-align:end;align-items:flex-end}}.flex-grow{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.flex-gap-xxxs{margin-bottom:-0.25em;margin-bottom:calc(-1*var(--space-xxxs));margin-right:-0.25em;margin-right:calc(-1*var(--space-xxxs))}.flex-gap-xxxs>*{margin-bottom:0.25em;margin-bottom:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.flex-gap-xxs{margin-bottom:-0.375em;margin-bottom:calc(-1*var(--space-xxs));margin-right:-0.375em;margin-right:calc(-1*var(--space-xxs))}.flex-gap-xxs>*{margin-bottom:0.375em;margin-bottom:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.flex-gap-xs{margin-bottom:-0.5em;margin-bottom:calc(-1*var(--space-xs));margin-right:-0.5em;margin-right:calc(-1*var(--space-xs))}.flex-gap-xs>*{margin-bottom:0.5em;margin-bottom:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.flex-gap-sm{margin-bottom:-0.75em;margin-bottom:calc(-1*var(--space-sm));margin-right:-0.75em;margin-right:calc(-1*var(--space-sm))}.flex-gap-sm>*{margin-bottom:0.75em;margin-bottom:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.flex-gap-md{margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md));margin-right:-1.25em;margin-right:calc(-1*var(--space-md))}.flex-gap-md>*{margin-bottom:1.25em;margin-bottom:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.flex-gap-lg{margin-bottom:-2em;margin-bottom:calc(-1*var(--space-lg));margin-right:-2em;margin-right:calc(-1*var(--space-lg))}.flex-gap-lg>*{margin-bottom:2em;margin-bottom:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.flex-gap-xl{margin-bottom:-3.25em;margin-bottom:calc(-1*var(--space-xl));margin-right:-3.25em;margin-right:calc(-1*var(--space-xl))}.flex-gap-xl>*{margin-bottom:3.25em;margin-bottom:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.flex-gap-xxl{margin-bottom:-5.25em;margin-bottom:calc(-1*var(--space-xxl));margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}.flex-gap-xxl>*{margin-bottom:5.25em;margin-bottom:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-xxxxs{margin:0.125em;margin:var(--space-xxxxs)}.margin-xxxs{margin:0.25em;margin:var(--space-xxxs)}.margin-xxs{margin:0.375em;margin:var(--space-xxs)}.margin-xs{margin:0.5em;margin:var(--space-xs)}.margin-sm{margin:0.75em;margin:var(--space-sm)}.margin-md{margin:1.25em;margin:var(--space-md)}.margin-lg{margin:2em;margin:var(--space-lg)}.margin-xl{margin:3.25em;margin:var(--space-xl)}.margin-xxl{margin:5.25em;margin:var(--space-xxl)}.margin-xxxl{margin:8.5em;margin:var(--space-xxxl)}.margin-xxxxl{margin:13.75em;margin:var(--space-xxxxl)}.margin-auto{margin:auto}.margin-top-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs)}.margin-top-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs)}.margin-top-xxs{margin-top:0.375em;margin-top:var(--space-xxs)}.margin-top-xs{margin-top:0.5em;margin-top:var(--space-xs)}.margin-top-sm{margin-top:0.75em;margin-top:var(--space-sm)}.margin-top-md{margin-top:1.25em;margin-top:var(--space-md)}.margin-top-lg{margin-top:2em;margin-top:var(--space-lg)}.margin-top-xl{margin-top:3.25em;margin-top:var(--space-xl)}.margin-top-xxl{margin-top:5.25em;margin-top:var(--space-xxl)}.margin-top-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl)}.margin-top-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl)}.margin-top-auto{margin-top:auto}.margin-bottom-xxxxs{margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs{margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-bottom-xxs{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-bottom-xs{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-bottom-sm{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-bottom-md{margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-bottom-lg{margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-bottom-xl{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-bottom-xxl{margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-bottom-xxxl{margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl{margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-bottom-auto{margin-bottom:auto}.margin-right-xxxxs{margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-right-xxxs{margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-right-xxs{margin-right:0.375em;margin-right:var(--space-xxs)}.margin-right-xs{margin-right:0.5em;margin-right:var(--space-xs)}.margin-right-sm{margin-right:0.75em;margin-right:var(--space-sm)}.margin-right-md{margin-right:1.25em;margin-right:var(--space-md)}.margin-right-lg{margin-right:2em;margin-right:var(--space-lg)}.margin-right-xl{margin-right:3.25em;margin-right:var(--space-xl)}.margin-right-xxl{margin-right:5.25em;margin-right:var(--space-xxl)}.margin-right-xxxl{margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-right-xxxxl{margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-right-auto{margin-right:auto}.margin-left-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs)}.margin-left-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs)}.margin-left-xxs{margin-left:0.375em;margin-left:var(--space-xxs)}.margin-left-xs{margin-left:0.5em;margin-left:var(--space-xs)}.margin-left-sm{margin-left:0.75em;margin-left:var(--space-sm)}.margin-left-md{margin-left:1.25em;margin-left:var(--space-md)}.margin-left-lg{margin-left:2em;margin-left:var(--space-lg)}.margin-left-xl{margin-left:3.25em;margin-left:var(--space-xl)}.margin-left-xxl{margin-left:5.25em;margin-left:var(--space-xxl)}.margin-left-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl)}.margin-left-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl)}.margin-left-auto{margin-left:auto}.margin-x-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs);margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-x-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-x-xxs{margin-left:0.375em;margin-left:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.margin-x-xs{margin-left:0.5em;margin-left:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.margin-x-sm{margin-left:0.75em;margin-left:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.margin-x-md{margin-left:1.25em;margin-left:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.margin-x-lg{margin-left:2em;margin-left:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.margin-x-xl{margin-left:3.25em;margin-left:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.margin-x-xxl{margin-left:5.25em;margin-left:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-x-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl);margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-x-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl);margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-x-auto{margin-left:auto;margin-right:auto}.margin-y-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs);margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-y-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs);margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-y-xxs{margin-top:0.375em;margin-top:var(--space-xxs);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-y-xs{margin-top:0.5em;margin-top:var(--space-xs);margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-y-sm{margin-top:0.75em;margin-top:var(--space-sm);margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-y-md{margin-top:1.25em;margin-top:var(--space-md);margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-y-lg{margin-top:2em;margin-top:var(--space-lg);margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-y-xl{margin-top:3.25em;margin-top:var(--space-xl);margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-y-xxl{margin-top:5.25em;margin-top:var(--space-xxl);margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-y-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl);margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-y-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl);margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-y-auto{margin-top:auto;margin-bottom:auto}@media not all and (min-width: 32rem){.has-margin\@xs{margin:0 !important}}@media not all and (min-width: 48rem){.has-margin\@sm{margin:0 !important}}@media not all and (min-width: 64rem){.has-margin\@md{margin:0 !important}}@media not all and (min-width: 80rem){.has-margin\@lg{margin:0 !important}}@media not all and (min-width: 90rem){.has-margin\@xl{margin:0 !important}}.padding-md{padding:1.25em;padding:var(--space-md)}.padding-xxxxs{padding:0.125em;padding:var(--space-xxxxs)}.padding-xxxs{padding:0.25em;padding:var(--space-xxxs)}.padding-xxs{padding:0.375em;padding:var(--space-xxs)}.padding-xs{padding:0.5em;padding:var(--space-xs)}.padding-sm{padding:0.75em;padding:var(--space-sm)}.padding-lg{padding:2em;padding:var(--space-lg)}.padding-xl{padding:3.25em;padding:var(--space-xl)}.padding-xxl{padding:5.25em;padding:var(--space-xxl)}.padding-xxxl{padding:8.5em;padding:var(--space-xxxl)}.padding-xxxxl{padding:13.75em;padding:var(--space-xxxxl)}.padding-component{padding:1.25em;padding:var(--component-padding)}.padding-top-md{padding-top:1.25em;padding-top:var(--space-md)}.padding-top-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs)}.padding-top-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs)}.padding-top-xxs{padding-top:0.375em;padding-top:var(--space-xxs)}.padding-top-xs{padding-top:0.5em;padding-top:var(--space-xs)}.padding-top-sm{padding-top:0.75em;padding-top:var(--space-sm)}.padding-top-lg{padding-top:2em;padding-top:var(--space-lg)}.padding-top-xl{padding-top:3.25em;padding-top:var(--space-xl)}.padding-top-xxl{padding-top:5.25em;padding-top:var(--space-xxl)}.padding-top-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl)}.padding-top-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl)}.padding-top-component{padding-top:1.25em;padding-top:var(--component-padding)}.padding-bottom-md{padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-bottom-xxxxs{padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs{padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-bottom-xxs{padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-bottom-xs{padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-bottom-sm{padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-bottom-lg{padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-bottom-xl{padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-bottom-xxl{padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-bottom-xxxl{padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl{padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-bottom-component{padding-bottom:1.25em;padding-bottom:var(--component-padding)}.padding-right-md{padding-right:1.25em;padding-right:var(--space-md)}.padding-right-xxxxs{padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-right-xxxs{padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-right-xxs{padding-right:0.375em;padding-right:var(--space-xxs)}.padding-right-xs{padding-right:0.5em;padding-right:var(--space-xs)}.padding-right-sm{padding-right:0.75em;padding-right:var(--space-sm)}.padding-right-lg{padding-right:2em;padding-right:var(--space-lg)}.padding-right-xl{padding-right:3.25em;padding-right:var(--space-xl)}.padding-right-xxl{padding-right:5.25em;padding-right:var(--space-xxl)}.padding-right-xxxl{padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-right-xxxxl{padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-right-component{padding-right:1.25em;padding-right:var(--component-padding)}.padding-left-md{padding-left:1.25em;padding-left:var(--space-md)}.padding-left-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs)}.padding-left-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs)}.padding-left-xxs{padding-left:0.375em;padding-left:var(--space-xxs)}.padding-left-xs{padding-left:0.5em;padding-left:var(--space-xs)}.padding-left-sm{padding-left:0.75em;padding-left:var(--space-sm)}.padding-left-lg{padding-left:2em;padding-left:var(--space-lg)}.padding-left-xl{padding-left:3.25em;padding-left:var(--space-xl)}.padding-left-xxl{padding-left:5.25em;padding-left:var(--space-xxl)}.padding-left-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl)}.padding-left-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl)}.padding-left-component{padding-left:1.25em;padding-left:var(--component-padding)}.padding-x-md{padding-left:1.25em;padding-left:var(--space-md);padding-right:1.25em;padding-right:var(--space-md)}.padding-x-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs);padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-x-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs);padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-x-xxs{padding-left:0.375em;padding-left:var(--space-xxs);padding-right:0.375em;padding-right:var(--space-xxs)}.padding-x-xs{padding-left:0.5em;padding-left:var(--space-xs);padding-right:0.5em;padding-right:var(--space-xs)}.padding-x-sm{padding-left:0.75em;padding-left:var(--space-sm);padding-right:0.75em;padding-right:var(--space-sm)}.padding-x-lg{padding-left:2em;padding-left:var(--space-lg);padding-right:2em;padding-right:var(--space-lg)}.padding-x-xl{padding-left:3.25em;padding-left:var(--space-xl);padding-right:3.25em;padding-right:var(--space-xl)}.padding-x-xxl{padding-left:5.25em;padding-left:var(--space-xxl);padding-right:5.25em;padding-right:var(--space-xxl)}.padding-x-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl);padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-x-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl);padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-x-component{padding-left:1.25em;padding-left:var(--component-padding);padding-right:1.25em;padding-right:var(--component-padding)}.padding-y-md{padding-top:1.25em;padding-top:var(--space-md);padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-y-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs);padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-y-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs);padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-y-xxs{padding-top:0.375em;padding-top:var(--space-xxs);padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-y-xs{padding-top:0.5em;padding-top:var(--space-xs);padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-y-sm{padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-y-lg{padding-top:2em;padding-top:var(--space-lg);padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-y-xl{padding-top:3.25em;padding-top:var(--space-xl);padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-y-xxl{padding-top:5.25em;padding-top:var(--space-xxl);padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-y-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl);padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-y-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl);padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-y-component{padding-top:1.25em;padding-top:var(--component-padding);padding-bottom:1.25em;padding-bottom:var(--component-padding)}@media not all and (min-width: 32rem){.has-padding\@xs{padding:0 !important}}@media not all and (min-width: 48rem){.has-padding\@sm{padding:0 !important}}@media not all and (min-width: 64rem){.has-padding\@md{padding:0 !important}}@media not all and (min-width: 80rem){.has-padding\@lg{padding:0 !important}}@media not all and (min-width: 90rem){.has-padding\@xl{padding:0 !important}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (min-width: 32rem){.text-center\@xs{text-align:center}.text-left\@xs{text-align:left}.text-right\@xs{text-align:right}}@media (min-width: 48rem){.text-center\@sm{text-align:center}.text-left\@sm{text-align:left}.text-right\@sm{text-align:right}}@media (min-width: 64rem){.text-center\@md{text-align:center}.text-left\@md{text-align:left}.text-right\@md{text-align:right}}@media (min-width: 80rem){.text-center\@lg{text-align:center}.text-left\@lg{text-align:left}.text-right\@lg{text-align:right}}@media (min-width: 90rem){.text-center\@xl{text-align:center}.text-left\@xl{text-align:left}.text-right\@xl{text-align:right}}.color-inherit{color:inherit}.color-contrast-medium{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.color-contrast-high{color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}.color-contrast-higher{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.color-primary{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4)}.color-accent{color:hsl(355, 90%, 61%);color:var(--color-accent, #f54251)}.color-success{color:hsl(94, 48%, 56%);color:var(--color-success, #88c559)}.color-warning{color:hsl(46, 100%, 61%);color:var(--color-warning, #ffd138)}.color-error{color:hsl(355, 90%, 61%);color:var(--color-error, #f54251)}.width-100\%{width:100%}.height-100\%{height:100%}.media-wrapper{position:relative;height:0;padding-bottom:56.25%}.media-wrapper iframe,.media-wrapper video,.media-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%}.media-wrapper video,.media-wrapper img{-o-object-fit:cover;object-fit:cover}.media-wrapper--4\:3{padding-bottom:75%}:root,[data-theme="default"]{--color-primary-darker:hsl(220, 90%, 36%);--color-primary-darker-h:220;--color-primary-darker-s:90%;--color-primary-darker-l:36%;--color-primary-dark:hsl(220, 90%, 46%);--color-primary-dark-h:220;--color-primary-dark-s:90%;--color-primary-dark-l:46%;--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-primary-light:hsl(220, 90%, 66%);--color-primary-light-h:220;--color-primary-light-s:90%;--color-primary-light-l:66%;--color-primary-lighter:hsl(220, 90%, 76%);--color-primary-lighter-h:220;--color-primary-lighter-s:90%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(355, 90%, 41%);--color-accent-darker-h:355;--color-accent-darker-s:90%;--color-accent-darker-l:41%;--color-accent-dark:hsl(355, 90%, 51%);--color-accent-dark-h:355;--color-accent-dark-s:90%;--color-accent-dark-l:51%;--color-accent:hsl(355, 90%, 61%);--color-accent-h:355;--color-accent-s:90%;--color-accent-l:61%;--color-accent-light:hsl(355, 90%, 71%);--color-accent-light-h:355;--color-accent-light-s:90%;--color-accent-light-l:71%;--color-accent-lighter:hsl(355, 90%, 81%);--color-accent-lighter-h:355;--color-accent-lighter-s:90%;--color-accent-lighter-l:81%;--color-black:hsl(240, 8%, 12%);--color-black-h:240;--color-black-s:8%;--color-black-l:12%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-success-darker:hsl(94, 48%, 36%);--color-success-darker-h:94;--color-success-darker-s:48%;--color-success-darker-l:36%;--color-success-dark:hsl(94, 48%, 46%);--color-success-dark-h:94;--color-success-dark-s:48%;--color-success-dark-l:46%;--color-success:hsl(94, 48%, 56%);--color-success-h:94;--color-success-s:48%;--color-success-l:56%;--color-success-light:hsl(94, 48%, 66%);--color-success-light-h:94;--color-success-light-s:48%;--color-success-light-l:66%;--color-success-lighter:hsl(94, 48%, 76%);--color-success-lighter-h:94;--color-success-lighter-s:48%;--color-success-lighter-l:76%;--color-error-darker:hsl(355, 90%, 41%);--color-error-darker-h:355;--color-error-darker-s:90%;--color-error-darker-l:41%;--color-error-dark:hsl(355, 90%, 51%);--color-error-dark-h:355;--color-error-dark-s:90%;--color-error-dark-l:51%;--color-error:hsl(355, 90%, 61%);--color-error-h:355;--color-error-s:90%;--color-error-l:61%;--color-error-light:hsl(355, 90%, 71%);--color-error-light-h:355;--color-error-light-s:90%;--color-error-light-l:71%;--color-error-lighter:hsl(355, 90%, 81%);--color-error-lighter-h:355;--color-error-lighter-s:90%;--color-error-lighter-l:81%;--color-warning-darker:hsl(46, 100%, 41%);--color-warning-darker-h:46;--color-warning-darker-s:100%;--color-warning-darker-l:41%;--color-warning-dark:hsl(46, 100%, 51%);--color-warning-dark-h:46;--color-warning-dark-s:100%;--color-warning-dark-l:51%;--color-warning:hsl(46, 100%, 61%);--color-warning-h:46;--color-warning-s:100%;--color-warning-l:61%;--color-warning-light:hsl(46, 100%, 71%);--color-warning-light-h:46;--color-warning-light-s:100%;--color-warning-light-l:71%;--color-warning-lighter:hsl(46, 100%, 81%);--color-warning-lighter-h:46;--color-warning-lighter-s:100%;--color-warning-lighter-l:81%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}@supports (--css: variables){@media (min-width: 64rem){:root{--space-unit: 1.25em}}}:root{--radius: 0.25em}:root{--font-primary: sans-serif;--text-base-size: 1em;--text-scale-ratio: 1.2;--text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));--text-sm: calc(var(--text-xs)*var(--text-scale-ratio));--text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));--text-lg: calc(var(--text-md)*var(--text-scale-ratio));--text-xl: calc(var(--text-lg)*var(--text-scale-ratio));--text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));--text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));--body-line-height: 1.4;--heading-line-height: 1.2;--font-primary-capital-letter: 1}@supports (--css: variables){@media (min-width: 64rem){:root{--text-base-size: 1.25em;--text-scale-ratio: 1.25}}}mark{background-color:hsla(355, 90%, 61%, 0.2);background-color:hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);color:inherit}.text-component{--line-height-multiplier: 1;--text-vspace-multiplier: 1}.text-component blockquote{padding-left:1em;border-left:4px solid hsl(240, 1%, 83%);border-left:4px solid var(--color-contrast-low)}.text-component hr{background:hsl(240, 1%, 83%);background:var(--color-contrast-low);height:1px}.text-component figcaption{font-size:0.83333em;font-size:var(--text-sm);color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.article.text-component{--line-height-multiplier: 1.13;--text-vspace-multiplier: 1.2}:root{--btn-font-size: 1em;--btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);--btn-font-size-md: calc(var(--btn-font-size) + 0.2em);--btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);--btn-radius: 0.25em;--btn-padding-x: var(--space-sm);--btn-padding-y: var(--space-xs)}.btn{--color-shadow: hsla(240, 8%, 12%, 0.15);--color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);box-shadow:0 4px 16px hsla(240, 8%, 12%, 0.15);box-shadow:0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);cursor:pointer}.btn--primary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--accent{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--disabled{opacity:0.6}:root{--form-control-padding-x: var(--space-sm);--form-control-padding-y: var(--space-xs);--form-control-radius: 0.25em}.form-control{border:2px solid hsl(240, 1%, 83%);border:2px solid var(--color-contrast-low)}.form-control:focus{outline:none;border-color:hsl(220, 90%, 56%);border-color:var(--color-primary);--color-shadow: hsla(220, 90%, 56%, 0.2);--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control:focus:focus{box-shadow:0 0 0 3px hsla(220, 90%, 56%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]{border-color:hsl(355, 90%, 61%);border-color:var(--color-error)}.form-control[aria-invalid="true"]:focus{--color-shadow: hsla(355, 90%, 61%, 0.2);--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]:focus:focus{box-shadow:0 0 0 3px hsla(355, 90%, 61%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-label{font-size:0.83333em;font-size:var(--text-sm)}:root{--cd-color-1:hsl(206, 21%, 24%);--cd-color-1-h:206;--cd-color-1-s:21%;--cd-color-1-l:24%;--cd-color-2:hsl(205, 38%, 89%);--cd-color-2-h:205;--cd-color-2-s:38%;--cd-color-2-l:89%;--cd-color-3:hsl(207, 10%, 55%);--cd-color-3-h:207;--cd-color-3-s:10%;--cd-color-3-l:55%;--cd-color-4:hsl(111, 51%, 60%);--cd-color-4-h:111;--cd-color-4-s:51%;--cd-color-4-l:60%;--cd-color-5:hsl(356, 53%, 49%);--cd-color-5-h:356;--cd-color-5-s:53%;--cd-color-5-l:49%;--cd-color-6:hsl(47, 85%, 61%);--cd-color-6-h:47;--cd-color-6-s:85%;--cd-color-6-l:61%;--cd-header-height: 200px;--font-primary: 'Droid Serif', serif;--font-secondary: 'Open Sans', sans-serif}@supports (--css: variables){@media (min-width: 64rem){:root{--cd-header-height: 300px}}}.cd-main-header{height:200px;height:var(--cd-header-height);background:hsl(206, 21%, 24%);background:var(--cd-color-1);color:hsl(0, 0%, 100%);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-main-header h1{font-family:'Open Sans', sans-serif;font-family:var(--font-secondary);color:inherit}.cd-timeline{overflow:hidden;padding:2em 0;padding:var(--space-lg) 0;color:hsl(207, 10%, 55%);color:var(--cd-color-3);background-color:hsl(205, 38%, 93.45%);background-color:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05));font-family:'Droid Serif', serif;font-family:var(--font-primary)}.cd-timeline h2{font-family:'Open Sans', sans-serif;font-family:var(--font-secondary);font-weight:700}.cd-timeline__container{position:relative;padding:1.25em 0;padding:var(--space-md) 0}.cd-timeline__container::before{content:'';position:absolute;top:0;left:18px;height:100%;width:4px;background:hsl(205, 38%, 89%);background:var(--cd-color-2)}@media (min-width: 64rem){.cd-timeline__container::before{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}}.cd-timeline__block{display:-ms-flexbox;display:flex;position:relative;z-index:1;margin-bottom:2em;margin-bottom:var(--space-lg)}.cd-timeline__block:last-child{margin-bottom:0}@media (min-width: 64rem){.cd-timeline__block:nth-child(even){-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.cd-timeline__img{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 4px hsl(0, 0%, 100%),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05);box-shadow:0 0 0 4px var(--color-white),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05)}.cd-timeline__img img{width:24px;height:24px}@media (min-width: 64rem){.cd-timeline__img{width:60px;height:60px;-ms-flex-order:1;order:1;margin-left:calc(5% - 30px);will-change:transform}.cd-timeline__block:nth-child(even) .cd-timeline__img{margin-right:calc(5% - 30px)}}.cd-timeline__img--picture{background-color:hsl(111, 51%, 60%);background-color:var(--cd-color-4)}.cd-timeline__img--movie{background-color:hsl(356, 53%, 49%);background-color:var(--cd-color-5)}.cd-timeline__img--location{background-color:hsl(47, 85%, 61%);background-color:var(--cd-color-6)}.cd-timeline__content{-ms-flex-positive:1;flex-grow:1;position:relative;margin-left:1.25em;margin-left:var(--space-md);background:hsl(0, 0%, 100%);background:var(--color-white);border-radius:0.25em;border-radius:var(--radius-md);padding:1.25em;padding:var(--space-md);box-shadow:0 3px 0 hsl(205, 38%, 89%);box-shadow:0 3px 0 var(--cd-color-2)}.cd-timeline__content::before{content:'';position:absolute;top:16px;right:100%;width:0;height:0;border:7px solid transparent;border-right-color:hsl(0, 0%, 100%);border-right-color:var(--color-white)}.cd-timeline__content h2{color:hsl(206, 21%, 24%);color:var(--cd-color-1)}@media (min-width: 64rem){.cd-timeline__content{width:45%;-ms-flex-positive:0;flex-grow:0;will-change:transform;margin:0;font-size:0.8em;--line-height-multiplier: 1.2}.cd-timeline__content::before{top:24px}.cd-timeline__block:nth-child(odd) .cd-timeline__content::before{right:auto;left:100%;width:0;height:0;border:7px solid transparent;border-left-color:hsl(0, 0%, 100%);border-left-color:var(--color-white)}}.cd-timeline__date{color:hsla(207, 10%, 55%, 0.7);color:hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7)}@media (min-width: 64rem){.cd-timeline__date{position:absolute;width:100%;left:120%;top:20px}.cd-timeline__block:nth-child(even) .cd-timeline__date{left:auto;right:120%;text-align:right}}@media (min-width: 64rem){.cd-timeline__img--hidden,.cd-timeline__content--hidden{visibility:hidden}.cd-timeline__img--bounce-in{-webkit-animation:cd-bounce-1 0.6s;animation:cd-bounce-1 0.6s}.cd-timeline__content--bounce-in{-webkit-animation:cd-bounce-2 0.6s;animation:cd-bounce-2 0.6s}.cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in{-webkit-animation-name:cd-bounce-2-inverse;animation-name:cd-bounce-2-inverse}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} diff --git a/pydis_site/static/images/timeline/cd-icon-location.svg b/pydis_site/static/images/timeline/cd-icon-location.svg new file mode 100755 index 00000000..6128fecd --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-location.svg @@ -0,0 +1,4 @@ + + + diff --git a/pydis_site/static/images/timeline/cd-icon-movie.svg b/pydis_site/static/images/timeline/cd-icon-movie.svg new file mode 100755 index 00000000..498a93fa --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-movie.svg @@ -0,0 +1,4 @@ + + + diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg new file mode 100755 index 00000000..dd5f180b --- /dev/null +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -0,0 +1,5 @@ + + + diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js new file mode 100644 index 00000000..a4bf4f31 --- /dev/null +++ b/pydis_site/static/js/timeline/main.js @@ -0,0 +1,71 @@ +(function(){ + // Vertical Timeline - by CodyHouse.co + function VerticalTimeline( element ) { + this.element = element; + this.blocks = this.element.getElementsByClassName("cd-timeline__block"); + this.images = this.element.getElementsByClassName("cd-timeline__img"); + this.contents = this.element.getElementsByClassName("cd-timeline__content"); + this.offset = 0.8; + this.hideBlocks(); + }; + + VerticalTimeline.prototype.hideBlocks = function() { + if ( !"classList" in document.documentElement ) { + return; // no animation on older browsers + } + //hide timeline blocks which are outside the viewport + var self = this; + for( var i = 0; i < this.blocks.length; i++) { + (function(i){ + if( self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.add("cd-timeline__img--hidden"); + self.contents[i].classList.add("cd-timeline__content--hidden"); + } + })(i); + } + }; + + VerticalTimeline.prototype.showBlocks = function() { + if ( ! "classList" in document.documentElement ) { + return; + } + var self = this; + for( var i = 0; i < this.blocks.length; i++) { + (function(i){ + if( self.contents[i].classList.contains("cd-timeline__content--hidden") && self.blocks[i].getBoundingClientRect().top <= window.innerHeight*self.offset ) { + // add bounce-in animation + self.images[i].classList.add("cd-timeline__img--bounce-in"); + self.contents[i].classList.add("cd-timeline__content--bounce-in"); + self.images[i].classList.remove("cd-timeline__img--hidden"); + self.contents[i].classList.remove("cd-timeline__content--hidden"); + } + })(i); + } + }; + + var verticalTimelines = document.getElementsByClassName("js-cd-timeline"), + verticalTimelinesArray = [], + scrolling = false; + if( verticalTimelines.length > 0 ) { + for( var i = 0; i < verticalTimelines.length; i++) { + (function(i){ + verticalTimelinesArray.push(new VerticalTimeline(verticalTimelines[i])); + })(i); + } + + //show timeline blocks on scrolling + window.addEventListener("scroll", function(event) { + if( !scrolling ) { + scrolling = true; + (!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll); + } + }); + } + + function checkTimelineScroll() { + verticalTimelinesArray.forEach(function(timeline){ + timeline.showBlocks(); + }); + scrolling = false; + }; +})(); -- cgit v1.2.3 From 4006c73b7af293e96f9902c08943df59bbe28228 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:11:01 +0100 Subject: Update page title --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index d9cdd625..b7f7cda9 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -1,7 +1,7 @@ {% extends 'base/base.html' %} {% load static %} -{% block title %}Home{% endblock %} +{% block title %}Timeline{% endblock %} {% block head %} -- cgit v1.2.3 From ec488e6aa5d156521b34d1363aac9fd568a3e7be Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:23:24 +0100 Subject: Prettify CSS --- pydis_site/static/css/home/style.css | 3731 +++++++++++++++++++++++++++++++++- 1 file changed, 3730 insertions(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/style.css b/pydis_site/static/css/home/style.css index 4eaca7c2..7085bf5a 100644 --- a/pydis_site/static/css/home/style.css +++ b/pydis_site/static/css/home/style.css @@ -1 +1,3730 @@ -@import url("https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700");*,*::after,*::before{box-sizing:inherit}*{font:inherit}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,hr{margin:0;padding:0;border:0}html{box-sizing:border-box}body{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, white)}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main,form legend{display:block}ol,ul{list-style:none}blockquote,q{quotes:none}button,input,textarea,select{margin:0}.btn,.form-control,.link,.reset{background-color:transparent;padding:0;border:0;border-radius:0;color:inherit;line-height:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none}select.form-control::-ms-expand{display:none}textarea{resize:vertical;overflow:auto;vertical-align:top}input::-ms-clear{display:none}table{border-collapse:collapse;border-spacing:0}img,video,svg{max-width:100%}[data-theme]{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #fff);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}:root{--space-unit: 1em;--space-xxxxs: calc(0.125*var(--space-unit));--space-xxxs: calc(0.25*var(--space-unit));--space-xxs: calc(0.375*var(--space-unit));--space-xs: calc(0.5*var(--space-unit));--space-sm: calc(0.75*var(--space-unit));--space-md: calc(1.25*var(--space-unit));--space-lg: calc(2*var(--space-unit));--space-xl: calc(3.25*var(--space-unit));--space-xxl: calc(5.25*var(--space-unit));--space-xxxl: calc(8.5*var(--space-unit));--space-xxxxl: calc(13.75*var(--space-unit));--component-padding: var(--space-md)}:root{--max-width-xxs: 32rem;--max-width-xs: 38rem;--max-width-sm: 48rem;--max-width-md: 64rem;--max-width-lg: 80rem;--max-width-xl: 90rem;--max-width-xxl: 120rem}.container{width:calc(100% - 1.25em);width:calc(100% - 2*var(--component-padding));margin-left:auto;margin-right:auto}.max-width-xxs{max-width:32rem;max-width:var(--max-width-xxs)}.max-width-xs{max-width:38rem;max-width:var(--max-width-xs)}.max-width-sm{max-width:48rem;max-width:var(--max-width-sm)}.max-width-md{max-width:64rem;max-width:var(--max-width-md)}.max-width-lg{max-width:80rem;max-width:var(--max-width-lg)}.max-width-xl{max-width:90rem;max-width:var(--max-width-xl)}.max-width-xxl{max-width:120rem;max-width:var(--max-width-xxl)}.max-width-adaptive-sm{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-sm{max-width:48rem;max-width:var(--max-width-sm)}}.max-width-adaptive-md{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-md{max-width:64rem;max-width:var(--max-width-md)}}.max-width-adaptive,.max-width-adaptive-lg{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive,.max-width-adaptive-lg{max-width:80rem;max-width:var(--max-width-lg)}}.max-width-adaptive-xl{max-width:38rem;max-width:var(--max-width-xs)}@media (min-width: 64rem){.max-width-adaptive-xl{max-width:64rem;max-width:var(--max-width-md)}}@media (min-width: 90rem){.max-width-adaptive-xl{max-width:90rem;max-width:var(--max-width-xl)}}.grid{--grid-gap: 0px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.grid>*{-ms-flex-preferred-size:100%;flex-basis:100%}[class*="grid-gap"]{margin-bottom:1em * -1;margin-bottom:calc(var(--grid-gap, 1em)*-1);margin-right:1em * -1;margin-right:calc(var(--grid-gap, 1em)*-1)}[class*="grid-gap"]>*{margin-bottom:1em;margin-bottom:var(--grid-gap, 1em);margin-right:1em;margin-right:var(--grid-gap, 1em)}.grid-gap-xxxxs{--grid-gap: var(--space-xxxxs)}.grid-gap-xxxs{--grid-gap: var(--space-xxxs)}.grid-gap-xxs{--grid-gap: var(--space-xxs)}.grid-gap-xs{--grid-gap: var(--space-xs)}.grid-gap-sm{--grid-gap: var(--space-sm)}.grid-gap-md{--grid-gap: var(--space-md)}.grid-gap-lg{--grid-gap: var(--space-lg)}.grid-gap-xl{--grid-gap: var(--space-xl)}.grid-gap-xxl{--grid-gap: var(--space-xxl)}.grid-gap-xxxl{--grid-gap: var(--space-xxxl)}.grid-gap-xxxxl{--grid-gap: var(--space-xxxxl)}.col{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}@media (min-width: 32rem){.col\@xs{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xs{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xs{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xs{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xs{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xs{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xs{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xs{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xs{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xs{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xs{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xs{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xs{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 48rem){.col\@sm{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@sm{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@sm{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@sm{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@sm{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@sm{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@sm{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@sm{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@sm{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@sm{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@sm{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@sm{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@sm{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 64rem){.col\@md{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@md{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@md{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@md{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@md{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@md{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@md{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@md{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@md{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@md{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@md{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@md{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@md{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 80rem){.col\@lg{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@lg{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@lg{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@lg{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@lg{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@lg{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@lg{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@lg{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@lg{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@lg{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@lg{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@lg{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@lg{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}@media (min-width: 90rem){.col\@xl{-ms-flex-positive:1;flex-grow:1;-ms-flex-preferred-size:0;flex-basis:0;max-width:100%}.col-1\@xl{-ms-flex-preferred-size:calc(8.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(8.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(8.33% - 0.01px - 1em);flex-basis:calc(8.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(8.33% - 0.01px - 1em);max-width:calc(8.33% - 0.01px - var(--grid-gap, 1em))}.col-2\@xl{-ms-flex-preferred-size:calc(16.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(16.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(16.66% - 0.01px - 1em);flex-basis:calc(16.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(16.66% - 0.01px - 1em);max-width:calc(16.66% - 0.01px - var(--grid-gap, 1em))}.col-3\@xl{-ms-flex-preferred-size:calc(25% - 0.01px - 1em);-ms-flex-preferred-size:calc(25% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(25% - 0.01px - 1em);flex-basis:calc(25% - 0.01px - var(--grid-gap, 1em));max-width:calc(25% - 0.01px - 1em);max-width:calc(25% - 0.01px - var(--grid-gap, 1em))}.col-4\@xl{-ms-flex-preferred-size:calc(33.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(33.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(33.33% - 0.01px - 1em);flex-basis:calc(33.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(33.33% - 0.01px - 1em);max-width:calc(33.33% - 0.01px - var(--grid-gap, 1em))}.col-5\@xl{-ms-flex-preferred-size:calc(41.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(41.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(41.66% - 0.01px - 1em);flex-basis:calc(41.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(41.66% - 0.01px - 1em);max-width:calc(41.66% - 0.01px - var(--grid-gap, 1em))}.col-6\@xl{-ms-flex-preferred-size:calc(50% - 0.01px - 1em);-ms-flex-preferred-size:calc(50% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(50% - 0.01px - 1em);flex-basis:calc(50% - 0.01px - var(--grid-gap, 1em));max-width:calc(50% - 0.01px - 1em);max-width:calc(50% - 0.01px - var(--grid-gap, 1em))}.col-7\@xl{-ms-flex-preferred-size:calc(58.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(58.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(58.33% - 0.01px - 1em);flex-basis:calc(58.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(58.33% - 0.01px - 1em);max-width:calc(58.33% - 0.01px - var(--grid-gap, 1em))}.col-8\@xl{-ms-flex-preferred-size:calc(66.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(66.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(66.66% - 0.01px - 1em);flex-basis:calc(66.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(66.66% - 0.01px - 1em);max-width:calc(66.66% - 0.01px - var(--grid-gap, 1em))}.col-9\@xl{-ms-flex-preferred-size:calc(75% - 0.01px - 1em);-ms-flex-preferred-size:calc(75% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(75% - 0.01px - 1em);flex-basis:calc(75% - 0.01px - var(--grid-gap, 1em));max-width:calc(75% - 0.01px - 1em);max-width:calc(75% - 0.01px - var(--grid-gap, 1em))}.col-10\@xl{-ms-flex-preferred-size:calc(83.33% - 0.01px - 1em);-ms-flex-preferred-size:calc(83.33% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(83.33% - 0.01px - 1em);flex-basis:calc(83.33% - 0.01px - var(--grid-gap, 1em));max-width:calc(83.33% - 0.01px - 1em);max-width:calc(83.33% - 0.01px - var(--grid-gap, 1em))}.col-11\@xl{-ms-flex-preferred-size:calc(91.66% - 0.01px - 1em);-ms-flex-preferred-size:calc(91.66% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(91.66% - 0.01px - 1em);flex-basis:calc(91.66% - 0.01px - var(--grid-gap, 1em));max-width:calc(91.66% - 0.01px - 1em);max-width:calc(91.66% - 0.01px - var(--grid-gap, 1em))}.col-12\@xl{-ms-flex-preferred-size:calc(100% - 0.01px - 1em);-ms-flex-preferred-size:calc(100% - 0.01px - var(--grid-gap, 1em));flex-basis:calc(100% - 0.01px - 1em);flex-basis:calc(100% - 0.01px - var(--grid-gap, 1em));max-width:calc(100% - 0.01px - 1em);max-width:calc(100% - 0.01px - var(--grid-gap, 1em))}}:root{--radius-sm: calc(var(--radius, 0.25em)/2);--radius-md: var(--radius, 0.25em);--radius-lg: calc(var(--radius, 0.25em)*2);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1);--shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15);--shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1);--bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);--ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);--ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);--ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)}:root{--body-line-height: 1.4;--heading-line-height: 1.2}body{font-size:1em;font-size:var(--text-base-size, 1em);font-family:'Droid Serif', serif;font-family:var(--font-primary, sans-serif);color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}h1,h2,h3,h4{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;line-height:var(--heading-line-height, 1.2)}.text-xxxl{font-size:2.48832em;font-size:var(--text-xxxl, 2.488em)}h1,.text-xxl{font-size:2.0736em;font-size:var(--text-xxl, 2.074em)}h2,.text-xl{font-size:1.728em;font-size:var(--text-xl, 1.728em)}h3,.text-lg{font-size:1.44em;font-size:var(--text-lg, 1.44em)}h4,.text-md{font-size:1.2em;font-size:var(--text-md, 1.2em)}small,.text-sm{font-size:0.83333em;font-size:var(--text-sm, 0.833em)}.text-xs{font-size:0.69444em;font-size:var(--text-xs, 0.694em)}a,.link{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4);text-decoration:underline}strong,.text-bold{font-weight:bold}s{text-decoration:line-through}u,.text-underline{text-decoration:underline}.text-component{--component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1));--component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1))}.text-component h1,.text-component h2,.text-component h3,.text-component h4{line-height:1.2;line-height:var(--component-heading-line-height, 1.2);margin-bottom:0.25em;margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1))}.text-component h2,.text-component h3,.text-component h4{margin-top:0.75em;margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component p,.text-component blockquote,.text-component ul li,.text-component ol li{line-height:1.4;line-height:var(--component-body-line-height)}.text-component ul,.text-component ol,.text-component p,.text-component blockquote,.text-component .text-component__block{margin-bottom:0.75em;margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component ul,.text-component ol{padding-left:1em}.text-component ul{list-style-type:disc}.text-component ol{list-style-type:decimal}.text-component img{display:block;margin:0 auto}.text-component figcaption{text-align:center;margin-top:0.5em;margin-top:var(--space-xs)}.text-component em{font-style:italic}.text-component hr{margin-top:2em;margin-top:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-bottom:2em;margin-bottom:calc(var(--space-lg)*var(--text-vspace-multiplier, 1));margin-left:auto;margin-right:auto}.text-component>*:first-child{margin-top:0}.text-component>*:last-child{margin-bottom:0}.text-component__block--full-width{width:100vw;margin-left:calc(50% - 50vw)}@media (min-width: 48rem){.text-component__block--left,.text-component__block--right{width:45%}.text-component__block--left img,.text-component__block--right img{width:100%}.text-component__block--left{float:left;margin-right:0.75em;margin-right:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}.text-component__block--right{float:right;margin-left:0.75em;margin-left:calc(var(--space-sm)*var(--text-vspace-multiplier, 1))}}@media (min-width: 90rem){.text-component__block--outset{width:calc(100% + 10.5em);width:calc(100% + 2*var(--space-xxl))}.text-component__block--outset img{width:100%}.text-component__block--outset:not(.text-component__block--right){margin-left:-5.25em;margin-left:calc(-1*var(--space-xxl))}.text-component__block--left,.text-component__block--right{width:50%}.text-component__block--right.text-component__block--outset{margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}}:root{--icon-xxs: 12px;--icon-xs: 16px;--icon-sm: 24px;--icon-md: 32px;--icon-lg: 48px;--icon-xl: 64px;--icon-xxl: 128px}.icon{display:inline-block;color:inherit;fill:currentColor;height:1em;width:1em;line-height:1;-ms-flex-negative:0;flex-shrink:0}.icon--xxs{font-size:12px;font-size:var(--icon-xxs)}.icon--xs{font-size:16px;font-size:var(--icon-xs)}.icon--sm{font-size:24px;font-size:var(--icon-sm)}.icon--md{font-size:32px;font-size:var(--icon-md)}.icon--lg{font-size:48px;font-size:var(--icon-lg)}.icon--xl{font-size:64px;font-size:var(--icon-xl)}.icon--xxl{font-size:128px;font-size:var(--icon-xxl)}.icon--is-spinning{-webkit-animation:icon-spin 1s infinite linear;animation:icon-spin 1s infinite linear}@-webkit-keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes icon-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.icon use{color:inherit;fill:currentColor}.btn{position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;white-space:nowrap;text-decoration:none;line-height:1;font-size:1em;font-size:var(--btn-font-size, 1em);padding-top:0.5em;padding-top:var(--btn-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--btn-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--btn-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--btn-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--btn-radius, 0.25em)}.btn--primary{background-color:hsl(220, 90%, 56%);background-color:var(--color-primary, #2a6df4);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--subtle{background-color:hsl(240, 1%, 83%);background-color:var(--color-contrast-low, #d3d3d4);color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.btn--accent{background-color:hsl(355, 90%, 61%);background-color:var(--color-accent, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff)}.btn--disabled{cursor:not-allowed}.btn--sm{font-size:0.8em;font-size:var(--btn-font-size-sm, 0.8em)}.btn--md{font-size:1.2em;font-size:var(--btn-font-size-md, 1.2em)}.btn--lg{font-size:1.4em;font-size:var(--btn-font-size-lg, 1.4em)}.btn--icon{padding:0.5em;padding:var(--btn-padding-y, 0.5em)}.form-control{background-color:hsl(0, 0%, 100%);background-color:var(--color-bg, #f2f2f2);padding-top:0.5em;padding-top:var(--form-control-padding-y, 0.5em);padding-bottom:0.5em;padding-bottom:var(--form-control-padding-y, 0.5em);padding-left:0.75em;padding-left:var(--form-control-padding-x, 0.75em);padding-right:0.75em;padding-right:var(--form-control-padding-x, 0.75em);border-radius:0.25em;border-radius:var(--form-control-radius, 0.25em)}.form-control::-webkit-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control::-moz-placeholder{opacity:1;color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-ms-input-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control:-moz-placeholder{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.form-control[disabled],.form-control[readonly]{cursor:not-allowed}.form-legend{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21);line-height:1.2;font-size:1.2em;font-size:var(--text-md, 1.2em);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.form-label{display:inline-block}.form__msg-error{background-color:hsl(355, 90%, 61%);background-color:var(--color-error, #f54251);color:hsl(0, 0%, 100%);color:var(--color-white, #fff);font-size:0.83333em;font-size:var(--text-sm, 0.833em);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;padding:0.5em;padding:var(--space-xs);margin-top:0.75em;margin-top:var(--space-sm);border-radius:0.25em;border-radius:var(--radius-md, 0.25em);position:absolute;clip:rect(1px, 1px, 1px, 1px)}.form__msg-error::before{content:'';position:absolute;left:0.75em;left:var(--space-sm);top:0;-webkit-transform:translateY(-100%);-ms-transform:translateY(-100%);transform:translateY(-100%);width:0;height:0;border:8px solid transparent;border-bottom-color:hsl(355, 90%, 61%);border-bottom-color:var(--color-error)}.form__msg-error--is-visible{position:relative;clip:auto}.radio-list>*,.checkbox-list>*{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:baseline;align-items:baseline;margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.radio-list>*:last-of-type,.checkbox-list>*:last-of-type{margin-bottom:0}.radio-list label,.checkbox-list label{line-height:1.4;line-height:var(--body-line-height);-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.radio-list input,.checkbox-list input{vertical-align:top;margin-right:0.25em;margin-right:var(--space-xxxs);-ms-flex-negative:0;flex-shrink:0}:root{--zindex-header: 2;--zindex-popover: 5;--zindex-fixed-element: 10;--zindex-overlay: 15}@media not all and (min-width: 32rem){.display\@xs{display:none !important}}@media (min-width: 32rem){.hide\@xs{display:none !important}}@media not all and (min-width: 48rem){.display\@sm{display:none !important}}@media (min-width: 48rem){.hide\@sm{display:none !important}}@media not all and (min-width: 64rem){.display\@md{display:none !important}}@media (min-width: 64rem){.hide\@md{display:none !important}}@media not all and (min-width: 80rem){.display\@lg{display:none !important}}@media (min-width: 80rem){.hide\@lg{display:none !important}}@media not all and (min-width: 90rem){.display\@xl{display:none !important}}@media (min-width: 90rem){.hide\@xl{display:none !important}}:root{--display: block}.is-visible{display:block !important;display:var(--display) !important}.is-hidden{display:none !important}.sr-only{position:absolute;clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;border:0;white-space:nowrap}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column{-ms-flex-direction:column;flex-direction:column}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-center{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start{-ms-flex-pack:start;justify-content:flex-start}.justify-end{-ms-flex-pack:end;justify-content:flex-end}.justify-center{-ms-flex-pack:center;justify-content:center}.justify-between{-ms-flex-pack:justify;justify-content:space-between}.items-center{-ms-flex-align:center;align-items:center}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}@media (min-width: 32rem){.flex-wrap\@xs{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xs{-ms-flex-direction:column;flex-direction:column}.flex-row\@xs{-ms-flex-direction:row;flex-direction:row}.flex-center\@xs{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xs{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xs{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xs{-ms-flex-pack:center;justify-content:center}.justify-between\@xs{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xs{-ms-flex-align:center;align-items:center}.items-start\@xs{-ms-flex-align:start;align-items:flex-start}.items-end\@xs{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 48rem){.flex-wrap\@sm{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@sm{-ms-flex-direction:column;flex-direction:column}.flex-row\@sm{-ms-flex-direction:row;flex-direction:row}.flex-center\@sm{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@sm{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@sm{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@sm{-ms-flex-pack:center;justify-content:center}.justify-between\@sm{-ms-flex-pack:justify;justify-content:space-between}.items-center\@sm{-ms-flex-align:center;align-items:center}.items-start\@sm{-ms-flex-align:start;align-items:flex-start}.items-end\@sm{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 64rem){.flex-wrap\@md{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@md{-ms-flex-direction:column;flex-direction:column}.flex-row\@md{-ms-flex-direction:row;flex-direction:row}.flex-center\@md{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@md{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@md{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@md{-ms-flex-pack:center;justify-content:center}.justify-between\@md{-ms-flex-pack:justify;justify-content:space-between}.items-center\@md{-ms-flex-align:center;align-items:center}.items-start\@md{-ms-flex-align:start;align-items:flex-start}.items-end\@md{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 80rem){.flex-wrap\@lg{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@lg{-ms-flex-direction:column;flex-direction:column}.flex-row\@lg{-ms-flex-direction:row;flex-direction:row}.flex-center\@lg{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@lg{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@lg{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@lg{-ms-flex-pack:center;justify-content:center}.justify-between\@lg{-ms-flex-pack:justify;justify-content:space-between}.items-center\@lg{-ms-flex-align:center;align-items:center}.items-start\@lg{-ms-flex-align:start;align-items:flex-start}.items-end\@lg{-ms-flex-align:end;align-items:flex-end}}@media (min-width: 90rem){.flex-wrap\@xl{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-column\@xl{-ms-flex-direction:column;flex-direction:column}.flex-row\@xl{-ms-flex-direction:row;flex-direction:row}.flex-center\@xl{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.justify-start\@xl{-ms-flex-pack:start;justify-content:flex-start}.justify-end\@xl{-ms-flex-pack:end;justify-content:flex-end}.justify-center\@xl{-ms-flex-pack:center;justify-content:center}.justify-between\@xl{-ms-flex-pack:justify;justify-content:space-between}.items-center\@xl{-ms-flex-align:center;align-items:center}.items-start\@xl{-ms-flex-align:start;align-items:flex-start}.items-end\@xl{-ms-flex-align:end;align-items:flex-end}}.flex-grow{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.flex-gap-xxxs{margin-bottom:-0.25em;margin-bottom:calc(-1*var(--space-xxxs));margin-right:-0.25em;margin-right:calc(-1*var(--space-xxxs))}.flex-gap-xxxs>*{margin-bottom:0.25em;margin-bottom:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.flex-gap-xxs{margin-bottom:-0.375em;margin-bottom:calc(-1*var(--space-xxs));margin-right:-0.375em;margin-right:calc(-1*var(--space-xxs))}.flex-gap-xxs>*{margin-bottom:0.375em;margin-bottom:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.flex-gap-xs{margin-bottom:-0.5em;margin-bottom:calc(-1*var(--space-xs));margin-right:-0.5em;margin-right:calc(-1*var(--space-xs))}.flex-gap-xs>*{margin-bottom:0.5em;margin-bottom:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.flex-gap-sm{margin-bottom:-0.75em;margin-bottom:calc(-1*var(--space-sm));margin-right:-0.75em;margin-right:calc(-1*var(--space-sm))}.flex-gap-sm>*{margin-bottom:0.75em;margin-bottom:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.flex-gap-md{margin-bottom:-1.25em;margin-bottom:calc(-1*var(--space-md));margin-right:-1.25em;margin-right:calc(-1*var(--space-md))}.flex-gap-md>*{margin-bottom:1.25em;margin-bottom:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.flex-gap-lg{margin-bottom:-2em;margin-bottom:calc(-1*var(--space-lg));margin-right:-2em;margin-right:calc(-1*var(--space-lg))}.flex-gap-lg>*{margin-bottom:2em;margin-bottom:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.flex-gap-xl{margin-bottom:-3.25em;margin-bottom:calc(-1*var(--space-xl));margin-right:-3.25em;margin-right:calc(-1*var(--space-xl))}.flex-gap-xl>*{margin-bottom:3.25em;margin-bottom:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.flex-gap-xxl{margin-bottom:-5.25em;margin-bottom:calc(-1*var(--space-xxl));margin-right:-5.25em;margin-right:calc(-1*var(--space-xxl))}.flex-gap-xxl>*{margin-bottom:5.25em;margin-bottom:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-xxxxs{margin:0.125em;margin:var(--space-xxxxs)}.margin-xxxs{margin:0.25em;margin:var(--space-xxxs)}.margin-xxs{margin:0.375em;margin:var(--space-xxs)}.margin-xs{margin:0.5em;margin:var(--space-xs)}.margin-sm{margin:0.75em;margin:var(--space-sm)}.margin-md{margin:1.25em;margin:var(--space-md)}.margin-lg{margin:2em;margin:var(--space-lg)}.margin-xl{margin:3.25em;margin:var(--space-xl)}.margin-xxl{margin:5.25em;margin:var(--space-xxl)}.margin-xxxl{margin:8.5em;margin:var(--space-xxxl)}.margin-xxxxl{margin:13.75em;margin:var(--space-xxxxl)}.margin-auto{margin:auto}.margin-top-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs)}.margin-top-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs)}.margin-top-xxs{margin-top:0.375em;margin-top:var(--space-xxs)}.margin-top-xs{margin-top:0.5em;margin-top:var(--space-xs)}.margin-top-sm{margin-top:0.75em;margin-top:var(--space-sm)}.margin-top-md{margin-top:1.25em;margin-top:var(--space-md)}.margin-top-lg{margin-top:2em;margin-top:var(--space-lg)}.margin-top-xl{margin-top:3.25em;margin-top:var(--space-xl)}.margin-top-xxl{margin-top:5.25em;margin-top:var(--space-xxl)}.margin-top-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl)}.margin-top-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl)}.margin-top-auto{margin-top:auto}.margin-bottom-xxxxs{margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-bottom-xxxs{margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-bottom-xxs{margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-bottom-xs{margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-bottom-sm{margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-bottom-md{margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-bottom-lg{margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-bottom-xl{margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-bottom-xxl{margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-bottom-xxxl{margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-bottom-xxxxl{margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-bottom-auto{margin-bottom:auto}.margin-right-xxxxs{margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-right-xxxs{margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-right-xxs{margin-right:0.375em;margin-right:var(--space-xxs)}.margin-right-xs{margin-right:0.5em;margin-right:var(--space-xs)}.margin-right-sm{margin-right:0.75em;margin-right:var(--space-sm)}.margin-right-md{margin-right:1.25em;margin-right:var(--space-md)}.margin-right-lg{margin-right:2em;margin-right:var(--space-lg)}.margin-right-xl{margin-right:3.25em;margin-right:var(--space-xl)}.margin-right-xxl{margin-right:5.25em;margin-right:var(--space-xxl)}.margin-right-xxxl{margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-right-xxxxl{margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-right-auto{margin-right:auto}.margin-left-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs)}.margin-left-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs)}.margin-left-xxs{margin-left:0.375em;margin-left:var(--space-xxs)}.margin-left-xs{margin-left:0.5em;margin-left:var(--space-xs)}.margin-left-sm{margin-left:0.75em;margin-left:var(--space-sm)}.margin-left-md{margin-left:1.25em;margin-left:var(--space-md)}.margin-left-lg{margin-left:2em;margin-left:var(--space-lg)}.margin-left-xl{margin-left:3.25em;margin-left:var(--space-xl)}.margin-left-xxl{margin-left:5.25em;margin-left:var(--space-xxl)}.margin-left-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl)}.margin-left-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl)}.margin-left-auto{margin-left:auto}.margin-x-xxxxs{margin-left:0.125em;margin-left:var(--space-xxxxs);margin-right:0.125em;margin-right:var(--space-xxxxs)}.margin-x-xxxs{margin-left:0.25em;margin-left:var(--space-xxxs);margin-right:0.25em;margin-right:var(--space-xxxs)}.margin-x-xxs{margin-left:0.375em;margin-left:var(--space-xxs);margin-right:0.375em;margin-right:var(--space-xxs)}.margin-x-xs{margin-left:0.5em;margin-left:var(--space-xs);margin-right:0.5em;margin-right:var(--space-xs)}.margin-x-sm{margin-left:0.75em;margin-left:var(--space-sm);margin-right:0.75em;margin-right:var(--space-sm)}.margin-x-md{margin-left:1.25em;margin-left:var(--space-md);margin-right:1.25em;margin-right:var(--space-md)}.margin-x-lg{margin-left:2em;margin-left:var(--space-lg);margin-right:2em;margin-right:var(--space-lg)}.margin-x-xl{margin-left:3.25em;margin-left:var(--space-xl);margin-right:3.25em;margin-right:var(--space-xl)}.margin-x-xxl{margin-left:5.25em;margin-left:var(--space-xxl);margin-right:5.25em;margin-right:var(--space-xxl)}.margin-x-xxxl{margin-left:8.5em;margin-left:var(--space-xxxl);margin-right:8.5em;margin-right:var(--space-xxxl)}.margin-x-xxxxl{margin-left:13.75em;margin-left:var(--space-xxxxl);margin-right:13.75em;margin-right:var(--space-xxxxl)}.margin-x-auto{margin-left:auto;margin-right:auto}.margin-y-xxxxs{margin-top:0.125em;margin-top:var(--space-xxxxs);margin-bottom:0.125em;margin-bottom:var(--space-xxxxs)}.margin-y-xxxs{margin-top:0.25em;margin-top:var(--space-xxxs);margin-bottom:0.25em;margin-bottom:var(--space-xxxs)}.margin-y-xxs{margin-top:0.375em;margin-top:var(--space-xxs);margin-bottom:0.375em;margin-bottom:var(--space-xxs)}.margin-y-xs{margin-top:0.5em;margin-top:var(--space-xs);margin-bottom:0.5em;margin-bottom:var(--space-xs)}.margin-y-sm{margin-top:0.75em;margin-top:var(--space-sm);margin-bottom:0.75em;margin-bottom:var(--space-sm)}.margin-y-md{margin-top:1.25em;margin-top:var(--space-md);margin-bottom:1.25em;margin-bottom:var(--space-md)}.margin-y-lg{margin-top:2em;margin-top:var(--space-lg);margin-bottom:2em;margin-bottom:var(--space-lg)}.margin-y-xl{margin-top:3.25em;margin-top:var(--space-xl);margin-bottom:3.25em;margin-bottom:var(--space-xl)}.margin-y-xxl{margin-top:5.25em;margin-top:var(--space-xxl);margin-bottom:5.25em;margin-bottom:var(--space-xxl)}.margin-y-xxxl{margin-top:8.5em;margin-top:var(--space-xxxl);margin-bottom:8.5em;margin-bottom:var(--space-xxxl)}.margin-y-xxxxl{margin-top:13.75em;margin-top:var(--space-xxxxl);margin-bottom:13.75em;margin-bottom:var(--space-xxxxl)}.margin-y-auto{margin-top:auto;margin-bottom:auto}@media not all and (min-width: 32rem){.has-margin\@xs{margin:0 !important}}@media not all and (min-width: 48rem){.has-margin\@sm{margin:0 !important}}@media not all and (min-width: 64rem){.has-margin\@md{margin:0 !important}}@media not all and (min-width: 80rem){.has-margin\@lg{margin:0 !important}}@media not all and (min-width: 90rem){.has-margin\@xl{margin:0 !important}}.padding-md{padding:1.25em;padding:var(--space-md)}.padding-xxxxs{padding:0.125em;padding:var(--space-xxxxs)}.padding-xxxs{padding:0.25em;padding:var(--space-xxxs)}.padding-xxs{padding:0.375em;padding:var(--space-xxs)}.padding-xs{padding:0.5em;padding:var(--space-xs)}.padding-sm{padding:0.75em;padding:var(--space-sm)}.padding-lg{padding:2em;padding:var(--space-lg)}.padding-xl{padding:3.25em;padding:var(--space-xl)}.padding-xxl{padding:5.25em;padding:var(--space-xxl)}.padding-xxxl{padding:8.5em;padding:var(--space-xxxl)}.padding-xxxxl{padding:13.75em;padding:var(--space-xxxxl)}.padding-component{padding:1.25em;padding:var(--component-padding)}.padding-top-md{padding-top:1.25em;padding-top:var(--space-md)}.padding-top-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs)}.padding-top-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs)}.padding-top-xxs{padding-top:0.375em;padding-top:var(--space-xxs)}.padding-top-xs{padding-top:0.5em;padding-top:var(--space-xs)}.padding-top-sm{padding-top:0.75em;padding-top:var(--space-sm)}.padding-top-lg{padding-top:2em;padding-top:var(--space-lg)}.padding-top-xl{padding-top:3.25em;padding-top:var(--space-xl)}.padding-top-xxl{padding-top:5.25em;padding-top:var(--space-xxl)}.padding-top-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl)}.padding-top-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl)}.padding-top-component{padding-top:1.25em;padding-top:var(--component-padding)}.padding-bottom-md{padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-bottom-xxxxs{padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-bottom-xxxs{padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-bottom-xxs{padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-bottom-xs{padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-bottom-sm{padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-bottom-lg{padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-bottom-xl{padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-bottom-xxl{padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-bottom-xxxl{padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-bottom-xxxxl{padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-bottom-component{padding-bottom:1.25em;padding-bottom:var(--component-padding)}.padding-right-md{padding-right:1.25em;padding-right:var(--space-md)}.padding-right-xxxxs{padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-right-xxxs{padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-right-xxs{padding-right:0.375em;padding-right:var(--space-xxs)}.padding-right-xs{padding-right:0.5em;padding-right:var(--space-xs)}.padding-right-sm{padding-right:0.75em;padding-right:var(--space-sm)}.padding-right-lg{padding-right:2em;padding-right:var(--space-lg)}.padding-right-xl{padding-right:3.25em;padding-right:var(--space-xl)}.padding-right-xxl{padding-right:5.25em;padding-right:var(--space-xxl)}.padding-right-xxxl{padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-right-xxxxl{padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-right-component{padding-right:1.25em;padding-right:var(--component-padding)}.padding-left-md{padding-left:1.25em;padding-left:var(--space-md)}.padding-left-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs)}.padding-left-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs)}.padding-left-xxs{padding-left:0.375em;padding-left:var(--space-xxs)}.padding-left-xs{padding-left:0.5em;padding-left:var(--space-xs)}.padding-left-sm{padding-left:0.75em;padding-left:var(--space-sm)}.padding-left-lg{padding-left:2em;padding-left:var(--space-lg)}.padding-left-xl{padding-left:3.25em;padding-left:var(--space-xl)}.padding-left-xxl{padding-left:5.25em;padding-left:var(--space-xxl)}.padding-left-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl)}.padding-left-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl)}.padding-left-component{padding-left:1.25em;padding-left:var(--component-padding)}.padding-x-md{padding-left:1.25em;padding-left:var(--space-md);padding-right:1.25em;padding-right:var(--space-md)}.padding-x-xxxxs{padding-left:0.125em;padding-left:var(--space-xxxxs);padding-right:0.125em;padding-right:var(--space-xxxxs)}.padding-x-xxxs{padding-left:0.25em;padding-left:var(--space-xxxs);padding-right:0.25em;padding-right:var(--space-xxxs)}.padding-x-xxs{padding-left:0.375em;padding-left:var(--space-xxs);padding-right:0.375em;padding-right:var(--space-xxs)}.padding-x-xs{padding-left:0.5em;padding-left:var(--space-xs);padding-right:0.5em;padding-right:var(--space-xs)}.padding-x-sm{padding-left:0.75em;padding-left:var(--space-sm);padding-right:0.75em;padding-right:var(--space-sm)}.padding-x-lg{padding-left:2em;padding-left:var(--space-lg);padding-right:2em;padding-right:var(--space-lg)}.padding-x-xl{padding-left:3.25em;padding-left:var(--space-xl);padding-right:3.25em;padding-right:var(--space-xl)}.padding-x-xxl{padding-left:5.25em;padding-left:var(--space-xxl);padding-right:5.25em;padding-right:var(--space-xxl)}.padding-x-xxxl{padding-left:8.5em;padding-left:var(--space-xxxl);padding-right:8.5em;padding-right:var(--space-xxxl)}.padding-x-xxxxl{padding-left:13.75em;padding-left:var(--space-xxxxl);padding-right:13.75em;padding-right:var(--space-xxxxl)}.padding-x-component{padding-left:1.25em;padding-left:var(--component-padding);padding-right:1.25em;padding-right:var(--component-padding)}.padding-y-md{padding-top:1.25em;padding-top:var(--space-md);padding-bottom:1.25em;padding-bottom:var(--space-md)}.padding-y-xxxxs{padding-top:0.125em;padding-top:var(--space-xxxxs);padding-bottom:0.125em;padding-bottom:var(--space-xxxxs)}.padding-y-xxxs{padding-top:0.25em;padding-top:var(--space-xxxs);padding-bottom:0.25em;padding-bottom:var(--space-xxxs)}.padding-y-xxs{padding-top:0.375em;padding-top:var(--space-xxs);padding-bottom:0.375em;padding-bottom:var(--space-xxs)}.padding-y-xs{padding-top:0.5em;padding-top:var(--space-xs);padding-bottom:0.5em;padding-bottom:var(--space-xs)}.padding-y-sm{padding-top:0.75em;padding-top:var(--space-sm);padding-bottom:0.75em;padding-bottom:var(--space-sm)}.padding-y-lg{padding-top:2em;padding-top:var(--space-lg);padding-bottom:2em;padding-bottom:var(--space-lg)}.padding-y-xl{padding-top:3.25em;padding-top:var(--space-xl);padding-bottom:3.25em;padding-bottom:var(--space-xl)}.padding-y-xxl{padding-top:5.25em;padding-top:var(--space-xxl);padding-bottom:5.25em;padding-bottom:var(--space-xxl)}.padding-y-xxxl{padding-top:8.5em;padding-top:var(--space-xxxl);padding-bottom:8.5em;padding-bottom:var(--space-xxxl)}.padding-y-xxxxl{padding-top:13.75em;padding-top:var(--space-xxxxl);padding-bottom:13.75em;padding-bottom:var(--space-xxxxl)}.padding-y-component{padding-top:1.25em;padding-top:var(--component-padding);padding-bottom:1.25em;padding-bottom:var(--component-padding)}@media not all and (min-width: 32rem){.has-padding\@xs{padding:0 !important}}@media not all and (min-width: 48rem){.has-padding\@sm{padding:0 !important}}@media not all and (min-width: 64rem){.has-padding\@md{padding:0 !important}}@media not all and (min-width: 80rem){.has-padding\@lg{padding:0 !important}}@media not all and (min-width: 90rem){.has-padding\@xl{padding:0 !important}}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-replace{overflow:hidden;color:transparent;text-indent:100%;white-space:nowrap}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (min-width: 32rem){.text-center\@xs{text-align:center}.text-left\@xs{text-align:left}.text-right\@xs{text-align:right}}@media (min-width: 48rem){.text-center\@sm{text-align:center}.text-left\@sm{text-align:left}.text-right\@sm{text-align:right}}@media (min-width: 64rem){.text-center\@md{text-align:center}.text-left\@md{text-align:left}.text-right\@md{text-align:right}}@media (min-width: 80rem){.text-center\@lg{text-align:center}.text-left\@lg{text-align:left}.text-right\@lg{text-align:right}}@media (min-width: 90rem){.text-center\@xl{text-align:center}.text-left\@xl{text-align:left}.text-right\@xl{text-align:right}}.color-inherit{color:inherit}.color-contrast-medium{color:hsl(240, 1%, 48%);color:var(--color-contrast-medium, #79797c)}.color-contrast-high{color:hsl(240, 4%, 20%);color:var(--color-contrast-high, #313135)}.color-contrast-higher{color:hsl(240, 8%, 12%);color:var(--color-contrast-higher, #1c1c21)}.color-primary{color:hsl(220, 90%, 56%);color:var(--color-primary, #2a6df4)}.color-accent{color:hsl(355, 90%, 61%);color:var(--color-accent, #f54251)}.color-success{color:hsl(94, 48%, 56%);color:var(--color-success, #88c559)}.color-warning{color:hsl(46, 100%, 61%);color:var(--color-warning, #ffd138)}.color-error{color:hsl(355, 90%, 61%);color:var(--color-error, #f54251)}.width-100\%{width:100%}.height-100\%{height:100%}.media-wrapper{position:relative;height:0;padding-bottom:56.25%}.media-wrapper iframe,.media-wrapper video,.media-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%}.media-wrapper video,.media-wrapper img{-o-object-fit:cover;object-fit:cover}.media-wrapper--4\:3{padding-bottom:75%}:root,[data-theme="default"]{--color-primary-darker:hsl(220, 90%, 36%);--color-primary-darker-h:220;--color-primary-darker-s:90%;--color-primary-darker-l:36%;--color-primary-dark:hsl(220, 90%, 46%);--color-primary-dark-h:220;--color-primary-dark-s:90%;--color-primary-dark-l:46%;--color-primary:hsl(220, 90%, 56%);--color-primary-h:220;--color-primary-s:90%;--color-primary-l:56%;--color-primary-light:hsl(220, 90%, 66%);--color-primary-light-h:220;--color-primary-light-s:90%;--color-primary-light-l:66%;--color-primary-lighter:hsl(220, 90%, 76%);--color-primary-lighter-h:220;--color-primary-lighter-s:90%;--color-primary-lighter-l:76%;--color-accent-darker:hsl(355, 90%, 41%);--color-accent-darker-h:355;--color-accent-darker-s:90%;--color-accent-darker-l:41%;--color-accent-dark:hsl(355, 90%, 51%);--color-accent-dark-h:355;--color-accent-dark-s:90%;--color-accent-dark-l:51%;--color-accent:hsl(355, 90%, 61%);--color-accent-h:355;--color-accent-s:90%;--color-accent-l:61%;--color-accent-light:hsl(355, 90%, 71%);--color-accent-light-h:355;--color-accent-light-s:90%;--color-accent-light-l:71%;--color-accent-lighter:hsl(355, 90%, 81%);--color-accent-lighter-h:355;--color-accent-lighter-s:90%;--color-accent-lighter-l:81%;--color-black:hsl(240, 8%, 12%);--color-black-h:240;--color-black-s:8%;--color-black-l:12%;--color-white:hsl(0, 0%, 100%);--color-white-h:0;--color-white-s:0%;--color-white-l:100%;--color-success-darker:hsl(94, 48%, 36%);--color-success-darker-h:94;--color-success-darker-s:48%;--color-success-darker-l:36%;--color-success-dark:hsl(94, 48%, 46%);--color-success-dark-h:94;--color-success-dark-s:48%;--color-success-dark-l:46%;--color-success:hsl(94, 48%, 56%);--color-success-h:94;--color-success-s:48%;--color-success-l:56%;--color-success-light:hsl(94, 48%, 66%);--color-success-light-h:94;--color-success-light-s:48%;--color-success-light-l:66%;--color-success-lighter:hsl(94, 48%, 76%);--color-success-lighter-h:94;--color-success-lighter-s:48%;--color-success-lighter-l:76%;--color-error-darker:hsl(355, 90%, 41%);--color-error-darker-h:355;--color-error-darker-s:90%;--color-error-darker-l:41%;--color-error-dark:hsl(355, 90%, 51%);--color-error-dark-h:355;--color-error-dark-s:90%;--color-error-dark-l:51%;--color-error:hsl(355, 90%, 61%);--color-error-h:355;--color-error-s:90%;--color-error-l:61%;--color-error-light:hsl(355, 90%, 71%);--color-error-light-h:355;--color-error-light-s:90%;--color-error-light-l:71%;--color-error-lighter:hsl(355, 90%, 81%);--color-error-lighter-h:355;--color-error-lighter-s:90%;--color-error-lighter-l:81%;--color-warning-darker:hsl(46, 100%, 41%);--color-warning-darker-h:46;--color-warning-darker-s:100%;--color-warning-darker-l:41%;--color-warning-dark:hsl(46, 100%, 51%);--color-warning-dark-h:46;--color-warning-dark-s:100%;--color-warning-dark-l:51%;--color-warning:hsl(46, 100%, 61%);--color-warning-h:46;--color-warning-s:100%;--color-warning-l:61%;--color-warning-light:hsl(46, 100%, 71%);--color-warning-light-h:46;--color-warning-light-s:100%;--color-warning-light-l:71%;--color-warning-lighter:hsl(46, 100%, 81%);--color-warning-lighter-h:46;--color-warning-lighter-s:100%;--color-warning-lighter-l:81%;--color-bg:hsl(0, 0%, 100%);--color-bg-h:0;--color-bg-s:0%;--color-bg-l:100%;--color-contrast-lower:hsl(0, 0%, 95%);--color-contrast-lower-h:0;--color-contrast-lower-s:0%;--color-contrast-lower-l:95%;--color-contrast-low:hsl(240, 1%, 83%);--color-contrast-low-h:240;--color-contrast-low-s:1%;--color-contrast-low-l:83%;--color-contrast-medium:hsl(240, 1%, 48%);--color-contrast-medium-h:240;--color-contrast-medium-s:1%;--color-contrast-medium-l:48%;--color-contrast-high:hsl(240, 4%, 20%);--color-contrast-high-h:240;--color-contrast-high-s:4%;--color-contrast-high-l:20%;--color-contrast-higher:hsl(240, 8%, 12%);--color-contrast-higher-h:240;--color-contrast-higher-s:8%;--color-contrast-higher-l:12%}@supports (--css: variables){@media (min-width: 64rem){:root{--space-unit: 1.25em}}}:root{--radius: 0.25em}:root{--font-primary: sans-serif;--text-base-size: 1em;--text-scale-ratio: 1.2;--text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio));--text-sm: calc(var(--text-xs)*var(--text-scale-ratio));--text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio));--text-lg: calc(var(--text-md)*var(--text-scale-ratio));--text-xl: calc(var(--text-lg)*var(--text-scale-ratio));--text-xxl: calc(var(--text-xl)*var(--text-scale-ratio));--text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio));--body-line-height: 1.4;--heading-line-height: 1.2;--font-primary-capital-letter: 1}@supports (--css: variables){@media (min-width: 64rem){:root{--text-base-size: 1.25em;--text-scale-ratio: 1.25}}}mark{background-color:hsla(355, 90%, 61%, 0.2);background-color:hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2);color:inherit}.text-component{--line-height-multiplier: 1;--text-vspace-multiplier: 1}.text-component blockquote{padding-left:1em;border-left:4px solid hsl(240, 1%, 83%);border-left:4px solid var(--color-contrast-low)}.text-component hr{background:hsl(240, 1%, 83%);background:var(--color-contrast-low);height:1px}.text-component figcaption{font-size:0.83333em;font-size:var(--text-sm);color:hsl(240, 1%, 48%);color:var(--color-contrast-medium)}.article.text-component{--line-height-multiplier: 1.13;--text-vspace-multiplier: 1.2}:root{--btn-font-size: 1em;--btn-font-size-sm: calc(var(--btn-font-size) - 0.2em);--btn-font-size-md: calc(var(--btn-font-size) + 0.2em);--btn-font-size-lg: calc(var(--btn-font-size) + 0.4em);--btn-radius: 0.25em;--btn-padding-x: var(--space-sm);--btn-padding-y: var(--space-xs)}.btn{--color-shadow: hsla(240, 8%, 12%, 0.15);--color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);box-shadow:0 4px 16px hsla(240, 8%, 12%, 0.15);box-shadow:0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15);cursor:pointer}.btn--primary{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--accent{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.btn--disabled{opacity:0.6}:root{--form-control-padding-x: var(--space-sm);--form-control-padding-y: var(--space-xs);--form-control-radius: 0.25em}.form-control{border:2px solid hsl(240, 1%, 83%);border:2px solid var(--color-contrast-low)}.form-control:focus{outline:none;border-color:hsl(220, 90%, 56%);border-color:var(--color-primary);--color-shadow: hsla(220, 90%, 56%, 0.2);--color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control:focus:focus{box-shadow:0 0 0 3px hsla(220, 90%, 56%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]{border-color:hsl(355, 90%, 61%);border-color:var(--color-error)}.form-control[aria-invalid="true"]:focus{--color-shadow: hsla(355, 90%, 61%, 0.2);--color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2);box-shadow:undefined;box-shadow:0 0 0 3px var(--color-shadow)}.form-control[aria-invalid="true"]:focus:focus{box-shadow:0 0 0 3px hsla(355, 90%, 61%, 0.2);box-shadow:0 0 0 3px var(--color-shadow)}.form-label{font-size:0.83333em;font-size:var(--text-sm)}:root{--cd-color-1:hsl(206, 21%, 24%);--cd-color-1-h:206;--cd-color-1-s:21%;--cd-color-1-l:24%;--cd-color-2:hsl(205, 38%, 89%);--cd-color-2-h:205;--cd-color-2-s:38%;--cd-color-2-l:89%;--cd-color-3:hsl(207, 10%, 55%);--cd-color-3-h:207;--cd-color-3-s:10%;--cd-color-3-l:55%;--cd-color-4:hsl(111, 51%, 60%);--cd-color-4-h:111;--cd-color-4-s:51%;--cd-color-4-l:60%;--cd-color-5:hsl(356, 53%, 49%);--cd-color-5-h:356;--cd-color-5-s:53%;--cd-color-5-l:49%;--cd-color-6:hsl(47, 85%, 61%);--cd-color-6-h:47;--cd-color-6-s:85%;--cd-color-6-l:61%;--cd-header-height: 200px;--font-primary: 'Droid Serif', serif;--font-secondary: 'Open Sans', sans-serif}@supports (--css: variables){@media (min-width: 64rem){:root{--cd-header-height: 300px}}}.cd-main-header{height:200px;height:var(--cd-header-height);background:hsl(206, 21%, 24%);background:var(--cd-color-1);color:hsl(0, 0%, 100%);color:var(--color-white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.cd-main-header h1{font-family:'Open Sans', sans-serif;font-family:var(--font-secondary);color:inherit}.cd-timeline{overflow:hidden;padding:2em 0;padding:var(--space-lg) 0;color:hsl(207, 10%, 55%);color:var(--cd-color-3);background-color:hsl(205, 38%, 93.45%);background-color:hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05));font-family:'Droid Serif', serif;font-family:var(--font-primary)}.cd-timeline h2{font-family:'Open Sans', sans-serif;font-family:var(--font-secondary);font-weight:700}.cd-timeline__container{position:relative;padding:1.25em 0;padding:var(--space-md) 0}.cd-timeline__container::before{content:'';position:absolute;top:0;left:18px;height:100%;width:4px;background:hsl(205, 38%, 89%);background:var(--cd-color-2)}@media (min-width: 64rem){.cd-timeline__container::before{left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%)}}.cd-timeline__block{display:-ms-flexbox;display:flex;position:relative;z-index:1;margin-bottom:2em;margin-bottom:var(--space-lg)}.cd-timeline__block:last-child{margin-bottom:0}@media (min-width: 64rem){.cd-timeline__block:nth-child(even){-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.cd-timeline__img{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:40px;height:40px;border-radius:50%;box-shadow:0 0 0 4px hsl(0, 0%, 100%),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05);box-shadow:0 0 0 4px var(--color-white),inset 0 2px 0 rgba(0,0,0,0.08),0 3px 0 4px rgba(0,0,0,0.05)}.cd-timeline__img img{width:24px;height:24px}@media (min-width: 64rem){.cd-timeline__img{width:60px;height:60px;-ms-flex-order:1;order:1;margin-left:calc(5% - 30px);will-change:transform}.cd-timeline__block:nth-child(even) .cd-timeline__img{margin-right:calc(5% - 30px)}}.cd-timeline__img--picture{background-color:hsl(111, 51%, 60%);background-color:var(--cd-color-4)}.cd-timeline__img--movie{background-color:hsl(356, 53%, 49%);background-color:var(--cd-color-5)}.cd-timeline__img--location{background-color:hsl(47, 85%, 61%);background-color:var(--cd-color-6)}.cd-timeline__content{-ms-flex-positive:1;flex-grow:1;position:relative;margin-left:1.25em;margin-left:var(--space-md);background:hsl(0, 0%, 100%);background:var(--color-white);border-radius:0.25em;border-radius:var(--radius-md);padding:1.25em;padding:var(--space-md);box-shadow:0 3px 0 hsl(205, 38%, 89%);box-shadow:0 3px 0 var(--cd-color-2)}.cd-timeline__content::before{content:'';position:absolute;top:16px;right:100%;width:0;height:0;border:7px solid transparent;border-right-color:hsl(0, 0%, 100%);border-right-color:var(--color-white)}.cd-timeline__content h2{color:hsl(206, 21%, 24%);color:var(--cd-color-1)}@media (min-width: 64rem){.cd-timeline__content{width:45%;-ms-flex-positive:0;flex-grow:0;will-change:transform;margin:0;font-size:0.8em;--line-height-multiplier: 1.2}.cd-timeline__content::before{top:24px}.cd-timeline__block:nth-child(odd) .cd-timeline__content::before{right:auto;left:100%;width:0;height:0;border:7px solid transparent;border-left-color:hsl(0, 0%, 100%);border-left-color:var(--color-white)}}.cd-timeline__date{color:hsla(207, 10%, 55%, 0.7);color:hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7)}@media (min-width: 64rem){.cd-timeline__date{position:absolute;width:100%;left:120%;top:20px}.cd-timeline__block:nth-child(even) .cd-timeline__date{left:auto;right:120%;text-align:right}}@media (min-width: 64rem){.cd-timeline__img--hidden,.cd-timeline__content--hidden{visibility:hidden}.cd-timeline__img--bounce-in{-webkit-animation:cd-bounce-1 0.6s;animation:cd-bounce-1 0.6s}.cd-timeline__content--bounce-in{-webkit-animation:cd-bounce-2 0.6s;animation:cd-bounce-2 0.6s}.cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in{-webkit-animation-name:cd-bounce-2-inverse;animation-name:cd-bounce-2-inverse}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-webkit-transform:scale(0.5);transform:scale(0.5)}60%{opacity:1;-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes cd-bounce-2{0%{opacity:0;-webkit-transform:translateX(-100px);transform:translateX(-100px)}60%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@-webkit-keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes cd-bounce-2-inverse{0%{opacity:0;-webkit-transform:translateX(100px);transform:translateX(100px)}60%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}} +@import url("https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700"); +*, *::after, *::before { + box-sizing: inherit +} + +html { + box-sizing: border-box +} + +body { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, white) +} + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { + display: block +} + +ol, ul { + list-style: none +} + +blockquote, q { + quotes: none +} + +button, input, textarea, select { + margin: 0 +} + +.btn, .form-control, .link, .reset { + background-color: transparent; + padding: 0; + border: 0; + border-radius: 0; + color: inherit; + line-height: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none +} + +select.form-control::-ms-expand { + display: none +} + +textarea { + resize: vertical; + overflow: auto; + vertical-align: top +} + +input::-ms-clear { + display: none +} + +table { + border-collapse: collapse; + border-spacing: 0 +} + +img, video, svg { + max-width: 100% +} + +[data-theme] { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #fff); + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +:root { + --space-unit: 1em; + --space-xxxxs: calc(0.125*var(--space-unit)); + --space-xxxs: calc(0.25*var(--space-unit)); + --space-xxs: calc(0.375*var(--space-unit)); + --space-xs: calc(0.5*var(--space-unit)); + --space-sm: calc(0.75*var(--space-unit)); + --space-md: calc(1.25*var(--space-unit)); + --space-lg: calc(2*var(--space-unit)); + --space-xl: calc(3.25*var(--space-unit)); + --space-xxl: calc(5.25*var(--space-unit)); + --space-xxxl: calc(8.5*var(--space-unit)); + --space-xxxxl: calc(13.75*var(--space-unit)); + --component-padding: var(--space-md) +} + +:root { + --max-width-xxs: 32rem; + --max-width-xs: 38rem; + --max-width-sm: 48rem; + --max-width-md: 64rem; + --max-width-lg: 80rem; + --max-width-xl: 90rem; + --max-width-xxl: 120rem +} + +.container { + width: calc(100% - 1.25em); + width: calc(100% - 2*var(--component-padding)); + margin-left: auto; + margin-right: auto +} + +.max-width-xxs { + max-width: 32rem; + max-width: var(--max-width-xxs) +} + +.max-width-xs { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +.max-width-sm { + max-width: 48rem; + max-width: var(--max-width-sm) +} + +.max-width-md { + max-width: 64rem; + max-width: var(--max-width-md) +} + +.max-width-lg { + max-width: 80rem; + max-width: var(--max-width-lg) +} + +.max-width-xl { + max-width: 90rem; + max-width: var(--max-width-xl) +} + +.max-width-xxl { + max-width: 120rem; + max-width: var(--max-width-xxl) +} + +.max-width-adaptive-sm { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-sm { + max-width: 48rem; + max-width: var(--max-width-sm) + } +} + +.max-width-adaptive-md { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-md { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +.max-width-adaptive, .max-width-adaptive-lg { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 80rem; + max-width: var(--max-width-lg) + } +} + +.max-width-adaptive-xl { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-xl { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive-xl { + max-width: 90rem; + max-width: var(--max-width-xl) + } +} + +.grid { + --grid-gap: 0px; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.grid>* { + -ms-flex-preferred-size: 100%; + flex-basis: 100% +} + +[class*="grid-gap"] { + margin-bottom: 1em * -1; + margin-bottom: calc(var(--grid-gap, 1em)*-1); + margin-right: 1em * -1; + margin-right: calc(var(--grid-gap, 1em)*-1) +} + +[class*="grid-gap"]>* { + margin-bottom: 1em; + margin-bottom: var(--grid-gap, 1em); + margin-right: 1em; + margin-right: var(--grid-gap, 1em) +} + +.grid-gap-xxxxs { + --grid-gap: var(--space-xxxxs) +} + +.grid-gap-xxxs { + --grid-gap: var(--space-xxxs) +} + +.grid-gap-xxs { + --grid-gap: var(--space-xxs) +} + +.grid-gap-xs { + --grid-gap: var(--space-xs) +} + +.grid-gap-sm { + --grid-gap: var(--space-sm) +} + +.grid-gap-md { + --grid-gap: var(--space-md) +} + +.grid-gap-lg { + --grid-gap: var(--space-lg) +} + +.grid-gap-xl { + --grid-gap: var(--space-xl) +} + +.grid-gap-xxl { + --grid-gap: var(--space-xxl) +} + +.grid-gap-xxxl { + --grid-gap: var(--space-xxxl) +} + +.grid-gap-xxxxl { + --grid-gap: var(--space-xxxxl) +} + +.col { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% +} + +.col-1 { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-2 { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-3 { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) +} + +.col-4 { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-5 { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-6 { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) +} + +.col-7 { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-8 { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-9 { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) +} + +.col-10 { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-11 { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-12 { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) +} + +@media (min-width: 32rem) { + .col\@xs { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xs { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xs { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xs { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xs { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xs { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xs { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xs { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xs { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xs { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xs { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xs { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xs { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 48rem) { + .col\@sm { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@sm { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@sm { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@sm { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@sm { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@sm { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@sm { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@sm { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@sm { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@sm { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@sm { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@sm { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@sm { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 64rem) { + .col\@md { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@md { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@md { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@md { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@md { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@md { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@md { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@md { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@md { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@md { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@md { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@md { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@md { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 80rem) { + .col\@lg { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@lg { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@lg { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@lg { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@lg { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@lg { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@lg { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@lg { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@lg { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@lg { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@lg { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@lg { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@lg { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 90rem) { + .col\@xl { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xl { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xl { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xl { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xl { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xl { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xl { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xl { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xl { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xl { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xl { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xl { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xl { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +:root { + --radius-sm: calc(var(--radius, 0.25em)/2); + --radius-md: var(--radius, 0.25em); + --radius-lg: calc(var(--radius, 0.25em)*2); + --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); + --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); + --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); + --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) +} + +:root { + --body-line-height: 1.4; + --heading-line-height: 1.2 +} + +body { + font-size: 1em; + font-size: var(--text-base-size, 1em); + font-family: 'Droid Serif', serif; + font-family: var(--font-primary, sans-serif); + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +h1, h2, h3, h4 { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + line-height: var(--heading-line-height, 1.2) +} + +.text-xxxl { + font-size: 2.48832em; + font-size: var(--text-xxxl, 2.488em) +} + +h1, .text-xxl { + font-size: 2.0736em; + font-size: var(--text-xxl, 2.074em) +} + +h2, .text-xl { + font-size: 1.728em; + font-size: var(--text-xl, 1.728em) +} + +h3, .text-lg { + font-size: 1.44em; + font-size: var(--text-lg, 1.44em) +} + +h4, .text-md { + font-size: 1.2em; + font-size: var(--text-md, 1.2em) +} + +small, .text-sm { + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em) +} + +.text-xs { + font-size: 0.69444em; + font-size: var(--text-xs, 0.694em) +} + +a, .link { + color: hsl(220, 90%, 56%); + color: var(--color-primary, #2a6df4); + text-decoration: underline +} + +strong, .text-bold { + font-weight: bold +} + +s { + text-decoration: line-through +} + +u, .text-underline { + text-decoration: underline +} + +.text-component { + --component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1)); + --component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1)) +} + +.text-component h1, .text-component h2, .text-component h3, .text-component h4 { + line-height: 1.2; + line-height: var(--component-heading-line-height, 1.2); + margin-bottom: 0.25em; + margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1)) +} + +.text-component h2, .text-component h3, .text-component h4 { + margin-top: 0.75em; + margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { + line-height: 1.4; + line-height: var(--component-body-line-height) +} + +.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { + margin-bottom: 0.75em; + margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component ul, .text-component ol { + padding-left: 1em +} + +.text-component ul { + list-style-type: disc +} + +.text-component ol { + list-style-type: decimal +} + +.text-component img { + display: block; + margin: 0 auto +} + +.text-component figcaption { + text-align: center; + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.text-component em { + font-style: italic +} + +.text-component hr { + margin-top: 2em; + margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-bottom: 2em; + margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-left: auto; + margin-right: auto +} + +.text-component>*:first-child { + margin-top: 0 +} + +.text-component>*:last-child { + margin-bottom: 0 +} + +.text-component__block--full-width { + width: 100vw; + margin-left: calc(50% - 50vw) +} + +@media (min-width: 48rem) { + .text-component__block--left, .text-component__block--right { + width: 45% + } + .text-component__block--left img, .text-component__block--right img { + width: 100% + } + .text-component__block--left { + float: left; + margin-right: 0.75em; + margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } + .text-component__block--right { + float: right; + margin-left: 0.75em; + margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } +} + +@media (min-width: 90rem) { + .text-component__block--outset { + width: calc(100% + 10.5em); + width: calc(100% + 2*var(--space-xxl)) + } + .text-component__block--outset img { + width: 100% + } + .text-component__block--outset:not(.text-component__block--right) { + margin-left: -5.25em; + margin-left: calc(-1*var(--space-xxl)) + } + .text-component__block--left, .text-component__block--right { + width: 50% + } + .text-component__block--right.text-component__block--outset { + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) + } +} + +:root { + --icon-xxs: 12px; + --icon-xs: 16px; + --icon-sm: 24px; + --icon-md: 32px; + --icon-lg: 48px; + --icon-xl: 64px; + --icon-xxl: 128px +} + +.icon { + display: inline-block; + color: inherit; + fill: currentColor; + height: 1em; + width: 1em; + line-height: 1; + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.icon--xxs { + font-size: 12px; + font-size: var(--icon-xxs) +} + +.icon--xs { + font-size: 16px; + font-size: var(--icon-xs) +} + +.icon--sm { + font-size: 24px; + font-size: var(--icon-sm) +} + +.icon--md { + font-size: 32px; + font-size: var(--icon-md) +} + +.icon--lg { + font-size: 48px; + font-size: var(--icon-lg) +} + +.icon--xl { + font-size: 64px; + font-size: var(--icon-xl) +} + +.icon--xxl { + font-size: 128px; + font-size: var(--icon-xxl) +} + +.icon--is-spinning { + -webkit-animation: icon-spin 1s infinite linear; + animation: icon-spin 1s infinite linear +} + +@-webkit-keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +.icon use { + color: inherit; + fill: currentColor +} + +.btn { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + text-decoration: none; + line-height: 1; + font-size: 1em; + font-size: var(--btn-font-size, 1em); + padding-top: 0.5em; + padding-top: var(--btn-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--btn-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--btn-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--btn-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--btn-radius, 0.25em) +} + +.btn--primary { + background-color: hsl(220, 90%, 56%); + background-color: var(--color-primary, #2a6df4); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--subtle { + background-color: hsl(240, 1%, 83%); + background-color: var(--color-contrast-low, #d3d3d4); + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.btn--accent { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-accent, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--disabled { + cursor: not-allowed +} + +.btn--sm { + font-size: 0.8em; + font-size: var(--btn-font-size-sm, 0.8em) +} + +.btn--md { + font-size: 1.2em; + font-size: var(--btn-font-size-md, 1.2em) +} + +.btn--lg { + font-size: 1.4em; + font-size: var(--btn-font-size-lg, 1.4em) +} + +.btn--icon { + padding: 0.5em; + padding: var(--btn-padding-y, 0.5em) +} + +.form-control { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #f2f2f2); + padding-top: 0.5em; + padding-top: var(--form-control-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--form-control-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--form-control-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--form-control-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--form-control-radius, 0.25em) +} + +.form-control::-webkit-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control::-moz-placeholder { + opacity: 1; + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-ms-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-moz-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control[disabled], .form-control[readonly] { + cursor: not-allowed +} + +.form-legend { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + font-size: 1.2em; + font-size: var(--text-md, 1.2em); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.form-label { + display: inline-block +} + +.form__msg-error { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-error, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff); + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding: 0.5em; + padding: var(--space-xs); + margin-top: 0.75em; + margin-top: var(--space-sm); + border-radius: 0.25em; + border-radius: var(--radius-md, 0.25em); + position: absolute; + clip: rect(1px, 1px, 1px, 1px) +} + +.form__msg-error::before { + content: ''; + position: absolute; + left: 0.75em; + left: var(--space-sm); + top: 0; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); + width: 0; + height: 0; + border: 8px solid transparent; + border-bottom-color: hsl(355, 90%, 61%); + border-bottom-color: var(--color-error) +} + +.form__msg-error--is-visible { + position: relative; + clip: auto +} + +.radio-list>*, .checkbox-list>* { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-align: baseline; + align-items: baseline; + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.radio-list>*:last-of-type, .checkbox-list>*:last-of-type { + margin-bottom: 0 +} + +.radio-list label, .checkbox-list label { + line-height: 1.4; + line-height: var(--body-line-height); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.radio-list input, .checkbox-list input { + vertical-align: top; + margin-right: 0.25em; + margin-right: var(--space-xxxs); + -ms-flex-negative: 0; + flex-shrink: 0 +} + +:root { + --zindex-header: 2; + --zindex-popover: 5; + --zindex-fixed-element: 10; + --zindex-overlay: 15 +} + +@media not all and (min-width: 32rem) { + .display\@xs { + display: none !important + } +} + +@media (min-width: 32rem) { + .hide\@xs { + display: none !important + } +} + +@media not all and (min-width: 48rem) { + .display\@sm { + display: none !important + } +} + +@media (min-width: 48rem) { + .hide\@sm { + display: none !important + } +} + +@media not all and (min-width: 64rem) { + .display\@md { + display: none !important + } +} + +@media (min-width: 64rem) { + .hide\@md { + display: none !important + } +} + +@media not all and (min-width: 80rem) { + .display\@lg { + display: none !important + } +} + +@media (min-width: 80rem) { + .hide\@lg { + display: none !important + } +} + +@media not all and (min-width: 90rem) { + .display\@xl { + display: none !important + } +} + +@media (min-width: 90rem) { + .hide\@xl { + display: none !important + } +} + +:root { + --display: block +} + +.is-visible { + display: block !important; + display: var(--display) !important +} + +.is-hidden { + display: none !important +} + +.sr-only { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + width: 1px; + height: 1px; + overflow: hidden; + padding: 0; + border: 0; + white-space: nowrap +} + +.flex { + display: -ms-flexbox; + display: flex +} + +.inline-flex { + display: -ms-inline-flexbox; + display: inline-flex +} + +.flex-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.flex-column { + -ms-flex-direction: column; + flex-direction: column +} + +.flex-row { + -ms-flex-direction: row; + flex-direction: row +} + +.flex-center { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center +} + +.justify-start { + -ms-flex-pack: start; + justify-content: flex-start +} + +.justify-end { + -ms-flex-pack: end; + justify-content: flex-end +} + +.justify-center { + -ms-flex-pack: center; + justify-content: center +} + +.justify-between { + -ms-flex-pack: justify; + justify-content: space-between +} + +.items-center { + -ms-flex-align: center; + align-items: center +} + +.items-start { + -ms-flex-align: start; + align-items: flex-start +} + +.items-end { + -ms-flex-align: end; + align-items: flex-end +} + +@media (min-width: 32rem) { + .flex-wrap\@xs { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xs { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xs { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xs { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xs { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xs { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xs { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xs { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xs { + -ms-flex-align: center; + align-items: center + } + .items-start\@xs { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xs { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 48rem) { + .flex-wrap\@sm { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@sm { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@sm { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@sm { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@sm { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@sm { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@sm { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@sm { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@sm { + -ms-flex-align: center; + align-items: center + } + .items-start\@sm { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@sm { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 64rem) { + .flex-wrap\@md { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@md { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@md { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@md { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@md { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@md { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@md { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@md { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@md { + -ms-flex-align: center; + align-items: center + } + .items-start\@md { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@md { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 80rem) { + .flex-wrap\@lg { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@lg { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@lg { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@lg { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@lg { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@lg { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@lg { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@lg { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@lg { + -ms-flex-align: center; + align-items: center + } + .items-start\@lg { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@lg { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 90rem) { + .flex-wrap\@xl { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xl { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xl { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xl { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xl { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xl { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xl { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xl { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xl { + -ms-flex-align: center; + align-items: center + } + .items-start\@xl { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xl { + -ms-flex-align: end; + align-items: flex-end + } +} + +.flex-grow { + -ms-flex-positive: 1; + flex-grow: 1 +} + +.flex-shrink-0 { + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.flex-gap-xxxs { + margin-bottom: -0.25em; + margin-bottom: calc(-1*var(--space-xxxs)); + margin-right: -0.25em; + margin-right: calc(-1*var(--space-xxxs)) +} + +.flex-gap-xxxs>* { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.flex-gap-xxs { + margin-bottom: -0.375em; + margin-bottom: calc(-1*var(--space-xxs)); + margin-right: -0.375em; + margin-right: calc(-1*var(--space-xxs)) +} + +.flex-gap-xxs>* { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.flex-gap-xs { + margin-bottom: -0.5em; + margin-bottom: calc(-1*var(--space-xs)); + margin-right: -0.5em; + margin-right: calc(-1*var(--space-xs)) +} + +.flex-gap-xs>* { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.flex-gap-sm { + margin-bottom: -0.75em; + margin-bottom: calc(-1*var(--space-sm)); + margin-right: -0.75em; + margin-right: calc(-1*var(--space-sm)) +} + +.flex-gap-sm>* { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.flex-gap-md { + margin-bottom: -1.25em; + margin-bottom: calc(-1*var(--space-md)); + margin-right: -1.25em; + margin-right: calc(-1*var(--space-md)) +} + +.flex-gap-md>* { + margin-bottom: 1.25em; + margin-bottom: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.flex-gap-lg { + margin-bottom: -2em; + margin-bottom: calc(-1*var(--space-lg)); + margin-right: -2em; + margin-right: calc(-1*var(--space-lg)) +} + +.flex-gap-lg>* { + margin-bottom: 2em; + margin-bottom: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.flex-gap-xl { + margin-bottom: -3.25em; + margin-bottom: calc(-1*var(--space-xl)); + margin-right: -3.25em; + margin-right: calc(-1*var(--space-xl)) +} + +.flex-gap-xl>* { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.flex-gap-xxl { + margin-bottom: -5.25em; + margin-bottom: calc(-1*var(--space-xxl)); + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) +} + +.flex-gap-xxl>* { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-xxxxs { + margin: 0.125em; + margin: var(--space-xxxxs) +} + +.margin-xxxs { + margin: 0.25em; + margin: var(--space-xxxs) +} + +.margin-xxs { + margin: 0.375em; + margin: var(--space-xxs) +} + +.margin-xs { + margin: 0.5em; + margin: var(--space-xs) +} + +.margin-sm { + margin: 0.75em; + margin: var(--space-sm) +} + +.margin-md { + margin: 1.25em; + margin: var(--space-md) +} + +.margin-lg { + margin: 2em; + margin: var(--space-lg) +} + +.margin-xl { + margin: 3.25em; + margin: var(--space-xl) +} + +.margin-xxl { + margin: 5.25em; + margin: var(--space-xxl) +} + +.margin-xxxl { + margin: 8.5em; + margin: var(--space-xxxl) +} + +.margin-xxxxl { + margin: 13.75em; + margin: var(--space-xxxxl) +} + +.margin-auto { + margin: auto +} + +.margin-top-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs) +} + +.margin-top-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs) +} + +.margin-top-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs) +} + +.margin-top-xs { + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.margin-top-sm { + margin-top: 0.75em; + margin-top: var(--space-sm) +} + +.margin-top-md { + margin-top: 1.25em; + margin-top: var(--space-md) +} + +.margin-top-lg { + margin-top: 2em; + margin-top: var(--space-lg) +} + +.margin-top-xl { + margin-top: 3.25em; + margin-top: var(--space-xl) +} + +.margin-top-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl) +} + +.margin-top-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl) +} + +.margin-top-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl) +} + +.margin-top-auto { + margin-top: auto +} + +.margin-bottom-xxxxs { + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-bottom-xxxs { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-bottom-xxs { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-bottom-xs { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-bottom-sm { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-bottom-md { + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-bottom-lg { + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-bottom-xl { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-bottom-xxl { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-bottom-xxxl { + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-bottom-xxxxl { + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-bottom-auto { + margin-bottom: auto +} + +.margin-right-xxxxs { + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-right-xxxs { + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-right-xxs { + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-right-xs { + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-right-sm { + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-right-md { + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-right-lg { + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-right-xl { + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-right-xxl { + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-right-xxxl { + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-right-xxxxl { + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-right-auto { + margin-right: auto +} + +.margin-left-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs) +} + +.margin-left-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs) +} + +.margin-left-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs) +} + +.margin-left-xs { + margin-left: 0.5em; + margin-left: var(--space-xs) +} + +.margin-left-sm { + margin-left: 0.75em; + margin-left: var(--space-sm) +} + +.margin-left-md { + margin-left: 1.25em; + margin-left: var(--space-md) +} + +.margin-left-lg { + margin-left: 2em; + margin-left: var(--space-lg) +} + +.margin-left-xl { + margin-left: 3.25em; + margin-left: var(--space-xl) +} + +.margin-left-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl) +} + +.margin-left-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl) +} + +.margin-left-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl) +} + +.margin-left-auto { + margin-left: auto +} + +.margin-x-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs); + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-x-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-x-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-x-xs { + margin-left: 0.5em; + margin-left: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-x-sm { + margin-left: 0.75em; + margin-left: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-x-md { + margin-left: 1.25em; + margin-left: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-x-lg { + margin-left: 2em; + margin-left: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-x-xl { + margin-left: 3.25em; + margin-left: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-x-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-x-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl); + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-x-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl); + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-x-auto { + margin-left: auto; + margin-right: auto +} + +.margin-y-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs); + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-y-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs); + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-y-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-y-xs { + margin-top: 0.5em; + margin-top: var(--space-xs); + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-y-sm { + margin-top: 0.75em; + margin-top: var(--space-sm); + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-y-md { + margin-top: 1.25em; + margin-top: var(--space-md); + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-y-lg { + margin-top: 2em; + margin-top: var(--space-lg); + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-y-xl { + margin-top: 3.25em; + margin-top: var(--space-xl); + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-y-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl); + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-y-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl); + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-y-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl); + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-y-auto { + margin-top: auto; + margin-bottom: auto +} + +@media not all and (min-width: 32rem) { + .has-margin\@xs { + margin: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-margin\@sm { + margin: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-margin\@md { + margin: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-margin\@lg { + margin: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-margin\@xl { + margin: 0 !important + } +} + +.padding-md { + padding: 1.25em; + padding: var(--space-md) +} + +.padding-xxxxs { + padding: 0.125em; + padding: var(--space-xxxxs) +} + +.padding-xxxs { + padding: 0.25em; + padding: var(--space-xxxs) +} + +.padding-xxs { + padding: 0.375em; + padding: var(--space-xxs) +} + +.padding-xs { + padding: 0.5em; + padding: var(--space-xs) +} + +.padding-sm { + padding: 0.75em; + padding: var(--space-sm) +} + +.padding-lg { + padding: 2em; + padding: var(--space-lg) +} + +.padding-xl { + padding: 3.25em; + padding: var(--space-xl) +} + +.padding-xxl { + padding: 5.25em; + padding: var(--space-xxl) +} + +.padding-xxxl { + padding: 8.5em; + padding: var(--space-xxxl) +} + +.padding-xxxxl { + padding: 13.75em; + padding: var(--space-xxxxl) +} + +.padding-component { + padding: 1.25em; + padding: var(--component-padding) +} + +.padding-top-md { + padding-top: 1.25em; + padding-top: var(--space-md) +} + +.padding-top-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs) +} + +.padding-top-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs) +} + +.padding-top-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs) +} + +.padding-top-xs { + padding-top: 0.5em; + padding-top: var(--space-xs) +} + +.padding-top-sm { + padding-top: 0.75em; + padding-top: var(--space-sm) +} + +.padding-top-lg { + padding-top: 2em; + padding-top: var(--space-lg) +} + +.padding-top-xl { + padding-top: 3.25em; + padding-top: var(--space-xl) +} + +.padding-top-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl) +} + +.padding-top-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl) +} + +.padding-top-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl) +} + +.padding-top-component { + padding-top: 1.25em; + padding-top: var(--component-padding) +} + +.padding-bottom-md { + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-bottom-xxxxs { + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-bottom-xxxs { + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-bottom-xxs { + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-bottom-xs { + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-bottom-sm { + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-bottom-lg { + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-bottom-xl { + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-bottom-xxl { + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-bottom-xxxl { + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-bottom-xxxxl { + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-bottom-component { + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +.padding-right-md { + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-right-xxxxs { + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-right-xxxs { + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-right-xxs { + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-right-xs { + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-right-sm { + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-right-lg { + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-right-xl { + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-right-xxl { + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-right-xxxl { + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-right-xxxxl { + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-right-component { + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-left-md { + padding-left: 1.25em; + padding-left: var(--space-md) +} + +.padding-left-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs) +} + +.padding-left-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs) +} + +.padding-left-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs) +} + +.padding-left-xs { + padding-left: 0.5em; + padding-left: var(--space-xs) +} + +.padding-left-sm { + padding-left: 0.75em; + padding-left: var(--space-sm) +} + +.padding-left-lg { + padding-left: 2em; + padding-left: var(--space-lg) +} + +.padding-left-xl { + padding-left: 3.25em; + padding-left: var(--space-xl) +} + +.padding-left-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl) +} + +.padding-left-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl) +} + +.padding-left-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl) +} + +.padding-left-component { + padding-left: 1.25em; + padding-left: var(--component-padding) +} + +.padding-x-md { + padding-left: 1.25em; + padding-left: var(--space-md); + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-x-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs); + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-x-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs); + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-x-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs); + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-x-xs { + padding-left: 0.5em; + padding-left: var(--space-xs); + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-x-sm { + padding-left: 0.75em; + padding-left: var(--space-sm); + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-x-lg { + padding-left: 2em; + padding-left: var(--space-lg); + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-x-xl { + padding-left: 3.25em; + padding-left: var(--space-xl); + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-x-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl); + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-x-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl); + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-x-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl); + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-x-component { + padding-left: 1.25em; + padding-left: var(--component-padding); + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-y-md { + padding-top: 1.25em; + padding-top: var(--space-md); + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-y-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs); + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-y-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs); + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-y-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs); + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-y-xs { + padding-top: 0.5em; + padding-top: var(--space-xs); + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-y-sm { + padding-top: 0.75em; + padding-top: var(--space-sm); + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-y-lg { + padding-top: 2em; + padding-top: var(--space-lg); + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-y-xl { + padding-top: 3.25em; + padding-top: var(--space-xl); + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-y-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl); + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-y-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl); + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-y-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl); + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-y-component { + padding-top: 1.25em; + padding-top: var(--component-padding); + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +@media not all and (min-width: 32rem) { + .has-padding\@xs { + padding: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-padding\@sm { + padding: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-padding\@md { + padding: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-padding\@lg { + padding: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-padding\@xl { + padding: 0 !important + } +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap +} + +.text-replace { + overflow: hidden; + color: transparent; + text-indent: 100%; + white-space: nowrap +} + +.text-center { + text-align: center +} + +.text-left { + text-align: left +} + +.text-right { + text-align: right +} + +@media (min-width: 32rem) { + .text-center\@xs { + text-align: center + } + .text-left\@xs { + text-align: left + } + .text-right\@xs { + text-align: right + } +} + +@media (min-width: 48rem) { + .text-center\@sm { + text-align: center + } + .text-left\@sm { + text-align: left + } + .text-right\@sm { + text-align: right + } +} + +@media (min-width: 64rem) { + .text-center\@md { + text-align: center + } + .text-left\@md { + text-align: left + } + .text-right\@md { + text-align: right + } +} + +@media (min-width: 80rem) { + .text-center\@lg { + text-align: center + } + .text-left\@lg { + text-align: left + } + .text-right\@lg { + text-align: right + } +} + +@media (min-width: 90rem) { + .text-center\@xl { + text-align: center + } + .text-left\@xl { + text-align: left + } + .text-right\@xl { + text-align: right + } +} + +.color-inherit { + color: inherit +} + +.color-contrast-medium { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.color-contrast-high { + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +.color-contrast-higher { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.color-primary { + color: hsl(220, 90%, 56%); + color: var(--color-primary, #2a6df4) +} + +.color-accent { + color: hsl(355, 90%, 61%); + color: var(--color-accent, #f54251) +} + +.color-success { + color: hsl(94, 48%, 56%); + color: var(--color-success, #88c559) +} + +.color-warning { + color: hsl(46, 100%, 61%); + color: var(--color-warning, #ffd138) +} + +.color-error { + color: hsl(355, 90%, 61%); + color: var(--color-error, #f54251) +} + +.width-100\% { + width: 100% +} + +.height-100\% { + height: 100% +} + +.media-wrapper { + position: relative; + height: 0; + padding-bottom: 56.25% +} + +.media-wrapper iframe, .media-wrapper video, .media-wrapper img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.media-wrapper video, .media-wrapper img { + -o-object-fit: cover; + object-fit: cover +} + +.media-wrapper--4\:3 { + padding-bottom: 75% +} + +:root, [data-theme="default"] { + --color-primary-darker: hsl(220, 90%, 36%); + --color-primary-darker-h: 220; + --color-primary-darker-s: 90%; + --color-primary-darker-l: 36%; + --color-primary-dark: hsl(220, 90%, 46%); + --color-primary-dark-h: 220; + --color-primary-dark-s: 90%; + --color-primary-dark-l: 46%; + --color-primary: hsl(220, 90%, 56%); + --color-primary-h: 220; + --color-primary-s: 90%; + --color-primary-l: 56%; + --color-primary-light: hsl(220, 90%, 66%); + --color-primary-light-h: 220; + --color-primary-light-s: 90%; + --color-primary-light-l: 66%; + --color-primary-lighter: hsl(220, 90%, 76%); + --color-primary-lighter-h: 220; + --color-primary-lighter-s: 90%; + --color-primary-lighter-l: 76%; + --color-accent-darker: hsl(355, 90%, 41%); + --color-accent-darker-h: 355; + --color-accent-darker-s: 90%; + --color-accent-darker-l: 41%; + --color-accent-dark: hsl(355, 90%, 51%); + --color-accent-dark-h: 355; + --color-accent-dark-s: 90%; + --color-accent-dark-l: 51%; + --color-accent: hsl(355, 90%, 61%); + --color-accent-h: 355; + --color-accent-s: 90%; + --color-accent-l: 61%; + --color-accent-light: hsl(355, 90%, 71%); + --color-accent-light-h: 355; + --color-accent-light-s: 90%; + --color-accent-light-l: 71%; + --color-accent-lighter: hsl(355, 90%, 81%); + --color-accent-lighter-h: 355; + --color-accent-lighter-s: 90%; + --color-accent-lighter-l: 81%; + --color-black: hsl(240, 8%, 12%); + --color-black-h: 240; + --color-black-s: 8%; + --color-black-l: 12%; + --color-white: hsl(0, 0%, 100%); + --color-white-h: 0; + --color-white-s: 0%; + --color-white-l: 100%; + --color-success-darker: hsl(94, 48%, 36%); + --color-success-darker-h: 94; + --color-success-darker-s: 48%; + --color-success-darker-l: 36%; + --color-success-dark: hsl(94, 48%, 46%); + --color-success-dark-h: 94; + --color-success-dark-s: 48%; + --color-success-dark-l: 46%; + --color-success: hsl(94, 48%, 56%); + --color-success-h: 94; + --color-success-s: 48%; + --color-success-l: 56%; + --color-success-light: hsl(94, 48%, 66%); + --color-success-light-h: 94; + --color-success-light-s: 48%; + --color-success-light-l: 66%; + --color-success-lighter: hsl(94, 48%, 76%); + --color-success-lighter-h: 94; + --color-success-lighter-s: 48%; + --color-success-lighter-l: 76%; + --color-error-darker: hsl(355, 90%, 41%); + --color-error-darker-h: 355; + --color-error-darker-s: 90%; + --color-error-darker-l: 41%; + --color-error-dark: hsl(355, 90%, 51%); + --color-error-dark-h: 355; + --color-error-dark-s: 90%; + --color-error-dark-l: 51%; + --color-error: hsl(355, 90%, 61%); + --color-error-h: 355; + --color-error-s: 90%; + --color-error-l: 61%; + --color-error-light: hsl(355, 90%, 71%); + --color-error-light-h: 355; + --color-error-light-s: 90%; + --color-error-light-l: 71%; + --color-error-lighter: hsl(355, 90%, 81%); + --color-error-lighter-h: 355; + --color-error-lighter-s: 90%; + --color-error-lighter-l: 81%; + --color-warning-darker: hsl(46, 100%, 41%); + --color-warning-darker-h: 46; + --color-warning-darker-s: 100%; + --color-warning-darker-l: 41%; + --color-warning-dark: hsl(46, 100%, 51%); + --color-warning-dark-h: 46; + --color-warning-dark-s: 100%; + --color-warning-dark-l: 51%; + --color-warning: hsl(46, 100%, 61%); + --color-warning-h: 46; + --color-warning-s: 100%; + --color-warning-l: 61%; + --color-warning-light: hsl(46, 100%, 71%); + --color-warning-light-h: 46; + --color-warning-light-s: 100%; + --color-warning-light-l: 71%; + --color-warning-lighter: hsl(46, 100%, 81%); + --color-warning-lighter-h: 46; + --color-warning-lighter-s: 100%; + --color-warning-lighter-l: 81%; + --color-bg: hsl(0, 0%, 100%); + --color-bg-h: 0; + --color-bg-s: 0%; + --color-bg-l: 100%; + --color-contrast-lower: hsl(0, 0%, 95%); + --color-contrast-lower-h: 0; + --color-contrast-lower-s: 0%; + --color-contrast-lower-l: 95%; + --color-contrast-low: hsl(240, 1%, 83%); + --color-contrast-low-h: 240; + --color-contrast-low-s: 1%; + --color-contrast-low-l: 83%; + --color-contrast-medium: hsl(240, 1%, 48%); + --color-contrast-medium-h: 240; + --color-contrast-medium-s: 1%; + --color-contrast-medium-l: 48%; + --color-contrast-high: hsl(240, 4%, 20%); + --color-contrast-high-h: 240; + --color-contrast-high-s: 4%; + --color-contrast-high-l: 20%; + --color-contrast-higher: hsl(240, 8%, 12%); + --color-contrast-higher-h: 240; + --color-contrast-higher-s: 8%; + --color-contrast-higher-l: 12% +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --space-unit: 1.25em + } + } +} + +:root { + --radius: 0.25em +} + +:root { + --font-primary: sans-serif; + --text-base-size: 1em; + --text-scale-ratio: 1.2; + --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs)*var(--text-scale-ratio)); + --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio)); + --text-lg: calc(var(--text-md)*var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg)*var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio)); + --body-line-height: 1.4; + --heading-line-height: 1.2; + --font-primary-capital-letter: 1 +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --text-base-size: 1.25em; + --text-scale-ratio: 1.25 + } + } +} + +mark { + background-color: hsla(355, 90%, 61%, 0.2); + background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); + color: inherit +} + +.text-component { + --line-height-multiplier: 1; + --text-vspace-multiplier: 1 +} + +.text-component blockquote { + padding-left: 1em; + border-left: 4px solid hsl(240, 1%, 83%); + border-left: 4px solid var(--color-contrast-low) +} + +.text-component hr { + background: hsl(240, 1%, 83%); + background: var(--color-contrast-low); + height: 1px +} + +.text-component figcaption { + font-size: 0.83333em; + font-size: var(--text-sm); + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium) +} + +.article.text-component { + --line-height-multiplier: 1.13; + --text-vspace-multiplier: 1.2 +} + +:root { + --btn-font-size: 1em; + --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em); + --btn-font-size-md: calc(var(--btn-font-size) + 0.2em); + --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em); + --btn-radius: 0.25em; + --btn-padding-x: var(--space-sm); + --btn-padding-y: var(--space-xs) +} + +.btn { + --color-shadow: hsla(240, 8%, 12%, 0.15); + --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15); + box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + cursor: pointer +} + +.btn--primary { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--accent { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--disabled { + opacity: 0.6 +} + +:root { + --form-control-padding-x: var(--space-sm); + --form-control-padding-y: var(--space-xs); + --form-control-radius: 0.25em +} + +.form-control { + border: 2px solid hsl(240, 1%, 83%); + border: 2px solid var(--color-contrast-low) +} + +.form-control:focus { + outline: none; + border-color: hsl(220, 90%, 56%); + border-color: var(--color-primary); + --color-shadow: hsla(220, 90%, 56%, 0.2); + --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control:focus:focus { + box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"] { + border-color: hsl(355, 90%, 61%); + border-color: var(--color-error) +} + +.form-control[aria-invalid="true"]:focus { + --color-shadow: hsla(355, 90%, 61%, 0.2); + --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"]:focus:focus { + box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-label { + font-size: 0.83333em; + font-size: var(--text-sm) +} + +:root { + --cd-color-1: hsl(206, 21%, 24%); + --cd-color-1-h: 206; + --cd-color-1-s: 21%; + --cd-color-1-l: 24%; + --cd-color-2: hsl(205, 38%, 89%); + --cd-color-2-h: 205; + --cd-color-2-s: 38%; + --cd-color-2-l: 89%; + --cd-color-3: hsl(207, 10%, 55%); + --cd-color-3-h: 207; + --cd-color-3-s: 10%; + --cd-color-3-l: 55%; + --cd-color-4: hsl(111, 51%, 60%); + --cd-color-4-h: 111; + --cd-color-4-s: 51%; + --cd-color-4-l: 60%; + --cd-color-5: hsl(356, 53%, 49%); + --cd-color-5-h: 356; + --cd-color-5-s: 53%; + --cd-color-5-l: 49%; + --cd-color-6: hsl(47, 85%, 61%); + --cd-color-6-h: 47; + --cd-color-6-s: 85%; + --cd-color-6-l: 61%; + --cd-header-height: 200px; + --font-primary: 'Droid Serif', serif; + --font-secondary: 'Open Sans', sans-serif +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --cd-header-height: 300px + } + } +} + +.cd-main-header { + height: 200px; + height: var(--cd-header-height); + background: hsl(206, 21%, 24%); + background: var(--cd-color-1); + color: hsl(0, 0%, 100%); + color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.cd-main-header h1 { + font-family: 'Open Sans', sans-serif; + font-family: var(--font-secondary); + color: inherit +} + +.cd-timeline { + overflow: hidden; + padding: 2em 0; + padding: var(--space-lg) 0; + color: hsl(207, 10%, 55%); + color: var(--cd-color-3); + background-color: hsl(205, 38%, 93.45%); + background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); + font-family: 'Droid Serif', serif; + font-family: var(--font-primary) +} + +.cd-timeline h2 { + font-family: 'Open Sans', sans-serif; + font-family: var(--font-secondary); + font-weight: 700 +} + +.cd-timeline__container { + position: relative; + padding: 1.25em 0; + padding: var(--space-md) 0 +} + +.cd-timeline__container::before { + content: ''; + position: absolute; + top: 0; + left: 18px; + height: 100%; + width: 4px; + background: hsl(205, 38%, 89%); + background: var(--cd-color-2) +} + +@media (min-width: 64rem) { + .cd-timeline__container::before { + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%) + } +} + +.cd-timeline__block { + display: -ms-flexbox; + display: flex; + position: relative; + z-index: 1; + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.cd-timeline__block:last-child { + margin-bottom: 0 +} + +@media (min-width: 64rem) { + .cd-timeline__block:nth-child(even) { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse + } +} + +.cd-timeline__img { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) +} + +.cd-timeline__img img { + width: 24px; + height: 24px +} + +@media (min-width: 64rem) { + .cd-timeline__img { + width: 60px; + height: 60px; + -ms-flex-order: 1; + order: 1; + margin-left: calc(5% - 30px); + will-change: transform + } + .cd-timeline__block:nth-child(even) .cd-timeline__img { + margin-right: calc(5% - 30px) + } +} + +.cd-timeline__img--picture { + background-color: hsl(111, 51%, 60%); + background-color: var(--cd-color-4) +} + +.cd-timeline__img--movie { + background-color: hsl(356, 53%, 49%); + background-color: var(--cd-color-5) +} + +.cd-timeline__img--location { + background-color: hsl(47, 85%, 61%); + background-color: var(--cd-color-6) +} + +.cd-timeline__content { + -ms-flex-positive: 1; + flex-grow: 1; + position: relative; + margin-left: 1.25em; + margin-left: var(--space-md); + background: hsl(0, 0%, 100%); + background: var(--color-white); + border-radius: 0.25em; + border-radius: var(--radius-md); + padding: 1.25em; + padding: var(--space-md); + box-shadow: 0 3px 0 hsl(205, 38%, 89%); + box-shadow: 0 3px 0 var(--cd-color-2) +} + +.cd-timeline__content::before { + content: ''; + position: absolute; + top: 16px; + right: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-right-color: hsl(0, 0%, 100%); + border-right-color: var(--color-white) +} + +.cd-timeline__content h2 { + color: hsl(206, 21%, 24%); + color: var(--cd-color-1) +} + +@media (min-width: 64rem) { + .cd-timeline__content { + width: 45%; + -ms-flex-positive: 0; + flex-grow: 0; + will-change: transform; + margin: 0; + font-size: 0.8em; + --line-height-multiplier: 1.2 + } + .cd-timeline__content::before { + top: 24px + } + .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { + right: auto; + left: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-left-color: hsl(0, 0%, 100%); + border-left-color: var(--color-white) + } +} + +.cd-timeline__date { + color: hsla(207, 10%, 55%, 0.7); + color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7) +} + +@media (min-width: 64rem) { + .cd-timeline__date { + position: absolute; + width: 100%; + left: 120%; + top: 20px + } + .cd-timeline__block:nth-child(even) .cd-timeline__date { + left: auto; + right: 120%; + text-align: right + } +} + +@media (min-width: 64rem) { + .cd-timeline__img--hidden, .cd-timeline__content--hidden { + visibility: hidden + } + .cd-timeline__img--bounce-in { + -webkit-animation: cd-bounce-1 0.6s; + animation: cd-bounce-1 0.6s + } + .cd-timeline__content--bounce-in { + -webkit-animation: cd-bounce-2 0.6s; + animation: cd-bounce-2 0.6s + } + .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { + -webkit-animation-name: cd-bounce-2-inverse; + animation-name: cd-bounce-2-inverse + } +} + +@-webkit-keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@-webkit-keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} -- cgit v1.2.3 From abb69b911e646766ab1703ddc0534cb82a212e75 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:30:25 +0100 Subject: Major fixes to timeline CSS to prevent overriding our CSS --- pydis_site/static/css/home/style.css | 3730 ------------------------------- pydis_site/static/css/home/timeline.css | 3674 ++++++++++++++++++++++++++++++ 2 files changed, 3674 insertions(+), 3730 deletions(-) delete mode 100644 pydis_site/static/css/home/style.css create mode 100644 pydis_site/static/css/home/timeline.css (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/style.css b/pydis_site/static/css/home/style.css deleted file mode 100644 index 7085bf5a..00000000 --- a/pydis_site/static/css/home/style.css +++ /dev/null @@ -1,3730 +0,0 @@ -@import url("https://fonts.googleapis.com/css?family=Droid+Serif|Open+Sans:400,700"); -*, *::after, *::before { - box-sizing: inherit -} - -html { - box-sizing: border-box -} - -body { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, white) -} - -article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { - display: block -} - -ol, ul { - list-style: none -} - -blockquote, q { - quotes: none -} - -button, input, textarea, select { - margin: 0 -} - -.btn, .form-control, .link, .reset { - background-color: transparent; - padding: 0; - border: 0; - border-radius: 0; - color: inherit; - line-height: inherit; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none -} - -select.form-control::-ms-expand { - display: none -} - -textarea { - resize: vertical; - overflow: auto; - vertical-align: top -} - -input::-ms-clear { - display: none -} - -table { - border-collapse: collapse; - border-spacing: 0 -} - -img, video, svg { - max-width: 100% -} - -[data-theme] { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, #fff); - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -:root { - --space-unit: 1em; - --space-xxxxs: calc(0.125*var(--space-unit)); - --space-xxxs: calc(0.25*var(--space-unit)); - --space-xxs: calc(0.375*var(--space-unit)); - --space-xs: calc(0.5*var(--space-unit)); - --space-sm: calc(0.75*var(--space-unit)); - --space-md: calc(1.25*var(--space-unit)); - --space-lg: calc(2*var(--space-unit)); - --space-xl: calc(3.25*var(--space-unit)); - --space-xxl: calc(5.25*var(--space-unit)); - --space-xxxl: calc(8.5*var(--space-unit)); - --space-xxxxl: calc(13.75*var(--space-unit)); - --component-padding: var(--space-md) -} - -:root { - --max-width-xxs: 32rem; - --max-width-xs: 38rem; - --max-width-sm: 48rem; - --max-width-md: 64rem; - --max-width-lg: 80rem; - --max-width-xl: 90rem; - --max-width-xxl: 120rem -} - -.container { - width: calc(100% - 1.25em); - width: calc(100% - 2*var(--component-padding)); - margin-left: auto; - margin-right: auto -} - -.max-width-xxs { - max-width: 32rem; - max-width: var(--max-width-xxs) -} - -.max-width-xs { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -.max-width-sm { - max-width: 48rem; - max-width: var(--max-width-sm) -} - -.max-width-md { - max-width: 64rem; - max-width: var(--max-width-md) -} - -.max-width-lg { - max-width: 80rem; - max-width: var(--max-width-lg) -} - -.max-width-xl { - max-width: 90rem; - max-width: var(--max-width-xl) -} - -.max-width-xxl { - max-width: 120rem; - max-width: var(--max-width-xxl) -} - -.max-width-adaptive-sm { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-sm { - max-width: 48rem; - max-width: var(--max-width-sm) - } -} - -.max-width-adaptive-md { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-md { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -.max-width-adaptive, .max-width-adaptive-lg { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive, .max-width-adaptive-lg { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -@media (min-width: 90rem) { - .max-width-adaptive, .max-width-adaptive-lg { - max-width: 80rem; - max-width: var(--max-width-lg) - } -} - -.max-width-adaptive-xl { - max-width: 38rem; - max-width: var(--max-width-xs) -} - -@media (min-width: 64rem) { - .max-width-adaptive-xl { - max-width: 64rem; - max-width: var(--max-width-md) - } -} - -@media (min-width: 90rem) { - .max-width-adaptive-xl { - max-width: 90rem; - max-width: var(--max-width-xl) - } -} - -.grid { - --grid-gap: 0px; - display: -ms-flexbox; - display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.grid>* { - -ms-flex-preferred-size: 100%; - flex-basis: 100% -} - -[class*="grid-gap"] { - margin-bottom: 1em * -1; - margin-bottom: calc(var(--grid-gap, 1em)*-1); - margin-right: 1em * -1; - margin-right: calc(var(--grid-gap, 1em)*-1) -} - -[class*="grid-gap"]>* { - margin-bottom: 1em; - margin-bottom: var(--grid-gap, 1em); - margin-right: 1em; - margin-right: var(--grid-gap, 1em) -} - -.grid-gap-xxxxs { - --grid-gap: var(--space-xxxxs) -} - -.grid-gap-xxxs { - --grid-gap: var(--space-xxxs) -} - -.grid-gap-xxs { - --grid-gap: var(--space-xxs) -} - -.grid-gap-xs { - --grid-gap: var(--space-xs) -} - -.grid-gap-sm { - --grid-gap: var(--space-sm) -} - -.grid-gap-md { - --grid-gap: var(--space-md) -} - -.grid-gap-lg { - --grid-gap: var(--space-lg) -} - -.grid-gap-xl { - --grid-gap: var(--space-xl) -} - -.grid-gap-xxl { - --grid-gap: var(--space-xxl) -} - -.grid-gap-xxxl { - --grid-gap: var(--space-xxxl) -} - -.grid-gap-xxxxl { - --grid-gap: var(--space-xxxxl) -} - -.col { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% -} - -.col-1 { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-2 { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-3 { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) -} - -.col-4 { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-5 { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-6 { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) -} - -.col-7 { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-8 { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-9 { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) -} - -.col-10 { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) -} - -.col-11 { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) -} - -.col-12 { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) -} - -@media (min-width: 32rem) { - .col\@xs { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@xs { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@xs { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@xs { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@xs { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@xs { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@xs { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@xs { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@xs { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@xs { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@xs { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@xs { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@xs { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 48rem) { - .col\@sm { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@sm { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@sm { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@sm { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@sm { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@sm { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@sm { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@sm { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@sm { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@sm { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@sm { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@sm { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@sm { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 64rem) { - .col\@md { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@md { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@md { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@md { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@md { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@md { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@md { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@md { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@md { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@md { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@md { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@md { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@md { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 80rem) { - .col\@lg { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@lg { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@lg { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@lg { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@lg { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@lg { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@lg { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@lg { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@lg { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@lg { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@lg { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@lg { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@lg { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -@media (min-width: 90rem) { - .col\@xl { - -ms-flex-positive: 1; - flex-grow: 1; - -ms-flex-preferred-size: 0; - flex-basis: 0; - max-width: 100% - } - .col-1\@xl { - -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(8.33% - 0.01px - 1em); - flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(8.33% - 0.01px - 1em); - max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-2\@xl { - -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(16.66% - 0.01px - 1em); - flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(16.66% - 0.01px - 1em); - max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-3\@xl { - -ms-flex-preferred-size: calc(25% - 0.01px - 1em); - -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(25% - 0.01px - 1em); - flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(25% - 0.01px - 1em); - max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) - } - .col-4\@xl { - -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(33.33% - 0.01px - 1em); - flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(33.33% - 0.01px - 1em); - max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-5\@xl { - -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(41.66% - 0.01px - 1em); - flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(41.66% - 0.01px - 1em); - max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-6\@xl { - -ms-flex-preferred-size: calc(50% - 0.01px - 1em); - -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(50% - 0.01px - 1em); - flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(50% - 0.01px - 1em); - max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) - } - .col-7\@xl { - -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(58.33% - 0.01px - 1em); - flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(58.33% - 0.01px - 1em); - max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-8\@xl { - -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(66.66% - 0.01px - 1em); - flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(66.66% - 0.01px - 1em); - max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-9\@xl { - -ms-flex-preferred-size: calc(75% - 0.01px - 1em); - -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(75% - 0.01px - 1em); - flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(75% - 0.01px - 1em); - max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) - } - .col-10\@xl { - -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); - -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(83.33% - 0.01px - 1em); - flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(83.33% - 0.01px - 1em); - max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) - } - .col-11\@xl { - -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); - -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(91.66% - 0.01px - 1em); - flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(91.66% - 0.01px - 1em); - max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) - } - .col-12\@xl { - -ms-flex-preferred-size: calc(100% - 0.01px - 1em); - -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); - flex-basis: calc(100% - 0.01px - 1em); - flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); - max-width: calc(100% - 0.01px - 1em); - max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) - } -} - -:root { - --radius-sm: calc(var(--radius, 0.25em)/2); - --radius-md: var(--radius, 0.25em); - --radius-lg: calc(var(--radius, 0.25em)*2); - --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); - --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); - --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); - --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); - --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); - --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); - --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) -} - -:root { - --body-line-height: 1.4; - --heading-line-height: 1.2 -} - -body { - font-size: 1em; - font-size: var(--text-base-size, 1em); - font-family: 'Droid Serif', serif; - font-family: var(--font-primary, sans-serif); - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -h1, h2, h3, h4 { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21); - line-height: 1.2; - line-height: var(--heading-line-height, 1.2) -} - -.text-xxxl { - font-size: 2.48832em; - font-size: var(--text-xxxl, 2.488em) -} - -h1, .text-xxl { - font-size: 2.0736em; - font-size: var(--text-xxl, 2.074em) -} - -h2, .text-xl { - font-size: 1.728em; - font-size: var(--text-xl, 1.728em) -} - -h3, .text-lg { - font-size: 1.44em; - font-size: var(--text-lg, 1.44em) -} - -h4, .text-md { - font-size: 1.2em; - font-size: var(--text-md, 1.2em) -} - -small, .text-sm { - font-size: 0.83333em; - font-size: var(--text-sm, 0.833em) -} - -.text-xs { - font-size: 0.69444em; - font-size: var(--text-xs, 0.694em) -} - -a, .link { - color: hsl(220, 90%, 56%); - color: var(--color-primary, #2a6df4); - text-decoration: underline -} - -strong, .text-bold { - font-weight: bold -} - -s { - text-decoration: line-through -} - -u, .text-underline { - text-decoration: underline -} - -.text-component { - --component-body-line-height: calc(var(--body-line-height)*var(--line-height-multiplier, 1)); - --component-heading-line-height: calc(var(--heading-line-height)*var(--line-height-multiplier, 1)) -} - -.text-component h1, .text-component h2, .text-component h3, .text-component h4 { - line-height: 1.2; - line-height: var(--component-heading-line-height, 1.2); - margin-bottom: 0.25em; - margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1)) -} - -.text-component h2, .text-component h3, .text-component h4 { - margin-top: 0.75em; - margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) -} - -.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { - line-height: 1.4; - line-height: var(--component-body-line-height) -} - -.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { - margin-bottom: 0.75em; - margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) -} - -.text-component ul, .text-component ol { - padding-left: 1em -} - -.text-component ul { - list-style-type: disc -} - -.text-component ol { - list-style-type: decimal -} - -.text-component img { - display: block; - margin: 0 auto -} - -.text-component figcaption { - text-align: center; - margin-top: 0.5em; - margin-top: var(--space-xs) -} - -.text-component em { - font-style: italic -} - -.text-component hr { - margin-top: 2em; - margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); - margin-bottom: 2em; - margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); - margin-left: auto; - margin-right: auto -} - -.text-component>*:first-child { - margin-top: 0 -} - -.text-component>*:last-child { - margin-bottom: 0 -} - -.text-component__block--full-width { - width: 100vw; - margin-left: calc(50% - 50vw) -} - -@media (min-width: 48rem) { - .text-component__block--left, .text-component__block--right { - width: 45% - } - .text-component__block--left img, .text-component__block--right img { - width: 100% - } - .text-component__block--left { - float: left; - margin-right: 0.75em; - margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) - } - .text-component__block--right { - float: right; - margin-left: 0.75em; - margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) - } -} - -@media (min-width: 90rem) { - .text-component__block--outset { - width: calc(100% + 10.5em); - width: calc(100% + 2*var(--space-xxl)) - } - .text-component__block--outset img { - width: 100% - } - .text-component__block--outset:not(.text-component__block--right) { - margin-left: -5.25em; - margin-left: calc(-1*var(--space-xxl)) - } - .text-component__block--left, .text-component__block--right { - width: 50% - } - .text-component__block--right.text-component__block--outset { - margin-right: -5.25em; - margin-right: calc(-1*var(--space-xxl)) - } -} - -:root { - --icon-xxs: 12px; - --icon-xs: 16px; - --icon-sm: 24px; - --icon-md: 32px; - --icon-lg: 48px; - --icon-xl: 64px; - --icon-xxl: 128px -} - -.icon { - display: inline-block; - color: inherit; - fill: currentColor; - height: 1em; - width: 1em; - line-height: 1; - -ms-flex-negative: 0; - flex-shrink: 0 -} - -.icon--xxs { - font-size: 12px; - font-size: var(--icon-xxs) -} - -.icon--xs { - font-size: 16px; - font-size: var(--icon-xs) -} - -.icon--sm { - font-size: 24px; - font-size: var(--icon-sm) -} - -.icon--md { - font-size: 32px; - font-size: var(--icon-md) -} - -.icon--lg { - font-size: 48px; - font-size: var(--icon-lg) -} - -.icon--xl { - font-size: 64px; - font-size: var(--icon-xl) -} - -.icon--xxl { - font-size: 128px; - font-size: var(--icon-xxl) -} - -.icon--is-spinning { - -webkit-animation: icon-spin 1s infinite linear; - animation: icon-spin 1s infinite linear -} - -@-webkit-keyframes icon-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg) - } -} - -@keyframes icon-spin { - 0% { - -webkit-transform: rotate(0deg); - transform: rotate(0deg) - } - 100% { - -webkit-transform: rotate(360deg); - transform: rotate(360deg) - } -} - -.icon use { - color: inherit; - fill: currentColor -} - -.btn { - position: relative; - display: -ms-inline-flexbox; - display: inline-flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - white-space: nowrap; - text-decoration: none; - line-height: 1; - font-size: 1em; - font-size: var(--btn-font-size, 1em); - padding-top: 0.5em; - padding-top: var(--btn-padding-y, 0.5em); - padding-bottom: 0.5em; - padding-bottom: var(--btn-padding-y, 0.5em); - padding-left: 0.75em; - padding-left: var(--btn-padding-x, 0.75em); - padding-right: 0.75em; - padding-right: var(--btn-padding-x, 0.75em); - border-radius: 0.25em; - border-radius: var(--btn-radius, 0.25em) -} - -.btn--primary { - background-color: hsl(220, 90%, 56%); - background-color: var(--color-primary, #2a6df4); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff) -} - -.btn--subtle { - background-color: hsl(240, 1%, 83%); - background-color: var(--color-contrast-low, #d3d3d4); - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21) -} - -.btn--accent { - background-color: hsl(355, 90%, 61%); - background-color: var(--color-accent, #f54251); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff) -} - -.btn--disabled { - cursor: not-allowed -} - -.btn--sm { - font-size: 0.8em; - font-size: var(--btn-font-size-sm, 0.8em) -} - -.btn--md { - font-size: 1.2em; - font-size: var(--btn-font-size-md, 1.2em) -} - -.btn--lg { - font-size: 1.4em; - font-size: var(--btn-font-size-lg, 1.4em) -} - -.btn--icon { - padding: 0.5em; - padding: var(--btn-padding-y, 0.5em) -} - -.form-control { - background-color: hsl(0, 0%, 100%); - background-color: var(--color-bg, #f2f2f2); - padding-top: 0.5em; - padding-top: var(--form-control-padding-y, 0.5em); - padding-bottom: 0.5em; - padding-bottom: var(--form-control-padding-y, 0.5em); - padding-left: 0.75em; - padding-left: var(--form-control-padding-x, 0.75em); - padding-right: 0.75em; - padding-right: var(--form-control-padding-x, 0.75em); - border-radius: 0.25em; - border-radius: var(--form-control-radius, 0.25em) -} - -.form-control::-webkit-input-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control::-moz-placeholder { - opacity: 1; - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control:-ms-input-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control:-moz-placeholder { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.form-control[disabled], .form-control[readonly] { - cursor: not-allowed -} - -.form-legend { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21); - line-height: 1.2; - font-size: 1.2em; - font-size: var(--text-md, 1.2em); - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.form-label { - display: inline-block -} - -.form__msg-error { - background-color: hsl(355, 90%, 61%); - background-color: var(--color-error, #f54251); - color: hsl(0, 0%, 100%); - color: var(--color-white, #fff); - font-size: 0.83333em; - font-size: var(--text-sm, 0.833em); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - padding: 0.5em; - padding: var(--space-xs); - margin-top: 0.75em; - margin-top: var(--space-sm); - border-radius: 0.25em; - border-radius: var(--radius-md, 0.25em); - position: absolute; - clip: rect(1px, 1px, 1px, 1px) -} - -.form__msg-error::before { - content: ''; - position: absolute; - left: 0.75em; - left: var(--space-sm); - top: 0; - -webkit-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); - width: 0; - height: 0; - border: 8px solid transparent; - border-bottom-color: hsl(355, 90%, 61%); - border-bottom-color: var(--color-error) -} - -.form__msg-error--is-visible { - position: relative; - clip: auto -} - -.radio-list>*, .checkbox-list>* { - position: relative; - display: -ms-flexbox; - display: flex; - -ms-flex-align: baseline; - align-items: baseline; - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.radio-list>*:last-of-type, .checkbox-list>*:last-of-type { - margin-bottom: 0 -} - -.radio-list label, .checkbox-list label { - line-height: 1.4; - line-height: var(--body-line-height); - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - -.radio-list input, .checkbox-list input { - vertical-align: top; - margin-right: 0.25em; - margin-right: var(--space-xxxs); - -ms-flex-negative: 0; - flex-shrink: 0 -} - -:root { - --zindex-header: 2; - --zindex-popover: 5; - --zindex-fixed-element: 10; - --zindex-overlay: 15 -} - -@media not all and (min-width: 32rem) { - .display\@xs { - display: none !important - } -} - -@media (min-width: 32rem) { - .hide\@xs { - display: none !important - } -} - -@media not all and (min-width: 48rem) { - .display\@sm { - display: none !important - } -} - -@media (min-width: 48rem) { - .hide\@sm { - display: none !important - } -} - -@media not all and (min-width: 64rem) { - .display\@md { - display: none !important - } -} - -@media (min-width: 64rem) { - .hide\@md { - display: none !important - } -} - -@media not all and (min-width: 80rem) { - .display\@lg { - display: none !important - } -} - -@media (min-width: 80rem) { - .hide\@lg { - display: none !important - } -} - -@media not all and (min-width: 90rem) { - .display\@xl { - display: none !important - } -} - -@media (min-width: 90rem) { - .hide\@xl { - display: none !important - } -} - -:root { - --display: block -} - -.is-visible { - display: block !important; - display: var(--display) !important -} - -.is-hidden { - display: none !important -} - -.sr-only { - position: absolute; - clip: rect(1px, 1px, 1px, 1px); - -webkit-clip-path: inset(50%); - clip-path: inset(50%); - width: 1px; - height: 1px; - overflow: hidden; - padding: 0; - border: 0; - white-space: nowrap -} - -.flex { - display: -ms-flexbox; - display: flex -} - -.inline-flex { - display: -ms-inline-flexbox; - display: inline-flex -} - -.flex-wrap { - -ms-flex-wrap: wrap; - flex-wrap: wrap -} - -.flex-column { - -ms-flex-direction: column; - flex-direction: column -} - -.flex-row { - -ms-flex-direction: row; - flex-direction: row -} - -.flex-center { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center -} - -.justify-start { - -ms-flex-pack: start; - justify-content: flex-start -} - -.justify-end { - -ms-flex-pack: end; - justify-content: flex-end -} - -.justify-center { - -ms-flex-pack: center; - justify-content: center -} - -.justify-between { - -ms-flex-pack: justify; - justify-content: space-between -} - -.items-center { - -ms-flex-align: center; - align-items: center -} - -.items-start { - -ms-flex-align: start; - align-items: flex-start -} - -.items-end { - -ms-flex-align: end; - align-items: flex-end -} - -@media (min-width: 32rem) { - .flex-wrap\@xs { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@xs { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@xs { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@xs { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@xs { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@xs { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@xs { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@xs { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@xs { - -ms-flex-align: center; - align-items: center - } - .items-start\@xs { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@xs { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 48rem) { - .flex-wrap\@sm { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@sm { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@sm { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@sm { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@sm { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@sm { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@sm { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@sm { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@sm { - -ms-flex-align: center; - align-items: center - } - .items-start\@sm { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@sm { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 64rem) { - .flex-wrap\@md { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@md { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@md { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@md { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@md { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@md { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@md { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@md { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@md { - -ms-flex-align: center; - align-items: center - } - .items-start\@md { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@md { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 80rem) { - .flex-wrap\@lg { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@lg { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@lg { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@lg { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@lg { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@lg { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@lg { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@lg { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@lg { - -ms-flex-align: center; - align-items: center - } - .items-start\@lg { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@lg { - -ms-flex-align: end; - align-items: flex-end - } -} - -@media (min-width: 90rem) { - .flex-wrap\@xl { - -ms-flex-wrap: wrap; - flex-wrap: wrap - } - .flex-column\@xl { - -ms-flex-direction: column; - flex-direction: column - } - .flex-row\@xl { - -ms-flex-direction: row; - flex-direction: row - } - .flex-center\@xl { - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center - } - .justify-start\@xl { - -ms-flex-pack: start; - justify-content: flex-start - } - .justify-end\@xl { - -ms-flex-pack: end; - justify-content: flex-end - } - .justify-center\@xl { - -ms-flex-pack: center; - justify-content: center - } - .justify-between\@xl { - -ms-flex-pack: justify; - justify-content: space-between - } - .items-center\@xl { - -ms-flex-align: center; - align-items: center - } - .items-start\@xl { - -ms-flex-align: start; - align-items: flex-start - } - .items-end\@xl { - -ms-flex-align: end; - align-items: flex-end - } -} - -.flex-grow { - -ms-flex-positive: 1; - flex-grow: 1 -} - -.flex-shrink-0 { - -ms-flex-negative: 0; - flex-shrink: 0 -} - -.flex-gap-xxxs { - margin-bottom: -0.25em; - margin-bottom: calc(-1*var(--space-xxxs)); - margin-right: -0.25em; - margin-right: calc(-1*var(--space-xxxs)) -} - -.flex-gap-xxxs>* { - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs); - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.flex-gap-xxs { - margin-bottom: -0.375em; - margin-bottom: calc(-1*var(--space-xxs)); - margin-right: -0.375em; - margin-right: calc(-1*var(--space-xxs)) -} - -.flex-gap-xxs>* { - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs); - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.flex-gap-xs { - margin-bottom: -0.5em; - margin-bottom: calc(-1*var(--space-xs)); - margin-right: -0.5em; - margin-right: calc(-1*var(--space-xs)) -} - -.flex-gap-xs>* { - margin-bottom: 0.5em; - margin-bottom: var(--space-xs); - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.flex-gap-sm { - margin-bottom: -0.75em; - margin-bottom: calc(-1*var(--space-sm)); - margin-right: -0.75em; - margin-right: calc(-1*var(--space-sm)) -} - -.flex-gap-sm>* { - margin-bottom: 0.75em; - margin-bottom: var(--space-sm); - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.flex-gap-md { - margin-bottom: -1.25em; - margin-bottom: calc(-1*var(--space-md)); - margin-right: -1.25em; - margin-right: calc(-1*var(--space-md)) -} - -.flex-gap-md>* { - margin-bottom: 1.25em; - margin-bottom: var(--space-md); - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.flex-gap-lg { - margin-bottom: -2em; - margin-bottom: calc(-1*var(--space-lg)); - margin-right: -2em; - margin-right: calc(-1*var(--space-lg)) -} - -.flex-gap-lg>* { - margin-bottom: 2em; - margin-bottom: var(--space-lg); - margin-right: 2em; - margin-right: var(--space-lg) -} - -.flex-gap-xl { - margin-bottom: -3.25em; - margin-bottom: calc(-1*var(--space-xl)); - margin-right: -3.25em; - margin-right: calc(-1*var(--space-xl)) -} - -.flex-gap-xl>* { - margin-bottom: 3.25em; - margin-bottom: var(--space-xl); - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.flex-gap-xxl { - margin-bottom: -5.25em; - margin-bottom: calc(-1*var(--space-xxl)); - margin-right: -5.25em; - margin-right: calc(-1*var(--space-xxl)) -} - -.flex-gap-xxl>* { - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl); - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-xxxxs { - margin: 0.125em; - margin: var(--space-xxxxs) -} - -.margin-xxxs { - margin: 0.25em; - margin: var(--space-xxxs) -} - -.margin-xxs { - margin: 0.375em; - margin: var(--space-xxs) -} - -.margin-xs { - margin: 0.5em; - margin: var(--space-xs) -} - -.margin-sm { - margin: 0.75em; - margin: var(--space-sm) -} - -.margin-md { - margin: 1.25em; - margin: var(--space-md) -} - -.margin-lg { - margin: 2em; - margin: var(--space-lg) -} - -.margin-xl { - margin: 3.25em; - margin: var(--space-xl) -} - -.margin-xxl { - margin: 5.25em; - margin: var(--space-xxl) -} - -.margin-xxxl { - margin: 8.5em; - margin: var(--space-xxxl) -} - -.margin-xxxxl { - margin: 13.75em; - margin: var(--space-xxxxl) -} - -.margin-auto { - margin: auto -} - -.margin-top-xxxxs { - margin-top: 0.125em; - margin-top: var(--space-xxxxs) -} - -.margin-top-xxxs { - margin-top: 0.25em; - margin-top: var(--space-xxxs) -} - -.margin-top-xxs { - margin-top: 0.375em; - margin-top: var(--space-xxs) -} - -.margin-top-xs { - margin-top: 0.5em; - margin-top: var(--space-xs) -} - -.margin-top-sm { - margin-top: 0.75em; - margin-top: var(--space-sm) -} - -.margin-top-md { - margin-top: 1.25em; - margin-top: var(--space-md) -} - -.margin-top-lg { - margin-top: 2em; - margin-top: var(--space-lg) -} - -.margin-top-xl { - margin-top: 3.25em; - margin-top: var(--space-xl) -} - -.margin-top-xxl { - margin-top: 5.25em; - margin-top: var(--space-xxl) -} - -.margin-top-xxxl { - margin-top: 8.5em; - margin-top: var(--space-xxxl) -} - -.margin-top-xxxxl { - margin-top: 13.75em; - margin-top: var(--space-xxxxl) -} - -.margin-top-auto { - margin-top: auto -} - -.margin-bottom-xxxxs { - margin-bottom: 0.125em; - margin-bottom: var(--space-xxxxs) -} - -.margin-bottom-xxxs { - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs) -} - -.margin-bottom-xxs { - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.margin-bottom-xs { - margin-bottom: 0.5em; - margin-bottom: var(--space-xs) -} - -.margin-bottom-sm { - margin-bottom: 0.75em; - margin-bottom: var(--space-sm) -} - -.margin-bottom-md { - margin-bottom: 1.25em; - margin-bottom: var(--space-md) -} - -.margin-bottom-lg { - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.margin-bottom-xl { - margin-bottom: 3.25em; - margin-bottom: var(--space-xl) -} - -.margin-bottom-xxl { - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl) -} - -.margin-bottom-xxxl { - margin-bottom: 8.5em; - margin-bottom: var(--space-xxxl) -} - -.margin-bottom-xxxxl { - margin-bottom: 13.75em; - margin-bottom: var(--space-xxxxl) -} - -.margin-bottom-auto { - margin-bottom: auto -} - -.margin-right-xxxxs { - margin-right: 0.125em; - margin-right: var(--space-xxxxs) -} - -.margin-right-xxxs { - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.margin-right-xxs { - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.margin-right-xs { - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.margin-right-sm { - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.margin-right-md { - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.margin-right-lg { - margin-right: 2em; - margin-right: var(--space-lg) -} - -.margin-right-xl { - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.margin-right-xxl { - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-right-xxxl { - margin-right: 8.5em; - margin-right: var(--space-xxxl) -} - -.margin-right-xxxxl { - margin-right: 13.75em; - margin-right: var(--space-xxxxl) -} - -.margin-right-auto { - margin-right: auto -} - -.margin-left-xxxxs { - margin-left: 0.125em; - margin-left: var(--space-xxxxs) -} - -.margin-left-xxxs { - margin-left: 0.25em; - margin-left: var(--space-xxxs) -} - -.margin-left-xxs { - margin-left: 0.375em; - margin-left: var(--space-xxs) -} - -.margin-left-xs { - margin-left: 0.5em; - margin-left: var(--space-xs) -} - -.margin-left-sm { - margin-left: 0.75em; - margin-left: var(--space-sm) -} - -.margin-left-md { - margin-left: 1.25em; - margin-left: var(--space-md) -} - -.margin-left-lg { - margin-left: 2em; - margin-left: var(--space-lg) -} - -.margin-left-xl { - margin-left: 3.25em; - margin-left: var(--space-xl) -} - -.margin-left-xxl { - margin-left: 5.25em; - margin-left: var(--space-xxl) -} - -.margin-left-xxxl { - margin-left: 8.5em; - margin-left: var(--space-xxxl) -} - -.margin-left-xxxxl { - margin-left: 13.75em; - margin-left: var(--space-xxxxl) -} - -.margin-left-auto { - margin-left: auto -} - -.margin-x-xxxxs { - margin-left: 0.125em; - margin-left: var(--space-xxxxs); - margin-right: 0.125em; - margin-right: var(--space-xxxxs) -} - -.margin-x-xxxs { - margin-left: 0.25em; - margin-left: var(--space-xxxs); - margin-right: 0.25em; - margin-right: var(--space-xxxs) -} - -.margin-x-xxs { - margin-left: 0.375em; - margin-left: var(--space-xxs); - margin-right: 0.375em; - margin-right: var(--space-xxs) -} - -.margin-x-xs { - margin-left: 0.5em; - margin-left: var(--space-xs); - margin-right: 0.5em; - margin-right: var(--space-xs) -} - -.margin-x-sm { - margin-left: 0.75em; - margin-left: var(--space-sm); - margin-right: 0.75em; - margin-right: var(--space-sm) -} - -.margin-x-md { - margin-left: 1.25em; - margin-left: var(--space-md); - margin-right: 1.25em; - margin-right: var(--space-md) -} - -.margin-x-lg { - margin-left: 2em; - margin-left: var(--space-lg); - margin-right: 2em; - margin-right: var(--space-lg) -} - -.margin-x-xl { - margin-left: 3.25em; - margin-left: var(--space-xl); - margin-right: 3.25em; - margin-right: var(--space-xl) -} - -.margin-x-xxl { - margin-left: 5.25em; - margin-left: var(--space-xxl); - margin-right: 5.25em; - margin-right: var(--space-xxl) -} - -.margin-x-xxxl { - margin-left: 8.5em; - margin-left: var(--space-xxxl); - margin-right: 8.5em; - margin-right: var(--space-xxxl) -} - -.margin-x-xxxxl { - margin-left: 13.75em; - margin-left: var(--space-xxxxl); - margin-right: 13.75em; - margin-right: var(--space-xxxxl) -} - -.margin-x-auto { - margin-left: auto; - margin-right: auto -} - -.margin-y-xxxxs { - margin-top: 0.125em; - margin-top: var(--space-xxxxs); - margin-bottom: 0.125em; - margin-bottom: var(--space-xxxxs) -} - -.margin-y-xxxs { - margin-top: 0.25em; - margin-top: var(--space-xxxs); - margin-bottom: 0.25em; - margin-bottom: var(--space-xxxs) -} - -.margin-y-xxs { - margin-top: 0.375em; - margin-top: var(--space-xxs); - margin-bottom: 0.375em; - margin-bottom: var(--space-xxs) -} - -.margin-y-xs { - margin-top: 0.5em; - margin-top: var(--space-xs); - margin-bottom: 0.5em; - margin-bottom: var(--space-xs) -} - -.margin-y-sm { - margin-top: 0.75em; - margin-top: var(--space-sm); - margin-bottom: 0.75em; - margin-bottom: var(--space-sm) -} - -.margin-y-md { - margin-top: 1.25em; - margin-top: var(--space-md); - margin-bottom: 1.25em; - margin-bottom: var(--space-md) -} - -.margin-y-lg { - margin-top: 2em; - margin-top: var(--space-lg); - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.margin-y-xl { - margin-top: 3.25em; - margin-top: var(--space-xl); - margin-bottom: 3.25em; - margin-bottom: var(--space-xl) -} - -.margin-y-xxl { - margin-top: 5.25em; - margin-top: var(--space-xxl); - margin-bottom: 5.25em; - margin-bottom: var(--space-xxl) -} - -.margin-y-xxxl { - margin-top: 8.5em; - margin-top: var(--space-xxxl); - margin-bottom: 8.5em; - margin-bottom: var(--space-xxxl) -} - -.margin-y-xxxxl { - margin-top: 13.75em; - margin-top: var(--space-xxxxl); - margin-bottom: 13.75em; - margin-bottom: var(--space-xxxxl) -} - -.margin-y-auto { - margin-top: auto; - margin-bottom: auto -} - -@media not all and (min-width: 32rem) { - .has-margin\@xs { - margin: 0 !important - } -} - -@media not all and (min-width: 48rem) { - .has-margin\@sm { - margin: 0 !important - } -} - -@media not all and (min-width: 64rem) { - .has-margin\@md { - margin: 0 !important - } -} - -@media not all and (min-width: 80rem) { - .has-margin\@lg { - margin: 0 !important - } -} - -@media not all and (min-width: 90rem) { - .has-margin\@xl { - margin: 0 !important - } -} - -.padding-md { - padding: 1.25em; - padding: var(--space-md) -} - -.padding-xxxxs { - padding: 0.125em; - padding: var(--space-xxxxs) -} - -.padding-xxxs { - padding: 0.25em; - padding: var(--space-xxxs) -} - -.padding-xxs { - padding: 0.375em; - padding: var(--space-xxs) -} - -.padding-xs { - padding: 0.5em; - padding: var(--space-xs) -} - -.padding-sm { - padding: 0.75em; - padding: var(--space-sm) -} - -.padding-lg { - padding: 2em; - padding: var(--space-lg) -} - -.padding-xl { - padding: 3.25em; - padding: var(--space-xl) -} - -.padding-xxl { - padding: 5.25em; - padding: var(--space-xxl) -} - -.padding-xxxl { - padding: 8.5em; - padding: var(--space-xxxl) -} - -.padding-xxxxl { - padding: 13.75em; - padding: var(--space-xxxxl) -} - -.padding-component { - padding: 1.25em; - padding: var(--component-padding) -} - -.padding-top-md { - padding-top: 1.25em; - padding-top: var(--space-md) -} - -.padding-top-xxxxs { - padding-top: 0.125em; - padding-top: var(--space-xxxxs) -} - -.padding-top-xxxs { - padding-top: 0.25em; - padding-top: var(--space-xxxs) -} - -.padding-top-xxs { - padding-top: 0.375em; - padding-top: var(--space-xxs) -} - -.padding-top-xs { - padding-top: 0.5em; - padding-top: var(--space-xs) -} - -.padding-top-sm { - padding-top: 0.75em; - padding-top: var(--space-sm) -} - -.padding-top-lg { - padding-top: 2em; - padding-top: var(--space-lg) -} - -.padding-top-xl { - padding-top: 3.25em; - padding-top: var(--space-xl) -} - -.padding-top-xxl { - padding-top: 5.25em; - padding-top: var(--space-xxl) -} - -.padding-top-xxxl { - padding-top: 8.5em; - padding-top: var(--space-xxxl) -} - -.padding-top-xxxxl { - padding-top: 13.75em; - padding-top: var(--space-xxxxl) -} - -.padding-top-component { - padding-top: 1.25em; - padding-top: var(--component-padding) -} - -.padding-bottom-md { - padding-bottom: 1.25em; - padding-bottom: var(--space-md) -} - -.padding-bottom-xxxxs { - padding-bottom: 0.125em; - padding-bottom: var(--space-xxxxs) -} - -.padding-bottom-xxxs { - padding-bottom: 0.25em; - padding-bottom: var(--space-xxxs) -} - -.padding-bottom-xxs { - padding-bottom: 0.375em; - padding-bottom: var(--space-xxs) -} - -.padding-bottom-xs { - padding-bottom: 0.5em; - padding-bottom: var(--space-xs) -} - -.padding-bottom-sm { - padding-bottom: 0.75em; - padding-bottom: var(--space-sm) -} - -.padding-bottom-lg { - padding-bottom: 2em; - padding-bottom: var(--space-lg) -} - -.padding-bottom-xl { - padding-bottom: 3.25em; - padding-bottom: var(--space-xl) -} - -.padding-bottom-xxl { - padding-bottom: 5.25em; - padding-bottom: var(--space-xxl) -} - -.padding-bottom-xxxl { - padding-bottom: 8.5em; - padding-bottom: var(--space-xxxl) -} - -.padding-bottom-xxxxl { - padding-bottom: 13.75em; - padding-bottom: var(--space-xxxxl) -} - -.padding-bottom-component { - padding-bottom: 1.25em; - padding-bottom: var(--component-padding) -} - -.padding-right-md { - padding-right: 1.25em; - padding-right: var(--space-md) -} - -.padding-right-xxxxs { - padding-right: 0.125em; - padding-right: var(--space-xxxxs) -} - -.padding-right-xxxs { - padding-right: 0.25em; - padding-right: var(--space-xxxs) -} - -.padding-right-xxs { - padding-right: 0.375em; - padding-right: var(--space-xxs) -} - -.padding-right-xs { - padding-right: 0.5em; - padding-right: var(--space-xs) -} - -.padding-right-sm { - padding-right: 0.75em; - padding-right: var(--space-sm) -} - -.padding-right-lg { - padding-right: 2em; - padding-right: var(--space-lg) -} - -.padding-right-xl { - padding-right: 3.25em; - padding-right: var(--space-xl) -} - -.padding-right-xxl { - padding-right: 5.25em; - padding-right: var(--space-xxl) -} - -.padding-right-xxxl { - padding-right: 8.5em; - padding-right: var(--space-xxxl) -} - -.padding-right-xxxxl { - padding-right: 13.75em; - padding-right: var(--space-xxxxl) -} - -.padding-right-component { - padding-right: 1.25em; - padding-right: var(--component-padding) -} - -.padding-left-md { - padding-left: 1.25em; - padding-left: var(--space-md) -} - -.padding-left-xxxxs { - padding-left: 0.125em; - padding-left: var(--space-xxxxs) -} - -.padding-left-xxxs { - padding-left: 0.25em; - padding-left: var(--space-xxxs) -} - -.padding-left-xxs { - padding-left: 0.375em; - padding-left: var(--space-xxs) -} - -.padding-left-xs { - padding-left: 0.5em; - padding-left: var(--space-xs) -} - -.padding-left-sm { - padding-left: 0.75em; - padding-left: var(--space-sm) -} - -.padding-left-lg { - padding-left: 2em; - padding-left: var(--space-lg) -} - -.padding-left-xl { - padding-left: 3.25em; - padding-left: var(--space-xl) -} - -.padding-left-xxl { - padding-left: 5.25em; - padding-left: var(--space-xxl) -} - -.padding-left-xxxl { - padding-left: 8.5em; - padding-left: var(--space-xxxl) -} - -.padding-left-xxxxl { - padding-left: 13.75em; - padding-left: var(--space-xxxxl) -} - -.padding-left-component { - padding-left: 1.25em; - padding-left: var(--component-padding) -} - -.padding-x-md { - padding-left: 1.25em; - padding-left: var(--space-md); - padding-right: 1.25em; - padding-right: var(--space-md) -} - -.padding-x-xxxxs { - padding-left: 0.125em; - padding-left: var(--space-xxxxs); - padding-right: 0.125em; - padding-right: var(--space-xxxxs) -} - -.padding-x-xxxs { - padding-left: 0.25em; - padding-left: var(--space-xxxs); - padding-right: 0.25em; - padding-right: var(--space-xxxs) -} - -.padding-x-xxs { - padding-left: 0.375em; - padding-left: var(--space-xxs); - padding-right: 0.375em; - padding-right: var(--space-xxs) -} - -.padding-x-xs { - padding-left: 0.5em; - padding-left: var(--space-xs); - padding-right: 0.5em; - padding-right: var(--space-xs) -} - -.padding-x-sm { - padding-left: 0.75em; - padding-left: var(--space-sm); - padding-right: 0.75em; - padding-right: var(--space-sm) -} - -.padding-x-lg { - padding-left: 2em; - padding-left: var(--space-lg); - padding-right: 2em; - padding-right: var(--space-lg) -} - -.padding-x-xl { - padding-left: 3.25em; - padding-left: var(--space-xl); - padding-right: 3.25em; - padding-right: var(--space-xl) -} - -.padding-x-xxl { - padding-left: 5.25em; - padding-left: var(--space-xxl); - padding-right: 5.25em; - padding-right: var(--space-xxl) -} - -.padding-x-xxxl { - padding-left: 8.5em; - padding-left: var(--space-xxxl); - padding-right: 8.5em; - padding-right: var(--space-xxxl) -} - -.padding-x-xxxxl { - padding-left: 13.75em; - padding-left: var(--space-xxxxl); - padding-right: 13.75em; - padding-right: var(--space-xxxxl) -} - -.padding-x-component { - padding-left: 1.25em; - padding-left: var(--component-padding); - padding-right: 1.25em; - padding-right: var(--component-padding) -} - -.padding-y-md { - padding-top: 1.25em; - padding-top: var(--space-md); - padding-bottom: 1.25em; - padding-bottom: var(--space-md) -} - -.padding-y-xxxxs { - padding-top: 0.125em; - padding-top: var(--space-xxxxs); - padding-bottom: 0.125em; - padding-bottom: var(--space-xxxxs) -} - -.padding-y-xxxs { - padding-top: 0.25em; - padding-top: var(--space-xxxs); - padding-bottom: 0.25em; - padding-bottom: var(--space-xxxs) -} - -.padding-y-xxs { - padding-top: 0.375em; - padding-top: var(--space-xxs); - padding-bottom: 0.375em; - padding-bottom: var(--space-xxs) -} - -.padding-y-xs { - padding-top: 0.5em; - padding-top: var(--space-xs); - padding-bottom: 0.5em; - padding-bottom: var(--space-xs) -} - -.padding-y-sm { - padding-top: 0.75em; - padding-top: var(--space-sm); - padding-bottom: 0.75em; - padding-bottom: var(--space-sm) -} - -.padding-y-lg { - padding-top: 2em; - padding-top: var(--space-lg); - padding-bottom: 2em; - padding-bottom: var(--space-lg) -} - -.padding-y-xl { - padding-top: 3.25em; - padding-top: var(--space-xl); - padding-bottom: 3.25em; - padding-bottom: var(--space-xl) -} - -.padding-y-xxl { - padding-top: 5.25em; - padding-top: var(--space-xxl); - padding-bottom: 5.25em; - padding-bottom: var(--space-xxl) -} - -.padding-y-xxxl { - padding-top: 8.5em; - padding-top: var(--space-xxxl); - padding-bottom: 8.5em; - padding-bottom: var(--space-xxxl) -} - -.padding-y-xxxxl { - padding-top: 13.75em; - padding-top: var(--space-xxxxl); - padding-bottom: 13.75em; - padding-bottom: var(--space-xxxxl) -} - -.padding-y-component { - padding-top: 1.25em; - padding-top: var(--component-padding); - padding-bottom: 1.25em; - padding-bottom: var(--component-padding) -} - -@media not all and (min-width: 32rem) { - .has-padding\@xs { - padding: 0 !important - } -} - -@media not all and (min-width: 48rem) { - .has-padding\@sm { - padding: 0 !important - } -} - -@media not all and (min-width: 64rem) { - .has-padding\@md { - padding: 0 !important - } -} - -@media not all and (min-width: 80rem) { - .has-padding\@lg { - padding: 0 !important - } -} - -@media not all and (min-width: 90rem) { - .has-padding\@xl { - padding: 0 !important - } -} - -.truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap -} - -.text-replace { - overflow: hidden; - color: transparent; - text-indent: 100%; - white-space: nowrap -} - -.text-center { - text-align: center -} - -.text-left { - text-align: left -} - -.text-right { - text-align: right -} - -@media (min-width: 32rem) { - .text-center\@xs { - text-align: center - } - .text-left\@xs { - text-align: left - } - .text-right\@xs { - text-align: right - } -} - -@media (min-width: 48rem) { - .text-center\@sm { - text-align: center - } - .text-left\@sm { - text-align: left - } - .text-right\@sm { - text-align: right - } -} - -@media (min-width: 64rem) { - .text-center\@md { - text-align: center - } - .text-left\@md { - text-align: left - } - .text-right\@md { - text-align: right - } -} - -@media (min-width: 80rem) { - .text-center\@lg { - text-align: center - } - .text-left\@lg { - text-align: left - } - .text-right\@lg { - text-align: right - } -} - -@media (min-width: 90rem) { - .text-center\@xl { - text-align: center - } - .text-left\@xl { - text-align: left - } - .text-right\@xl { - text-align: right - } -} - -.color-inherit { - color: inherit -} - -.color-contrast-medium { - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium, #79797c) -} - -.color-contrast-high { - color: hsl(240, 4%, 20%); - color: var(--color-contrast-high, #313135) -} - -.color-contrast-higher { - color: hsl(240, 8%, 12%); - color: var(--color-contrast-higher, #1c1c21) -} - -.color-primary { - color: hsl(220, 90%, 56%); - color: var(--color-primary, #2a6df4) -} - -.color-accent { - color: hsl(355, 90%, 61%); - color: var(--color-accent, #f54251) -} - -.color-success { - color: hsl(94, 48%, 56%); - color: var(--color-success, #88c559) -} - -.color-warning { - color: hsl(46, 100%, 61%); - color: var(--color-warning, #ffd138) -} - -.color-error { - color: hsl(355, 90%, 61%); - color: var(--color-error, #f54251) -} - -.width-100\% { - width: 100% -} - -.height-100\% { - height: 100% -} - -.media-wrapper { - position: relative; - height: 0; - padding-bottom: 56.25% -} - -.media-wrapper iframe, .media-wrapper video, .media-wrapper img { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100% -} - -.media-wrapper video, .media-wrapper img { - -o-object-fit: cover; - object-fit: cover -} - -.media-wrapper--4\:3 { - padding-bottom: 75% -} - -:root, [data-theme="default"] { - --color-primary-darker: hsl(220, 90%, 36%); - --color-primary-darker-h: 220; - --color-primary-darker-s: 90%; - --color-primary-darker-l: 36%; - --color-primary-dark: hsl(220, 90%, 46%); - --color-primary-dark-h: 220; - --color-primary-dark-s: 90%; - --color-primary-dark-l: 46%; - --color-primary: hsl(220, 90%, 56%); - --color-primary-h: 220; - --color-primary-s: 90%; - --color-primary-l: 56%; - --color-primary-light: hsl(220, 90%, 66%); - --color-primary-light-h: 220; - --color-primary-light-s: 90%; - --color-primary-light-l: 66%; - --color-primary-lighter: hsl(220, 90%, 76%); - --color-primary-lighter-h: 220; - --color-primary-lighter-s: 90%; - --color-primary-lighter-l: 76%; - --color-accent-darker: hsl(355, 90%, 41%); - --color-accent-darker-h: 355; - --color-accent-darker-s: 90%; - --color-accent-darker-l: 41%; - --color-accent-dark: hsl(355, 90%, 51%); - --color-accent-dark-h: 355; - --color-accent-dark-s: 90%; - --color-accent-dark-l: 51%; - --color-accent: hsl(355, 90%, 61%); - --color-accent-h: 355; - --color-accent-s: 90%; - --color-accent-l: 61%; - --color-accent-light: hsl(355, 90%, 71%); - --color-accent-light-h: 355; - --color-accent-light-s: 90%; - --color-accent-light-l: 71%; - --color-accent-lighter: hsl(355, 90%, 81%); - --color-accent-lighter-h: 355; - --color-accent-lighter-s: 90%; - --color-accent-lighter-l: 81%; - --color-black: hsl(240, 8%, 12%); - --color-black-h: 240; - --color-black-s: 8%; - --color-black-l: 12%; - --color-white: hsl(0, 0%, 100%); - --color-white-h: 0; - --color-white-s: 0%; - --color-white-l: 100%; - --color-success-darker: hsl(94, 48%, 36%); - --color-success-darker-h: 94; - --color-success-darker-s: 48%; - --color-success-darker-l: 36%; - --color-success-dark: hsl(94, 48%, 46%); - --color-success-dark-h: 94; - --color-success-dark-s: 48%; - --color-success-dark-l: 46%; - --color-success: hsl(94, 48%, 56%); - --color-success-h: 94; - --color-success-s: 48%; - --color-success-l: 56%; - --color-success-light: hsl(94, 48%, 66%); - --color-success-light-h: 94; - --color-success-light-s: 48%; - --color-success-light-l: 66%; - --color-success-lighter: hsl(94, 48%, 76%); - --color-success-lighter-h: 94; - --color-success-lighter-s: 48%; - --color-success-lighter-l: 76%; - --color-error-darker: hsl(355, 90%, 41%); - --color-error-darker-h: 355; - --color-error-darker-s: 90%; - --color-error-darker-l: 41%; - --color-error-dark: hsl(355, 90%, 51%); - --color-error-dark-h: 355; - --color-error-dark-s: 90%; - --color-error-dark-l: 51%; - --color-error: hsl(355, 90%, 61%); - --color-error-h: 355; - --color-error-s: 90%; - --color-error-l: 61%; - --color-error-light: hsl(355, 90%, 71%); - --color-error-light-h: 355; - --color-error-light-s: 90%; - --color-error-light-l: 71%; - --color-error-lighter: hsl(355, 90%, 81%); - --color-error-lighter-h: 355; - --color-error-lighter-s: 90%; - --color-error-lighter-l: 81%; - --color-warning-darker: hsl(46, 100%, 41%); - --color-warning-darker-h: 46; - --color-warning-darker-s: 100%; - --color-warning-darker-l: 41%; - --color-warning-dark: hsl(46, 100%, 51%); - --color-warning-dark-h: 46; - --color-warning-dark-s: 100%; - --color-warning-dark-l: 51%; - --color-warning: hsl(46, 100%, 61%); - --color-warning-h: 46; - --color-warning-s: 100%; - --color-warning-l: 61%; - --color-warning-light: hsl(46, 100%, 71%); - --color-warning-light-h: 46; - --color-warning-light-s: 100%; - --color-warning-light-l: 71%; - --color-warning-lighter: hsl(46, 100%, 81%); - --color-warning-lighter-h: 46; - --color-warning-lighter-s: 100%; - --color-warning-lighter-l: 81%; - --color-bg: hsl(0, 0%, 100%); - --color-bg-h: 0; - --color-bg-s: 0%; - --color-bg-l: 100%; - --color-contrast-lower: hsl(0, 0%, 95%); - --color-contrast-lower-h: 0; - --color-contrast-lower-s: 0%; - --color-contrast-lower-l: 95%; - --color-contrast-low: hsl(240, 1%, 83%); - --color-contrast-low-h: 240; - --color-contrast-low-s: 1%; - --color-contrast-low-l: 83%; - --color-contrast-medium: hsl(240, 1%, 48%); - --color-contrast-medium-h: 240; - --color-contrast-medium-s: 1%; - --color-contrast-medium-l: 48%; - --color-contrast-high: hsl(240, 4%, 20%); - --color-contrast-high-h: 240; - --color-contrast-high-s: 4%; - --color-contrast-high-l: 20%; - --color-contrast-higher: hsl(240, 8%, 12%); - --color-contrast-higher-h: 240; - --color-contrast-higher-s: 8%; - --color-contrast-higher-l: 12% -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --space-unit: 1.25em - } - } -} - -:root { - --radius: 0.25em -} - -:root { - --font-primary: sans-serif; - --text-base-size: 1em; - --text-scale-ratio: 1.2; - --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio)); - --text-sm: calc(var(--text-xs)*var(--text-scale-ratio)); - --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio)); - --text-lg: calc(var(--text-md)*var(--text-scale-ratio)); - --text-xl: calc(var(--text-lg)*var(--text-scale-ratio)); - --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio)); - --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio)); - --body-line-height: 1.4; - --heading-line-height: 1.2; - --font-primary-capital-letter: 1 -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --text-base-size: 1.25em; - --text-scale-ratio: 1.25 - } - } -} - -mark { - background-color: hsla(355, 90%, 61%, 0.2); - background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); - color: inherit -} - -.text-component { - --line-height-multiplier: 1; - --text-vspace-multiplier: 1 -} - -.text-component blockquote { - padding-left: 1em; - border-left: 4px solid hsl(240, 1%, 83%); - border-left: 4px solid var(--color-contrast-low) -} - -.text-component hr { - background: hsl(240, 1%, 83%); - background: var(--color-contrast-low); - height: 1px -} - -.text-component figcaption { - font-size: 0.83333em; - font-size: var(--text-sm); - color: hsl(240, 1%, 48%); - color: var(--color-contrast-medium) -} - -.article.text-component { - --line-height-multiplier: 1.13; - --text-vspace-multiplier: 1.2 -} - -:root { - --btn-font-size: 1em; - --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em); - --btn-font-size-md: calc(var(--btn-font-size) + 0.2em); - --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em); - --btn-radius: 0.25em; - --btn-padding-x: var(--space-sm); - --btn-padding-y: var(--space-xs) -} - -.btn { - --color-shadow: hsla(240, 8%, 12%, 0.15); - --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); - box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15); - box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); - cursor: pointer -} - -.btn--primary { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.btn--accent { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.btn--disabled { - opacity: 0.6 -} - -:root { - --form-control-padding-x: var(--space-sm); - --form-control-padding-y: var(--space-xs); - --form-control-radius: 0.25em -} - -.form-control { - border: 2px solid hsl(240, 1%, 83%); - border: 2px solid var(--color-contrast-low) -} - -.form-control:focus { - outline: none; - border-color: hsl(220, 90%, 56%); - border-color: var(--color-primary); - --color-shadow: hsla(220, 90%, 56%, 0.2); - --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); - box-shadow: undefined; - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control:focus:focus { - box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2); - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control[aria-invalid="true"] { - border-color: hsl(355, 90%, 61%); - border-color: var(--color-error) -} - -.form-control[aria-invalid="true"]:focus { - --color-shadow: hsla(355, 90%, 61%, 0.2); - --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2); - box-shadow: undefined; - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-control[aria-invalid="true"]:focus:focus { - box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2); - box-shadow: 0 0 0 3px var(--color-shadow) -} - -.form-label { - font-size: 0.83333em; - font-size: var(--text-sm) -} - -:root { - --cd-color-1: hsl(206, 21%, 24%); - --cd-color-1-h: 206; - --cd-color-1-s: 21%; - --cd-color-1-l: 24%; - --cd-color-2: hsl(205, 38%, 89%); - --cd-color-2-h: 205; - --cd-color-2-s: 38%; - --cd-color-2-l: 89%; - --cd-color-3: hsl(207, 10%, 55%); - --cd-color-3-h: 207; - --cd-color-3-s: 10%; - --cd-color-3-l: 55%; - --cd-color-4: hsl(111, 51%, 60%); - --cd-color-4-h: 111; - --cd-color-4-s: 51%; - --cd-color-4-l: 60%; - --cd-color-5: hsl(356, 53%, 49%); - --cd-color-5-h: 356; - --cd-color-5-s: 53%; - --cd-color-5-l: 49%; - --cd-color-6: hsl(47, 85%, 61%); - --cd-color-6-h: 47; - --cd-color-6-s: 85%; - --cd-color-6-l: 61%; - --cd-header-height: 200px; - --font-primary: 'Droid Serif', serif; - --font-secondary: 'Open Sans', sans-serif -} - -@supports (--css: variables) { - @media (min-width: 64rem) { - :root { - --cd-header-height: 300px - } - } -} - -.cd-main-header { - height: 200px; - height: var(--cd-header-height); - background: hsl(206, 21%, 24%); - background: var(--cd-color-1); - color: hsl(0, 0%, 100%); - color: var(--color-white); - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale -} - -.cd-main-header h1 { - font-family: 'Open Sans', sans-serif; - font-family: var(--font-secondary); - color: inherit -} - -.cd-timeline { - overflow: hidden; - padding: 2em 0; - padding: var(--space-lg) 0; - color: hsl(207, 10%, 55%); - color: var(--cd-color-3); - background-color: hsl(205, 38%, 93.45%); - background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); - font-family: 'Droid Serif', serif; - font-family: var(--font-primary) -} - -.cd-timeline h2 { - font-family: 'Open Sans', sans-serif; - font-family: var(--font-secondary); - font-weight: 700 -} - -.cd-timeline__container { - position: relative; - padding: 1.25em 0; - padding: var(--space-md) 0 -} - -.cd-timeline__container::before { - content: ''; - position: absolute; - top: 0; - left: 18px; - height: 100%; - width: 4px; - background: hsl(205, 38%, 89%); - background: var(--cd-color-2) -} - -@media (min-width: 64rem) { - .cd-timeline__container::before { - left: 50%; - -webkit-transform: translateX(-50%); - -ms-transform: translateX(-50%); - transform: translateX(-50%) - } -} - -.cd-timeline__block { - display: -ms-flexbox; - display: flex; - position: relative; - z-index: 1; - margin-bottom: 2em; - margin-bottom: var(--space-lg) -} - -.cd-timeline__block:last-child { - margin-bottom: 0 -} - -@media (min-width: 64rem) { - .cd-timeline__block:nth-child(even) { - -ms-flex-direction: row-reverse; - flex-direction: row-reverse - } -} - -.cd-timeline__img { - display: -ms-flexbox; - display: flex; - -ms-flex-pack: center; - justify-content: center; - -ms-flex-align: center; - align-items: center; - -ms-flex-negative: 0; - flex-shrink: 0; - width: 40px; - height: 40px; - border-radius: 50%; - box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); - box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) -} - -.cd-timeline__img img { - width: 24px; - height: 24px -} - -@media (min-width: 64rem) { - .cd-timeline__img { - width: 60px; - height: 60px; - -ms-flex-order: 1; - order: 1; - margin-left: calc(5% - 30px); - will-change: transform - } - .cd-timeline__block:nth-child(even) .cd-timeline__img { - margin-right: calc(5% - 30px) - } -} - -.cd-timeline__img--picture { - background-color: hsl(111, 51%, 60%); - background-color: var(--cd-color-4) -} - -.cd-timeline__img--movie { - background-color: hsl(356, 53%, 49%); - background-color: var(--cd-color-5) -} - -.cd-timeline__img--location { - background-color: hsl(47, 85%, 61%); - background-color: var(--cd-color-6) -} - -.cd-timeline__content { - -ms-flex-positive: 1; - flex-grow: 1; - position: relative; - margin-left: 1.25em; - margin-left: var(--space-md); - background: hsl(0, 0%, 100%); - background: var(--color-white); - border-radius: 0.25em; - border-radius: var(--radius-md); - padding: 1.25em; - padding: var(--space-md); - box-shadow: 0 3px 0 hsl(205, 38%, 89%); - box-shadow: 0 3px 0 var(--cd-color-2) -} - -.cd-timeline__content::before { - content: ''; - position: absolute; - top: 16px; - right: 100%; - width: 0; - height: 0; - border: 7px solid transparent; - border-right-color: hsl(0, 0%, 100%); - border-right-color: var(--color-white) -} - -.cd-timeline__content h2 { - color: hsl(206, 21%, 24%); - color: var(--cd-color-1) -} - -@media (min-width: 64rem) { - .cd-timeline__content { - width: 45%; - -ms-flex-positive: 0; - flex-grow: 0; - will-change: transform; - margin: 0; - font-size: 0.8em; - --line-height-multiplier: 1.2 - } - .cd-timeline__content::before { - top: 24px - } - .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { - right: auto; - left: 100%; - width: 0; - height: 0; - border: 7px solid transparent; - border-left-color: hsl(0, 0%, 100%); - border-left-color: var(--color-white) - } -} - -.cd-timeline__date { - color: hsla(207, 10%, 55%, 0.7); - color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7) -} - -@media (min-width: 64rem) { - .cd-timeline__date { - position: absolute; - width: 100%; - left: 120%; - top: 20px - } - .cd-timeline__block:nth-child(even) .cd-timeline__date { - left: auto; - right: 120%; - text-align: right - } -} - -@media (min-width: 64rem) { - .cd-timeline__img--hidden, .cd-timeline__content--hidden { - visibility: hidden - } - .cd-timeline__img--bounce-in { - -webkit-animation: cd-bounce-1 0.6s; - animation: cd-bounce-1 0.6s - } - .cd-timeline__content--bounce-in { - -webkit-animation: cd-bounce-2 0.6s; - animation: cd-bounce-2 0.6s - } - .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { - -webkit-animation-name: cd-bounce-2-inverse; - animation-name: cd-bounce-2-inverse - } -} - -@-webkit-keyframes cd-bounce-1 { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5) - } - 60% { - opacity: 1; - -webkit-transform: scale(1.2); - transform: scale(1.2) - } - 100% { - -webkit-transform: scale(1); - transform: scale(1) - } -} - -@keyframes cd-bounce-1 { - 0% { - opacity: 0; - -webkit-transform: scale(0.5); - transform: scale(0.5) - } - 60% { - opacity: 1; - -webkit-transform: scale(1.2); - transform: scale(1.2) - } - 100% { - -webkit-transform: scale(1); - transform: scale(1) - } -} - -@-webkit-keyframes cd-bounce-2 { - 0% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@keyframes cd-bounce-2 { - 0% { - opacity: 0; - -webkit-transform: translateX(-100px); - transform: translateX(-100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(20px); - transform: translateX(20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@-webkit-keyframes cd-bounce-2-inverse { - 0% { - opacity: 0; - -webkit-transform: translateX(100px); - transform: translateX(100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(-20px); - transform: translateX(-20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} - -@keyframes cd-bounce-2-inverse { - 0% { - opacity: 0; - -webkit-transform: translateX(100px); - transform: translateX(100px) - } - 60% { - opacity: 1; - -webkit-transform: translateX(-20px); - transform: translateX(-20px) - } - 100% { - -webkit-transform: translateX(0); - transform: translateX(0) - } -} diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css new file mode 100644 index 00000000..dbe49755 --- /dev/null +++ b/pydis_site/static/css/home/timeline.css @@ -0,0 +1,3674 @@ +body { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, white) +} + +h2 { + font-size: 2em; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { + display: block +} + +ol, ul { + list-style: none +} + +blockquote, q { + quotes: none +} + +button, input, textarea, select { + margin: 0 +} + +.btn, .form-control, .link, .reset { + background-color: transparent; + padding: 0; + border: 0; + border-radius: 0; + color: inherit; + line-height: inherit; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none +} + +select.form-control::-ms-expand { + display: none +} + +textarea { + resize: vertical; + overflow: auto; + vertical-align: top +} + +input::-ms-clear { + display: none +} + +table { + border-collapse: collapse; + border-spacing: 0 +} + +img, video, svg { + max-width: 100% +} + +[data-theme] { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #fff); + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +:root { + --space-unit: 1em; + --space-xxxxs: calc(0.125*var(--space-unit)); + --space-xxxs: calc(0.25*var(--space-unit)); + --space-xxs: calc(0.375*var(--space-unit)); + --space-xs: calc(0.5*var(--space-unit)); + --space-sm: calc(0.75*var(--space-unit)); + --space-md: calc(1.25*var(--space-unit)); + --space-lg: calc(2*var(--space-unit)); + --space-xl: calc(3.25*var(--space-unit)); + --space-xxl: calc(5.25*var(--space-unit)); + --space-xxxl: calc(8.5*var(--space-unit)); + --space-xxxxl: calc(13.75*var(--space-unit)); + --component-padding: var(--space-md) +} + +:root { + --max-width-xxs: 32rem; + --max-width-xs: 38rem; + --max-width-sm: 48rem; + --max-width-md: 64rem; + --max-width-lg: 80rem; + --max-width-xl: 90rem; + --max-width-xxl: 120rem +} + +.container { + width: calc(100% - 1.25em); + width: calc(100% - 2*var(--component-padding)); + margin-left: auto; + margin-right: auto +} + +.max-width-xxs { + max-width: 32rem; + max-width: var(--max-width-xxs) +} + +.max-width-xs { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +.max-width-sm { + max-width: 48rem; + max-width: var(--max-width-sm) +} + +.max-width-md { + max-width: 64rem; + max-width: var(--max-width-md) +} + +.max-width-lg { + max-width: 80rem; + max-width: var(--max-width-lg) +} + +.max-width-xl { + max-width: 90rem; + max-width: var(--max-width-xl) +} + +.max-width-xxl { + max-width: 120rem; + max-width: var(--max-width-xxl) +} + +.max-width-adaptive-sm { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-sm { + max-width: 48rem; + max-width: var(--max-width-sm) + } +} + +.max-width-adaptive-md { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-md { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +.max-width-adaptive, .max-width-adaptive-lg { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive, .max-width-adaptive-lg { + max-width: 80rem; + max-width: var(--max-width-lg) + } +} + +.max-width-adaptive-xl { + max-width: 38rem; + max-width: var(--max-width-xs) +} + +@media (min-width: 64rem) { + .max-width-adaptive-xl { + max-width: 64rem; + max-width: var(--max-width-md) + } +} + +@media (min-width: 90rem) { + .max-width-adaptive-xl { + max-width: 90rem; + max-width: var(--max-width-xl) + } +} + +.grid { + --grid-gap: 0px; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.grid>* { + -ms-flex-preferred-size: 100%; + flex-basis: 100% +} + +[class*="grid-gap"] { + margin-bottom: 1em * -1; + margin-bottom: calc(var(--grid-gap, 1em)*-1); + margin-right: 1em * -1; + margin-right: calc(var(--grid-gap, 1em)*-1) +} + +[class*="grid-gap"]>* { + margin-bottom: 1em; + margin-bottom: var(--grid-gap, 1em); + margin-right: 1em; + margin-right: var(--grid-gap, 1em) +} + +.grid-gap-xxxxs { + --grid-gap: var(--space-xxxxs) +} + +.grid-gap-xxxs { + --grid-gap: var(--space-xxxs) +} + +.grid-gap-xxs { + --grid-gap: var(--space-xxs) +} + +.grid-gap-xs { + --grid-gap: var(--space-xs) +} + +.grid-gap-sm { + --grid-gap: var(--space-sm) +} + +.grid-gap-md { + --grid-gap: var(--space-md) +} + +.grid-gap-lg { + --grid-gap: var(--space-lg) +} + +.grid-gap-xl { + --grid-gap: var(--space-xl) +} + +.grid-gap-xxl { + --grid-gap: var(--space-xxl) +} + +.grid-gap-xxxl { + --grid-gap: var(--space-xxxl) +} + +.grid-gap-xxxxl { + --grid-gap: var(--space-xxxxl) +} + +.col { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% +} + +.col-1 { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-2 { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-3 { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) +} + +.col-4 { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-5 { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-6 { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) +} + +.col-7 { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-8 { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-9 { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) +} + +.col-10 { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) +} + +.col-11 { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) +} + +.col-12 { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) +} + +@media (min-width: 32rem) { + .col\@xs { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xs { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xs { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xs { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xs { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xs { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xs { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xs { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xs { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xs { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xs { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xs { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xs { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 48rem) { + .col\@sm { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@sm { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@sm { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@sm { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@sm { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@sm { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@sm { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@sm { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@sm { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@sm { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@sm { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@sm { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@sm { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 64rem) { + .col\@md { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@md { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@md { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@md { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@md { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@md { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@md { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@md { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@md { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@md { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@md { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@md { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@md { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 80rem) { + .col\@lg { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@lg { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@lg { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@lg { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@lg { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@lg { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@lg { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@lg { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@lg { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@lg { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@lg { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@lg { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@lg { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +@media (min-width: 90rem) { + .col\@xl { + -ms-flex-positive: 1; + flex-grow: 1; + -ms-flex-preferred-size: 0; + flex-basis: 0; + max-width: 100% + } + .col-1\@xl { + -ms-flex-preferred-size: calc(8.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(8.33% - 0.01px - 1em); + flex-basis: calc(8.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(8.33% - 0.01px - 1em); + max-width: calc(8.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-2\@xl { + -ms-flex-preferred-size: calc(16.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(16.66% - 0.01px - 1em); + flex-basis: calc(16.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(16.66% - 0.01px - 1em); + max-width: calc(16.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-3\@xl { + -ms-flex-preferred-size: calc(25% - 0.01px - 1em); + -ms-flex-preferred-size: calc(25% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(25% - 0.01px - 1em); + flex-basis: calc(25% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(25% - 0.01px - 1em); + max-width: calc(25% - 0.01px - var(--grid-gap, 1em)) + } + .col-4\@xl { + -ms-flex-preferred-size: calc(33.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(33.33% - 0.01px - 1em); + flex-basis: calc(33.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(33.33% - 0.01px - 1em); + max-width: calc(33.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-5\@xl { + -ms-flex-preferred-size: calc(41.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(41.66% - 0.01px - 1em); + flex-basis: calc(41.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(41.66% - 0.01px - 1em); + max-width: calc(41.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-6\@xl { + -ms-flex-preferred-size: calc(50% - 0.01px - 1em); + -ms-flex-preferred-size: calc(50% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(50% - 0.01px - 1em); + flex-basis: calc(50% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(50% - 0.01px - 1em); + max-width: calc(50% - 0.01px - var(--grid-gap, 1em)) + } + .col-7\@xl { + -ms-flex-preferred-size: calc(58.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(58.33% - 0.01px - 1em); + flex-basis: calc(58.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(58.33% - 0.01px - 1em); + max-width: calc(58.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-8\@xl { + -ms-flex-preferred-size: calc(66.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(66.66% - 0.01px - 1em); + flex-basis: calc(66.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(66.66% - 0.01px - 1em); + max-width: calc(66.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-9\@xl { + -ms-flex-preferred-size: calc(75% - 0.01px - 1em); + -ms-flex-preferred-size: calc(75% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(75% - 0.01px - 1em); + flex-basis: calc(75% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(75% - 0.01px - 1em); + max-width: calc(75% - 0.01px - var(--grid-gap, 1em)) + } + .col-10\@xl { + -ms-flex-preferred-size: calc(83.33% - 0.01px - 1em); + -ms-flex-preferred-size: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(83.33% - 0.01px - 1em); + flex-basis: calc(83.33% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(83.33% - 0.01px - 1em); + max-width: calc(83.33% - 0.01px - var(--grid-gap, 1em)) + } + .col-11\@xl { + -ms-flex-preferred-size: calc(91.66% - 0.01px - 1em); + -ms-flex-preferred-size: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(91.66% - 0.01px - 1em); + flex-basis: calc(91.66% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(91.66% - 0.01px - 1em); + max-width: calc(91.66% - 0.01px - var(--grid-gap, 1em)) + } + .col-12\@xl { + -ms-flex-preferred-size: calc(100% - 0.01px - 1em); + -ms-flex-preferred-size: calc(100% - 0.01px - var(--grid-gap, 1em)); + flex-basis: calc(100% - 0.01px - 1em); + flex-basis: calc(100% - 0.01px - var(--grid-gap, 1em)); + max-width: calc(100% - 0.01px - 1em); + max-width: calc(100% - 0.01px - var(--grid-gap, 1em)) + } +} + +:root { + --radius-sm: calc(var(--radius, 0.25em)/2); + --radius-md: var(--radius, 0.25em); + --radius-lg: calc(var(--radius, 0.25em)*2); + --shadow-sm: 0 1px 2px rgba(0, 0, 0, .085), 0 1px 8px rgba(0, 0, 0, .1); + --shadow-md: 0 1px 8px rgba(0, 0, 0, .1), 0 8px 24px rgba(0, 0, 0, .15); + --shadow-lg: 0 1px 8px rgba(0, 0, 0, .1), 0 16px 48px rgba(0, 0, 0, .1), 0 24px 60px rgba(0, 0, 0, .1); + --bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275); + --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1); + --ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19); + --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) +} + +:root { + --body-line-height: 1.4; + --heading-line-height: 1.2 +} + +body { + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +h1, h2, h3, h4 { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + line-height: var(--heading-line-height, 1.2) +} + +.text-xxxl { + font-size: 2.48832em; + font-size: var(--text-xxxl, 2.488em) +} + +small, .text-sm { + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em) +} + +.text-xs { + font-size: 0.69444em; + font-size: var(--text-xs, 0.694em) +} + +strong, .text-bold { + font-weight: bold +} + +s { + text-decoration: line-through +} + +u, .text-underline { + text-decoration: underline +} + + +.text-component h1, .text-component h2, .text-component h3, .text-component h4 { + line-height: 1.2; + line-height: var(--component-heading-line-height, 1.2); + margin-bottom: 0.25em; + margin-bottom: calc(var(--space-xxxs)*var(--text-vspace-multiplier, 1)) +} + +.text-component h2, .text-component h3, .text-component h4 { + margin-top: 0.75em; + margin-top: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component p, .text-component blockquote, .text-component ul li, .text-component ol li { + line-height: 1.4; + line-height: var(--component-body-line-height) +} + +.text-component ul, .text-component ol, .text-component p, .text-component blockquote, .text-component .text-component__block { + margin-bottom: 0.75em; + margin-bottom: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) +} + +.text-component ul, .text-component ol { + padding-left: 1em +} + +.text-component ul { + list-style-type: disc +} + +.text-component ol { + list-style-type: decimal +} + +.text-component img { + display: block; + margin: 0 auto +} + +.text-component figcaption { + text-align: center; + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.text-component em { + font-style: italic +} + +.text-component hr { + margin-top: 2em; + margin-top: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-bottom: 2em; + margin-bottom: calc(var(--space-lg)*var(--text-vspace-multiplier, 1)); + margin-left: auto; + margin-right: auto +} + +.text-component>*:first-child { + margin-top: 0 +} + +.text-component>*:last-child { + margin-bottom: 0 +} + +.text-component__block--full-width { + width: 100vw; + margin-left: calc(50% - 50vw) +} + +@media (min-width: 48rem) { + .text-component__block--left, .text-component__block--right { + width: 45% + } + .text-component__block--left img, .text-component__block--right img { + width: 100% + } + .text-component__block--left { + float: left; + margin-right: 0.75em; + margin-right: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } + .text-component__block--right { + float: right; + margin-left: 0.75em; + margin-left: calc(var(--space-sm)*var(--text-vspace-multiplier, 1)) + } +} + +@media (min-width: 90rem) { + .text-component__block--outset { + width: calc(100% + 10.5em); + width: calc(100% + 2*var(--space-xxl)) + } + .text-component__block--outset img { + width: 100% + } + .text-component__block--outset:not(.text-component__block--right) { + margin-left: -5.25em; + margin-left: calc(-1*var(--space-xxl)) + } + .text-component__block--left, .text-component__block--right { + width: 50% + } + .text-component__block--right.text-component__block--outset { + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) + } +} + +:root { + --icon-xxs: 12px; + --icon-xs: 16px; + --icon-sm: 24px; + --icon-md: 32px; + --icon-lg: 48px; + --icon-xl: 64px; + --icon-xxl: 128px +} + +.icon--xxs { + font-size: 12px; + font-size: var(--icon-xxs) +} + +.icon--xs { + font-size: 16px; + font-size: var(--icon-xs) +} + +.icon--sm { + font-size: 24px; + font-size: var(--icon-sm) +} + +.icon--md { + font-size: 32px; + font-size: var(--icon-md) +} + +.icon--lg { + font-size: 48px; + font-size: var(--icon-lg) +} + +.icon--xl { + font-size: 64px; + font-size: var(--icon-xl) +} + +.icon--xxl { + font-size: 128px; + font-size: var(--icon-xxl) +} + +.icon--is-spinning { + -webkit-animation: icon-spin 1s infinite linear; + animation: icon-spin 1s infinite linear +} + +@-webkit-keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +@keyframes icon-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg) + } + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg) + } +} + +.icon use { + color: inherit; + fill: currentColor +} + +.btn { + position: relative; + display: -ms-inline-flexbox; + display: inline-flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + white-space: nowrap; + text-decoration: none; + line-height: 1; + font-size: 1em; + font-size: var(--btn-font-size, 1em); + padding-top: 0.5em; + padding-top: var(--btn-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--btn-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--btn-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--btn-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--btn-radius, 0.25em) +} + +.btn--primary { + background-color: hsl(220, 90%, 56%); + background-color: var(--color-primary, #2a6df4); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--subtle { + background-color: hsl(240, 1%, 83%); + background-color: var(--color-contrast-low, #d3d3d4); + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.btn--accent { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-accent, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff) +} + +.btn--disabled { + cursor: not-allowed +} + +.btn--sm { + font-size: 0.8em; + font-size: var(--btn-font-size-sm, 0.8em) +} + +.btn--md { + font-size: 1.2em; + font-size: var(--btn-font-size-md, 1.2em) +} + +.btn--lg { + font-size: 1.4em; + font-size: var(--btn-font-size-lg, 1.4em) +} + +.btn--icon { + padding: 0.5em; + padding: var(--btn-padding-y, 0.5em) +} + +.form-control { + background-color: hsl(0, 0%, 100%); + background-color: var(--color-bg, #f2f2f2); + padding-top: 0.5em; + padding-top: var(--form-control-padding-y, 0.5em); + padding-bottom: 0.5em; + padding-bottom: var(--form-control-padding-y, 0.5em); + padding-left: 0.75em; + padding-left: var(--form-control-padding-x, 0.75em); + padding-right: 0.75em; + padding-right: var(--form-control-padding-x, 0.75em); + border-radius: 0.25em; + border-radius: var(--form-control-radius, 0.25em) +} + +.form-control::-webkit-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control::-moz-placeholder { + opacity: 1; + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-ms-input-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control:-moz-placeholder { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.form-control[disabled], .form-control[readonly] { + cursor: not-allowed +} + +.form-legend { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21); + line-height: 1.2; + font-size: 1.2em; + font-size: var(--text-md, 1.2em); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.form-label { + display: inline-block +} + +.form__msg-error { + background-color: hsl(355, 90%, 61%); + background-color: var(--color-error, #f54251); + color: hsl(0, 0%, 100%); + color: var(--color-white, #fff); + font-size: 0.83333em; + font-size: var(--text-sm, 0.833em); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + padding: 0.5em; + padding: var(--space-xs); + margin-top: 0.75em; + margin-top: var(--space-sm); + border-radius: 0.25em; + border-radius: var(--radius-md, 0.25em); + position: absolute; + clip: rect(1px, 1px, 1px, 1px) +} + +.form__msg-error::before { + content: ''; + position: absolute; + left: 0.75em; + left: var(--space-sm); + top: 0; + -webkit-transform: translateY(-100%); + -ms-transform: translateY(-100%); + transform: translateY(-100%); + width: 0; + height: 0; + border: 8px solid transparent; + border-bottom-color: hsl(355, 90%, 61%); + border-bottom-color: var(--color-error) +} + +.form__msg-error--is-visible { + position: relative; + clip: auto +} + +.radio-list>*, .checkbox-list>* { + position: relative; + display: -ms-flexbox; + display: flex; + -ms-flex-align: baseline; + align-items: baseline; + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.radio-list>*:last-of-type, .checkbox-list>*:last-of-type { + margin-bottom: 0 +} + +.radio-list label, .checkbox-list label { + line-height: 1.4; + line-height: var(--body-line-height); + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none +} + +.radio-list input, .checkbox-list input { + vertical-align: top; + margin-right: 0.25em; + margin-right: var(--space-xxxs); + -ms-flex-negative: 0; + flex-shrink: 0 +} + +:root { + --zindex-header: 2; + --zindex-popover: 5; + --zindex-fixed-element: 10; + --zindex-overlay: 15 +} + +@media not all and (min-width: 32rem) { + .display\@xs { + display: none !important + } +} + +@media (min-width: 32rem) { + .hide\@xs { + display: none !important + } +} + +@media not all and (min-width: 48rem) { + .display\@sm { + display: none !important + } +} + +@media (min-width: 48rem) { + .hide\@sm { + display: none !important + } +} + +@media not all and (min-width: 64rem) { + .display\@md { + display: none !important + } +} + +@media (min-width: 64rem) { + .hide\@md { + display: none !important + } +} + +@media not all and (min-width: 80rem) { + .display\@lg { + display: none !important + } +} + +@media (min-width: 80rem) { + .hide\@lg { + display: none !important + } +} + +@media not all and (min-width: 90rem) { + .display\@xl { + display: none !important + } +} + +@media (min-width: 90rem) { + .hide\@xl { + display: none !important + } +} + +:root { + --display: block +} + +.is-visible { + display: block !important; + display: var(--display) !important +} + +.is-hidden { + display: none !important +} + +.sr-only { + position: absolute; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + width: 1px; + height: 1px; + overflow: hidden; + padding: 0; + border: 0; + white-space: nowrap +} + +.flex { + display: -ms-flexbox; + display: flex +} + +.inline-flex { + display: -ms-inline-flexbox; + display: inline-flex +} + +.flex-wrap { + -ms-flex-wrap: wrap; + flex-wrap: wrap +} + +.flex-column { + -ms-flex-direction: column; + flex-direction: column +} + +.flex-row { + -ms-flex-direction: row; + flex-direction: row +} + +.flex-center { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center +} + +.justify-start { + -ms-flex-pack: start; + justify-content: flex-start +} + +.justify-end { + -ms-flex-pack: end; + justify-content: flex-end +} + +.justify-center { + -ms-flex-pack: center; + justify-content: center +} + +.justify-between { + -ms-flex-pack: justify; + justify-content: space-between +} + +.items-center { + -ms-flex-align: center; + align-items: center +} + +.items-start { + -ms-flex-align: start; + align-items: flex-start +} + +.items-end { + -ms-flex-align: end; + align-items: flex-end +} + +@media (min-width: 32rem) { + .flex-wrap\@xs { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xs { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xs { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xs { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xs { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xs { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xs { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xs { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xs { + -ms-flex-align: center; + align-items: center + } + .items-start\@xs { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xs { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 48rem) { + .flex-wrap\@sm { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@sm { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@sm { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@sm { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@sm { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@sm { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@sm { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@sm { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@sm { + -ms-flex-align: center; + align-items: center + } + .items-start\@sm { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@sm { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 64rem) { + .flex-wrap\@md { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@md { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@md { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@md { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@md { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@md { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@md { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@md { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@md { + -ms-flex-align: center; + align-items: center + } + .items-start\@md { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@md { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 80rem) { + .flex-wrap\@lg { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@lg { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@lg { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@lg { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@lg { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@lg { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@lg { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@lg { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@lg { + -ms-flex-align: center; + align-items: center + } + .items-start\@lg { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@lg { + -ms-flex-align: end; + align-items: flex-end + } +} + +@media (min-width: 90rem) { + .flex-wrap\@xl { + -ms-flex-wrap: wrap; + flex-wrap: wrap + } + .flex-column\@xl { + -ms-flex-direction: column; + flex-direction: column + } + .flex-row\@xl { + -ms-flex-direction: row; + flex-direction: row + } + .flex-center\@xl { + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center + } + .justify-start\@xl { + -ms-flex-pack: start; + justify-content: flex-start + } + .justify-end\@xl { + -ms-flex-pack: end; + justify-content: flex-end + } + .justify-center\@xl { + -ms-flex-pack: center; + justify-content: center + } + .justify-between\@xl { + -ms-flex-pack: justify; + justify-content: space-between + } + .items-center\@xl { + -ms-flex-align: center; + align-items: center + } + .items-start\@xl { + -ms-flex-align: start; + align-items: flex-start + } + .items-end\@xl { + -ms-flex-align: end; + align-items: flex-end + } +} + +.flex-grow { + -ms-flex-positive: 1; + flex-grow: 1 +} + +.flex-shrink-0 { + -ms-flex-negative: 0; + flex-shrink: 0 +} + +.flex-gap-xxxs { + margin-bottom: -0.25em; + margin-bottom: calc(-1*var(--space-xxxs)); + margin-right: -0.25em; + margin-right: calc(-1*var(--space-xxxs)) +} + +.flex-gap-xxxs>* { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.flex-gap-xxs { + margin-bottom: -0.375em; + margin-bottom: calc(-1*var(--space-xxs)); + margin-right: -0.375em; + margin-right: calc(-1*var(--space-xxs)) +} + +.flex-gap-xxs>* { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.flex-gap-xs { + margin-bottom: -0.5em; + margin-bottom: calc(-1*var(--space-xs)); + margin-right: -0.5em; + margin-right: calc(-1*var(--space-xs)) +} + +.flex-gap-xs>* { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.flex-gap-sm { + margin-bottom: -0.75em; + margin-bottom: calc(-1*var(--space-sm)); + margin-right: -0.75em; + margin-right: calc(-1*var(--space-sm)) +} + +.flex-gap-sm>* { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.flex-gap-md { + margin-bottom: -1.25em; + margin-bottom: calc(-1*var(--space-md)); + margin-right: -1.25em; + margin-right: calc(-1*var(--space-md)) +} + +.flex-gap-md>* { + margin-bottom: 1.25em; + margin-bottom: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.flex-gap-lg { + margin-bottom: -2em; + margin-bottom: calc(-1*var(--space-lg)); + margin-right: -2em; + margin-right: calc(-1*var(--space-lg)) +} + +.flex-gap-lg>* { + margin-bottom: 2em; + margin-bottom: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.flex-gap-xl { + margin-bottom: -3.25em; + margin-bottom: calc(-1*var(--space-xl)); + margin-right: -3.25em; + margin-right: calc(-1*var(--space-xl)) +} + +.flex-gap-xl>* { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.flex-gap-xxl { + margin-bottom: -5.25em; + margin-bottom: calc(-1*var(--space-xxl)); + margin-right: -5.25em; + margin-right: calc(-1*var(--space-xxl)) +} + +.flex-gap-xxl>* { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-xxxxs { + margin: 0.125em; + margin: var(--space-xxxxs) +} + +.margin-xxxs { + margin: 0.25em; + margin: var(--space-xxxs) +} + +.margin-xxs { + margin: 0.375em; + margin: var(--space-xxs) +} + +.margin-xs { + margin: 0.5em; + margin: var(--space-xs) +} + +.margin-sm { + margin: 0.75em; + margin: var(--space-sm) +} + +.margin-md { + margin: 1.25em; + margin: var(--space-md) +} + +.margin-lg { + margin: 2em; + margin: var(--space-lg) +} + +.margin-xl { + margin: 3.25em; + margin: var(--space-xl) +} + +.margin-xxl { + margin: 5.25em; + margin: var(--space-xxl) +} + +.margin-xxxl { + margin: 8.5em; + margin: var(--space-xxxl) +} + +.margin-xxxxl { + margin: 13.75em; + margin: var(--space-xxxxl) +} + +.margin-auto { + margin: auto +} + +.margin-top-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs) +} + +.margin-top-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs) +} + +.margin-top-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs) +} + +.margin-top-xs { + margin-top: 0.5em; + margin-top: var(--space-xs) +} + +.margin-top-sm { + margin-top: 0.75em; + margin-top: var(--space-sm) +} + +.margin-top-md { + margin-top: 1.25em; + margin-top: var(--space-md) +} + +.margin-top-lg { + margin-top: 2em; + margin-top: var(--space-lg) +} + +.margin-top-xl { + margin-top: 3.25em; + margin-top: var(--space-xl) +} + +.margin-top-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl) +} + +.margin-top-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl) +} + +.margin-top-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl) +} + +.margin-top-auto { + margin-top: auto +} + +.margin-bottom-xxxxs { + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-bottom-xxxs { + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-bottom-xxs { + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-bottom-xs { + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-bottom-sm { + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-bottom-md { + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-bottom-lg { + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-bottom-xl { + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-bottom-xxl { + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-bottom-xxxl { + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-bottom-xxxxl { + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-bottom-auto { + margin-bottom: auto +} + +.margin-right-xxxxs { + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-right-xxxs { + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-right-xxs { + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-right-xs { + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-right-sm { + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-right-md { + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-right-lg { + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-right-xl { + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-right-xxl { + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-right-xxxl { + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-right-xxxxl { + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-right-auto { + margin-right: auto +} + +.margin-left-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs) +} + +.margin-left-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs) +} + +.margin-left-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs) +} + +.margin-left-xs { + margin-left: 0.5em; + margin-left: var(--space-xs) +} + +.margin-left-sm { + margin-left: 0.75em; + margin-left: var(--space-sm) +} + +.margin-left-md { + margin-left: 1.25em; + margin-left: var(--space-md) +} + +.margin-left-lg { + margin-left: 2em; + margin-left: var(--space-lg) +} + +.margin-left-xl { + margin-left: 3.25em; + margin-left: var(--space-xl) +} + +.margin-left-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl) +} + +.margin-left-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl) +} + +.margin-left-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl) +} + +.margin-left-auto { + margin-left: auto +} + +.margin-x-xxxxs { + margin-left: 0.125em; + margin-left: var(--space-xxxxs); + margin-right: 0.125em; + margin-right: var(--space-xxxxs) +} + +.margin-x-xxxs { + margin-left: 0.25em; + margin-left: var(--space-xxxs); + margin-right: 0.25em; + margin-right: var(--space-xxxs) +} + +.margin-x-xxs { + margin-left: 0.375em; + margin-left: var(--space-xxs); + margin-right: 0.375em; + margin-right: var(--space-xxs) +} + +.margin-x-xs { + margin-left: 0.5em; + margin-left: var(--space-xs); + margin-right: 0.5em; + margin-right: var(--space-xs) +} + +.margin-x-sm { + margin-left: 0.75em; + margin-left: var(--space-sm); + margin-right: 0.75em; + margin-right: var(--space-sm) +} + +.margin-x-md { + margin-left: 1.25em; + margin-left: var(--space-md); + margin-right: 1.25em; + margin-right: var(--space-md) +} + +.margin-x-lg { + margin-left: 2em; + margin-left: var(--space-lg); + margin-right: 2em; + margin-right: var(--space-lg) +} + +.margin-x-xl { + margin-left: 3.25em; + margin-left: var(--space-xl); + margin-right: 3.25em; + margin-right: var(--space-xl) +} + +.margin-x-xxl { + margin-left: 5.25em; + margin-left: var(--space-xxl); + margin-right: 5.25em; + margin-right: var(--space-xxl) +} + +.margin-x-xxxl { + margin-left: 8.5em; + margin-left: var(--space-xxxl); + margin-right: 8.5em; + margin-right: var(--space-xxxl) +} + +.margin-x-xxxxl { + margin-left: 13.75em; + margin-left: var(--space-xxxxl); + margin-right: 13.75em; + margin-right: var(--space-xxxxl) +} + +.margin-x-auto { + margin-left: auto; + margin-right: auto +} + +.margin-y-xxxxs { + margin-top: 0.125em; + margin-top: var(--space-xxxxs); + margin-bottom: 0.125em; + margin-bottom: var(--space-xxxxs) +} + +.margin-y-xxxs { + margin-top: 0.25em; + margin-top: var(--space-xxxs); + margin-bottom: 0.25em; + margin-bottom: var(--space-xxxs) +} + +.margin-y-xxs { + margin-top: 0.375em; + margin-top: var(--space-xxs); + margin-bottom: 0.375em; + margin-bottom: var(--space-xxs) +} + +.margin-y-xs { + margin-top: 0.5em; + margin-top: var(--space-xs); + margin-bottom: 0.5em; + margin-bottom: var(--space-xs) +} + +.margin-y-sm { + margin-top: 0.75em; + margin-top: var(--space-sm); + margin-bottom: 0.75em; + margin-bottom: var(--space-sm) +} + +.margin-y-md { + margin-top: 1.25em; + margin-top: var(--space-md); + margin-bottom: 1.25em; + margin-bottom: var(--space-md) +} + +.margin-y-lg { + margin-top: 2em; + margin-top: var(--space-lg); + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.margin-y-xl { + margin-top: 3.25em; + margin-top: var(--space-xl); + margin-bottom: 3.25em; + margin-bottom: var(--space-xl) +} + +.margin-y-xxl { + margin-top: 5.25em; + margin-top: var(--space-xxl); + margin-bottom: 5.25em; + margin-bottom: var(--space-xxl) +} + +.margin-y-xxxl { + margin-top: 8.5em; + margin-top: var(--space-xxxl); + margin-bottom: 8.5em; + margin-bottom: var(--space-xxxl) +} + +.margin-y-xxxxl { + margin-top: 13.75em; + margin-top: var(--space-xxxxl); + margin-bottom: 13.75em; + margin-bottom: var(--space-xxxxl) +} + +.margin-y-auto { + margin-top: auto; + margin-bottom: auto +} + +@media not all and (min-width: 32rem) { + .has-margin\@xs { + margin: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-margin\@sm { + margin: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-margin\@md { + margin: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-margin\@lg { + margin: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-margin\@xl { + margin: 0 !important + } +} + +.padding-md { + padding: 1.25em; + padding: var(--space-md) +} + +.padding-xxxxs { + padding: 0.125em; + padding: var(--space-xxxxs) +} + +.padding-xxxs { + padding: 0.25em; + padding: var(--space-xxxs) +} + +.padding-xxs { + padding: 0.375em; + padding: var(--space-xxs) +} + +.padding-xs { + padding: 0.5em; + padding: var(--space-xs) +} + +.padding-sm { + padding: 0.75em; + padding: var(--space-sm) +} + +.padding-lg { + padding: 2em; + padding: var(--space-lg) +} + +.padding-xl { + padding: 3.25em; + padding: var(--space-xl) +} + +.padding-xxl { + padding: 5.25em; + padding: var(--space-xxl) +} + +.padding-xxxl { + padding: 8.5em; + padding: var(--space-xxxl) +} + +.padding-xxxxl { + padding: 13.75em; + padding: var(--space-xxxxl) +} + +.padding-component { + padding: 1.25em; + padding: var(--component-padding) +} + +.padding-top-md { + padding-top: 1.25em; + padding-top: var(--space-md) +} + +.padding-top-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs) +} + +.padding-top-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs) +} + +.padding-top-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs) +} + +.padding-top-xs { + padding-top: 0.5em; + padding-top: var(--space-xs) +} + +.padding-top-sm { + padding-top: 0.75em; + padding-top: var(--space-sm) +} + +.padding-top-lg { + padding-top: 2em; + padding-top: var(--space-lg) +} + +.padding-top-xl { + padding-top: 3.25em; + padding-top: var(--space-xl) +} + +.padding-top-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl) +} + +.padding-top-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl) +} + +.padding-top-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl) +} + +.padding-top-component { + padding-top: 1.25em; + padding-top: var(--component-padding) +} + +.padding-bottom-md { + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-bottom-xxxxs { + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-bottom-xxxs { + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-bottom-xxs { + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-bottom-xs { + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-bottom-sm { + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-bottom-lg { + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-bottom-xl { + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-bottom-xxl { + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-bottom-xxxl { + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-bottom-xxxxl { + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-bottom-component { + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +.padding-right-md { + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-right-xxxxs { + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-right-xxxs { + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-right-xxs { + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-right-xs { + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-right-sm { + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-right-lg { + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-right-xl { + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-right-xxl { + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-right-xxxl { + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-right-xxxxl { + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-right-component { + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-left-md { + padding-left: 1.25em; + padding-left: var(--space-md) +} + +.padding-left-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs) +} + +.padding-left-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs) +} + +.padding-left-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs) +} + +.padding-left-xs { + padding-left: 0.5em; + padding-left: var(--space-xs) +} + +.padding-left-sm { + padding-left: 0.75em; + padding-left: var(--space-sm) +} + +.padding-left-lg { + padding-left: 2em; + padding-left: var(--space-lg) +} + +.padding-left-xl { + padding-left: 3.25em; + padding-left: var(--space-xl) +} + +.padding-left-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl) +} + +.padding-left-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl) +} + +.padding-left-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl) +} + +.padding-left-component { + padding-left: 1.25em; + padding-left: var(--component-padding) +} + +.padding-x-md { + padding-left: 1.25em; + padding-left: var(--space-md); + padding-right: 1.25em; + padding-right: var(--space-md) +} + +.padding-x-xxxxs { + padding-left: 0.125em; + padding-left: var(--space-xxxxs); + padding-right: 0.125em; + padding-right: var(--space-xxxxs) +} + +.padding-x-xxxs { + padding-left: 0.25em; + padding-left: var(--space-xxxs); + padding-right: 0.25em; + padding-right: var(--space-xxxs) +} + +.padding-x-xxs { + padding-left: 0.375em; + padding-left: var(--space-xxs); + padding-right: 0.375em; + padding-right: var(--space-xxs) +} + +.padding-x-xs { + padding-left: 0.5em; + padding-left: var(--space-xs); + padding-right: 0.5em; + padding-right: var(--space-xs) +} + +.padding-x-sm { + padding-left: 0.75em; + padding-left: var(--space-sm); + padding-right: 0.75em; + padding-right: var(--space-sm) +} + +.padding-x-lg { + padding-left: 2em; + padding-left: var(--space-lg); + padding-right: 2em; + padding-right: var(--space-lg) +} + +.padding-x-xl { + padding-left: 3.25em; + padding-left: var(--space-xl); + padding-right: 3.25em; + padding-right: var(--space-xl) +} + +.padding-x-xxl { + padding-left: 5.25em; + padding-left: var(--space-xxl); + padding-right: 5.25em; + padding-right: var(--space-xxl) +} + +.padding-x-xxxl { + padding-left: 8.5em; + padding-left: var(--space-xxxl); + padding-right: 8.5em; + padding-right: var(--space-xxxl) +} + +.padding-x-xxxxl { + padding-left: 13.75em; + padding-left: var(--space-xxxxl); + padding-right: 13.75em; + padding-right: var(--space-xxxxl) +} + +.padding-x-component { + padding-left: 1.25em; + padding-left: var(--component-padding); + padding-right: 1.25em; + padding-right: var(--component-padding) +} + +.padding-y-md { + padding-top: 1.25em; + padding-top: var(--space-md); + padding-bottom: 1.25em; + padding-bottom: var(--space-md) +} + +.padding-y-xxxxs { + padding-top: 0.125em; + padding-top: var(--space-xxxxs); + padding-bottom: 0.125em; + padding-bottom: var(--space-xxxxs) +} + +.padding-y-xxxs { + padding-top: 0.25em; + padding-top: var(--space-xxxs); + padding-bottom: 0.25em; + padding-bottom: var(--space-xxxs) +} + +.padding-y-xxs { + padding-top: 0.375em; + padding-top: var(--space-xxs); + padding-bottom: 0.375em; + padding-bottom: var(--space-xxs) +} + +.padding-y-xs { + padding-top: 0.5em; + padding-top: var(--space-xs); + padding-bottom: 0.5em; + padding-bottom: var(--space-xs) +} + +.padding-y-sm { + padding-top: 0.75em; + padding-top: var(--space-sm); + padding-bottom: 0.75em; + padding-bottom: var(--space-sm) +} + +.padding-y-lg { + padding-top: 2em; + padding-top: var(--space-lg); + padding-bottom: 2em; + padding-bottom: var(--space-lg) +} + +.padding-y-xl { + padding-top: 3.25em; + padding-top: var(--space-xl); + padding-bottom: 3.25em; + padding-bottom: var(--space-xl) +} + +.padding-y-xxl { + padding-top: 5.25em; + padding-top: var(--space-xxl); + padding-bottom: 5.25em; + padding-bottom: var(--space-xxl) +} + +.padding-y-xxxl { + padding-top: 8.5em; + padding-top: var(--space-xxxl); + padding-bottom: 8.5em; + padding-bottom: var(--space-xxxl) +} + +.padding-y-xxxxl { + padding-top: 13.75em; + padding-top: var(--space-xxxxl); + padding-bottom: 13.75em; + padding-bottom: var(--space-xxxxl) +} + +.padding-y-component { + padding-top: 1.25em; + padding-top: var(--component-padding); + padding-bottom: 1.25em; + padding-bottom: var(--component-padding) +} + +@media not all and (min-width: 32rem) { + .has-padding\@xs { + padding: 0 !important + } +} + +@media not all and (min-width: 48rem) { + .has-padding\@sm { + padding: 0 !important + } +} + +@media not all and (min-width: 64rem) { + .has-padding\@md { + padding: 0 !important + } +} + +@media not all and (min-width: 80rem) { + .has-padding\@lg { + padding: 0 !important + } +} + +@media not all and (min-width: 90rem) { + .has-padding\@xl { + padding: 0 !important + } +} + +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap +} + +.text-replace { + overflow: hidden; + color: transparent; + text-indent: 100%; + white-space: nowrap +} + +.text-center { + text-align: center +} + +.text-left { + text-align: left +} + +.text-right { + text-align: right +} + +@media (min-width: 32rem) { + .text-center\@xs { + text-align: center + } + .text-left\@xs { + text-align: left + } + .text-right\@xs { + text-align: right + } +} + +@media (min-width: 48rem) { + .text-center\@sm { + text-align: center + } + .text-left\@sm { + text-align: left + } + .text-right\@sm { + text-align: right + } +} + +@media (min-width: 64rem) { + .text-center\@md { + text-align: center + } + .text-left\@md { + text-align: left + } + .text-right\@md { + text-align: right + } +} + +@media (min-width: 80rem) { + .text-center\@lg { + text-align: center + } + .text-left\@lg { + text-align: left + } + .text-right\@lg { + text-align: right + } +} + +@media (min-width: 90rem) { + .text-center\@xl { + text-align: center + } + .text-left\@xl { + text-align: left + } + .text-right\@xl { + text-align: right + } +} + +.color-inherit { + color: inherit +} + +.color-contrast-medium { + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium, #79797c) +} + +.color-contrast-high { + color: hsl(240, 4%, 20%); + color: var(--color-contrast-high, #313135) +} + +.color-contrast-higher { + color: hsl(240, 8%, 12%); + color: var(--color-contrast-higher, #1c1c21) +} + +.color-primary { + color: hsl(220, 90%, 56%); + color: var(--color-primary, #2a6df4) +} + +.color-accent { + color: hsl(355, 90%, 61%); + color: var(--color-accent, #f54251) +} + +.color-success { + color: hsl(94, 48%, 56%); + color: var(--color-success, #88c559) +} + +.color-warning { + color: hsl(46, 100%, 61%); + color: var(--color-warning, #ffd138) +} + +.color-error { + color: hsl(355, 90%, 61%); + color: var(--color-error, #f54251) +} + +.width-100\% { + width: 100% +} + +.height-100\% { + height: 100% +} + +.media-wrapper { + position: relative; + height: 0; + padding-bottom: 56.25% +} + +.media-wrapper iframe, .media-wrapper video, .media-wrapper img { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100% +} + +.media-wrapper video, .media-wrapper img { + -o-object-fit: cover; + object-fit: cover +} + +.media-wrapper--4\:3 { + padding-bottom: 75% +} + +:root, [data-theme="default"] { + --color-primary-darker: hsl(220, 90%, 36%); + --color-primary-darker-h: 220; + --color-primary-darker-s: 90%; + --color-primary-darker-l: 36%; + --color-primary-dark: hsl(220, 90%, 46%); + --color-primary-dark-h: 220; + --color-primary-dark-s: 90%; + --color-primary-dark-l: 46%; + --color-primary: hsl(220, 90%, 56%); + --color-primary-h: 220; + --color-primary-s: 90%; + --color-primary-l: 56%; + --color-primary-light: hsl(220, 90%, 66%); + --color-primary-light-h: 220; + --color-primary-light-s: 90%; + --color-primary-light-l: 66%; + --color-primary-lighter: hsl(220, 90%, 76%); + --color-primary-lighter-h: 220; + --color-primary-lighter-s: 90%; + --color-primary-lighter-l: 76%; + --color-accent-darker: hsl(355, 90%, 41%); + --color-accent-darker-h: 355; + --color-accent-darker-s: 90%; + --color-accent-darker-l: 41%; + --color-accent-dark: hsl(355, 90%, 51%); + --color-accent-dark-h: 355; + --color-accent-dark-s: 90%; + --color-accent-dark-l: 51%; + --color-accent: hsl(355, 90%, 61%); + --color-accent-h: 355; + --color-accent-s: 90%; + --color-accent-l: 61%; + --color-accent-light: hsl(355, 90%, 71%); + --color-accent-light-h: 355; + --color-accent-light-s: 90%; + --color-accent-light-l: 71%; + --color-accent-lighter: hsl(355, 90%, 81%); + --color-accent-lighter-h: 355; + --color-accent-lighter-s: 90%; + --color-accent-lighter-l: 81%; + --color-black: hsl(240, 8%, 12%); + --color-black-h: 240; + --color-black-s: 8%; + --color-black-l: 12%; + --color-white: hsl(0, 0%, 100%); + --color-white-h: 0; + --color-white-s: 0%; + --color-white-l: 100%; + --color-success-darker: hsl(94, 48%, 36%); + --color-success-darker-h: 94; + --color-success-darker-s: 48%; + --color-success-darker-l: 36%; + --color-success-dark: hsl(94, 48%, 46%); + --color-success-dark-h: 94; + --color-success-dark-s: 48%; + --color-success-dark-l: 46%; + --color-success: hsl(94, 48%, 56%); + --color-success-h: 94; + --color-success-s: 48%; + --color-success-l: 56%; + --color-success-light: hsl(94, 48%, 66%); + --color-success-light-h: 94; + --color-success-light-s: 48%; + --color-success-light-l: 66%; + --color-success-lighter: hsl(94, 48%, 76%); + --color-success-lighter-h: 94; + --color-success-lighter-s: 48%; + --color-success-lighter-l: 76%; + --color-error-darker: hsl(355, 90%, 41%); + --color-error-darker-h: 355; + --color-error-darker-s: 90%; + --color-error-darker-l: 41%; + --color-error-dark: hsl(355, 90%, 51%); + --color-error-dark-h: 355; + --color-error-dark-s: 90%; + --color-error-dark-l: 51%; + --color-error: hsl(355, 90%, 61%); + --color-error-h: 355; + --color-error-s: 90%; + --color-error-l: 61%; + --color-error-light: hsl(355, 90%, 71%); + --color-error-light-h: 355; + --color-error-light-s: 90%; + --color-error-light-l: 71%; + --color-error-lighter: hsl(355, 90%, 81%); + --color-error-lighter-h: 355; + --color-error-lighter-s: 90%; + --color-error-lighter-l: 81%; + --color-warning-darker: hsl(46, 100%, 41%); + --color-warning-darker-h: 46; + --color-warning-darker-s: 100%; + --color-warning-darker-l: 41%; + --color-warning-dark: hsl(46, 100%, 51%); + --color-warning-dark-h: 46; + --color-warning-dark-s: 100%; + --color-warning-dark-l: 51%; + --color-warning: hsl(46, 100%, 61%); + --color-warning-h: 46; + --color-warning-s: 100%; + --color-warning-l: 61%; + --color-warning-light: hsl(46, 100%, 71%); + --color-warning-light-h: 46; + --color-warning-light-s: 100%; + --color-warning-light-l: 71%; + --color-warning-lighter: hsl(46, 100%, 81%); + --color-warning-lighter-h: 46; + --color-warning-lighter-s: 100%; + --color-warning-lighter-l: 81%; + --color-bg: hsl(0, 0%, 100%); + --color-bg-h: 0; + --color-bg-s: 0%; + --color-bg-l: 100%; + --color-contrast-lower: hsl(0, 0%, 95%); + --color-contrast-lower-h: 0; + --color-contrast-lower-s: 0%; + --color-contrast-lower-l: 95%; + --color-contrast-low: hsl(240, 1%, 83%); + --color-contrast-low-h: 240; + --color-contrast-low-s: 1%; + --color-contrast-low-l: 83%; + --color-contrast-medium: hsl(240, 1%, 48%); + --color-contrast-medium-h: 240; + --color-contrast-medium-s: 1%; + --color-contrast-medium-l: 48%; + --color-contrast-high: hsl(240, 4%, 20%); + --color-contrast-high-h: 240; + --color-contrast-high-s: 4%; + --color-contrast-high-l: 20%; + --color-contrast-higher: hsl(240, 8%, 12%); + --color-contrast-higher-h: 240; + --color-contrast-higher-s: 8%; + --color-contrast-higher-l: 12% +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --space-unit: 1.25em + } + } +} + +:root { + --radius: 0.25em +} + +:root { + --font-primary: sans-serif; + --text-base-size: 1em; + --text-scale-ratio: 1.2; + --text-xs: calc(1em/var(--text-scale-ratio)/var(--text-scale-ratio)); + --text-sm: calc(var(--text-xs)*var(--text-scale-ratio)); + --text-md: calc(var(--text-sm)*var(--text-scale-ratio)*var(--text-scale-ratio)); + --text-lg: calc(var(--text-md)*var(--text-scale-ratio)); + --text-xl: calc(var(--text-lg)*var(--text-scale-ratio)); + --text-xxl: calc(var(--text-xl)*var(--text-scale-ratio)); + --text-xxxl: calc(var(--text-xxl)*var(--text-scale-ratio)); + --body-line-height: 1.4; + --heading-line-height: 1.2; + --font-primary-capital-letter: 1 +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --text-base-size: 1.25em; + --text-scale-ratio: 1.25 + } + } +} + +mark { + background-color: hsla(355, 90%, 61%, 0.2); + background-color: hsla(var(--color-accent-h), var(--color-accent-s), var(--color-accent-l), 0.2); + color: inherit +} + +.text-component { + --line-height-multiplier: 1; + --text-vspace-multiplier: 1 +} + +.text-component blockquote { + padding-left: 1em; + border-left: 4px solid hsl(240, 1%, 83%); + border-left: 4px solid var(--color-contrast-low) +} + +.text-component hr { + background: hsl(240, 1%, 83%); + background: var(--color-contrast-low); + height: 1px +} + +.text-component figcaption { + font-size: 0.83333em; + font-size: var(--text-sm); + color: hsl(240, 1%, 48%); + color: var(--color-contrast-medium) +} + +.article.text-component { + --line-height-multiplier: 1.13; + --text-vspace-multiplier: 1.2 +} + +:root { + --btn-font-size: 1em; + --btn-font-size-sm: calc(var(--btn-font-size) - 0.2em); + --btn-font-size-md: calc(var(--btn-font-size) + 0.2em); + --btn-font-size-lg: calc(var(--btn-font-size) + 0.4em); + --btn-radius: 0.25em; + --btn-padding-x: var(--space-sm); + --btn-padding-y: var(--space-xs) +} + +.btn { + --color-shadow: hsla(240, 8%, 12%, 0.15); + --color-shadow: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + box-shadow: 0 4px 16px hsla(240, 8%, 12%, 0.15); + box-shadow: 0 4px 16px hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), 0.15); + cursor: pointer +} + +.btn--primary { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--accent { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.btn--disabled { + opacity: 0.6 +} + +:root { + --form-control-padding-x: var(--space-sm); + --form-control-padding-y: var(--space-xs); + --form-control-radius: 0.25em +} + +.form-control { + border: 2px solid hsl(240, 1%, 83%); + border: 2px solid var(--color-contrast-low) +} + +.form-control:focus { + outline: none; + border-color: hsl(220, 90%, 56%); + border-color: var(--color-primary); + --color-shadow: hsla(220, 90%, 56%, 0.2); + --color-shadow: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control:focus:focus { + box-shadow: 0 0 0 3px hsla(220, 90%, 56%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"] { + border-color: hsl(355, 90%, 61%); + border-color: var(--color-error) +} + +.form-control[aria-invalid="true"]:focus { + --color-shadow: hsla(355, 90%, 61%, 0.2); + --color-shadow: hsla(var(--color-error-h), var(--color-error-s), var(--color-error-l), 0.2); + box-shadow: undefined; + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-control[aria-invalid="true"]:focus:focus { + box-shadow: 0 0 0 3px hsla(355, 90%, 61%, 0.2); + box-shadow: 0 0 0 3px var(--color-shadow) +} + +.form-label { + font-size: 0.83333em; + font-size: var(--text-sm) +} + +:root { + --cd-color-1: hsl(206, 21%, 24%); + --cd-color-1-h: 206; + --cd-color-1-s: 21%; + --cd-color-1-l: 24%; + --cd-color-2: hsl(205, 38%, 89%); + --cd-color-2-h: 205; + --cd-color-2-s: 38%; + --cd-color-2-l: 89%; + --cd-color-3: hsl(207, 10%, 55%); + --cd-color-3-h: 207; + --cd-color-3-s: 10%; + --cd-color-3-l: 55%; + --cd-color-4: hsl(111, 51%, 60%); + --cd-color-4-h: 111; + --cd-color-4-s: 51%; + --cd-color-4-l: 60%; + --cd-color-5: hsl(356, 53%, 49%); + --cd-color-5-h: 356; + --cd-color-5-s: 53%; + --cd-color-5-l: 49%; + --cd-color-6: hsl(47, 85%, 61%); + --cd-color-6-h: 47; + --cd-color-6-s: 85%; + --cd-color-6-l: 61%; + --cd-header-height: 200px; + --font-primary: 'Droid Serif', serif; + --font-secondary: 'Open Sans', sans-serif +} + +@supports (--css: variables) { + @media (min-width: 64rem) { + :root { + --cd-header-height: 300px + } + } +} + +.cd-main-header { + height: 200px; + height: var(--cd-header-height); + background: hsl(206, 21%, 24%); + background: var(--cd-color-1); + color: hsl(0, 0%, 100%); + color: var(--color-white); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale +} + +.cd-main-header h1 { + color: inherit +} + +.cd-timeline { + overflow: hidden; + padding: 2em 0; + padding: var(--space-lg) 0; + color: hsl(207, 10%, 55%); + color: var(--cd-color-3); + background-color: hsl(205, 38%, 93.45%); + background-color: hsl(var(--cd-color-2-h), var(--cd-color-2-s), calc(var(--cd-color-2-l)*1.05)); +} + +.cd-timeline h2 { + font-weight: 700 +} + +.cd-timeline__container { + position: relative; + padding: 1.25em 0; + padding: var(--space-md) 0 +} + +.cd-timeline__container::before { + content: ''; + position: absolute; + top: 0; + left: 18px; + height: 100%; + width: 4px; + background: hsl(205, 38%, 89%); + background: var(--cd-color-2) +} + +@media (min-width: 64rem) { + .cd-timeline__container::before { + left: 50%; + -webkit-transform: translateX(-50%); + -ms-transform: translateX(-50%); + transform: translateX(-50%) + } +} + +.cd-timeline__block { + display: -ms-flexbox; + display: flex; + position: relative; + z-index: 1; + margin-bottom: 2em; + margin-bottom: var(--space-lg) +} + +.cd-timeline__block:last-child { + margin-bottom: 0 +} + +@media (min-width: 64rem) { + .cd-timeline__block:nth-child(even) { + -ms-flex-direction: row-reverse; + flex-direction: row-reverse + } +} + +.cd-timeline__img { + display: -ms-flexbox; + display: flex; + -ms-flex-pack: center; + justify-content: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-negative: 0; + flex-shrink: 0; + width: 40px; + height: 40px; + border-radius: 50%; + box-shadow: 0 0 0 4px hsl(0, 0%, 100%), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05); + box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) +} + +.cd-timeline__img img { + width: 24px; + height: 24px +} + +@media (min-width: 64rem) { + .cd-timeline__img { + width: 60px; + height: 60px; + -ms-flex-order: 1; + order: 1; + margin-left: calc(5% - 30px); + will-change: transform + } + .cd-timeline__block:nth-child(even) .cd-timeline__img { + margin-right: calc(5% - 30px) + } +} + +.cd-timeline__img--picture { + background-color: hsl(111, 51%, 60%); + background-color: var(--cd-color-4) +} + +.cd-timeline__img--movie { + background-color: hsl(356, 53%, 49%); + background-color: var(--cd-color-5) +} + +.cd-timeline__img--location { + background-color: hsl(47, 85%, 61%); + background-color: var(--cd-color-6) +} + +.cd-timeline__content { + -ms-flex-positive: 1; + flex-grow: 1; + position: relative; + margin-left: 1.25em; + margin-left: var(--space-md); + background: hsl(0, 0%, 100%); + background: var(--color-white); + border-radius: 0.25em; + border-radius: var(--radius-md); + padding: 1.25em; + padding: var(--space-md); + box-shadow: 0 3px 0 hsl(205, 38%, 89%); + box-shadow: 0 3px 0 var(--cd-color-2) +} + +.cd-timeline__content::before { + content: ''; + position: absolute; + top: 16px; + right: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-right-color: hsl(0, 0%, 100%); + border-right-color: var(--color-white) +} + +.cd-timeline__content h2 { + color: hsl(206, 21%, 24%); + color: var(--cd-color-1) +} + +@media (min-width: 64rem) { + .cd-timeline__content { + width: 45%; + -ms-flex-positive: 0; + flex-grow: 0; + will-change: transform; + margin: 0; + font-size: 0.8em; + --line-height-multiplier: 1.2 + } + .cd-timeline__content::before { + top: 24px + } + .cd-timeline__block:nth-child(odd) .cd-timeline__content::before { + right: auto; + left: 100%; + width: 0; + height: 0; + border: 7px solid transparent; + border-left-color: hsl(0, 0%, 100%); + border-left-color: var(--color-white) + } +} + +.cd-timeline__date { + color: hsla(207, 10%, 55%, 0.7); + color: hsla(var(--cd-color-3-h), var(--cd-color-3-s), var(--cd-color-3-l), 0.7) +} + +@media (min-width: 64rem) { + .cd-timeline__date { + position: absolute; + width: 100%; + left: 120%; + top: 20px + } + .cd-timeline__block:nth-child(even) .cd-timeline__date { + left: auto; + right: 120%; + text-align: right + } +} + +@media (min-width: 64rem) { + .cd-timeline__img--hidden, .cd-timeline__content--hidden { + visibility: hidden + } + .cd-timeline__img--bounce-in { + -webkit-animation: cd-bounce-1 0.6s; + animation: cd-bounce-1 0.6s + } + .cd-timeline__content--bounce-in { + -webkit-animation: cd-bounce-2 0.6s; + animation: cd-bounce-2 0.6s + } + .cd-timeline__block:nth-child(even) .cd-timeline__content--bounce-in { + -webkit-animation-name: cd-bounce-2-inverse; + animation-name: cd-bounce-2-inverse + } +} + +@-webkit-keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@keyframes cd-bounce-1 { + 0% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } + 60% { + opacity: 1; + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + 100% { + -webkit-transform: scale(1); + transform: scale(1) + } +} + +@-webkit-keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2 { + 0% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@-webkit-keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} + +@keyframes cd-bounce-2-inverse { + 0% { + opacity: 0; + -webkit-transform: translateX(100px); + transform: translateX(100px) + } + 60% { + opacity: 1; + -webkit-transform: translateX(-20px); + transform: translateX(-20px) + } + 100% { + -webkit-transform: translateX(0); + transform: translateX(0) + } +} -- cgit v1.2.3 From fbeda53cae9db7d66dac63851f41b0e01d26f7ac Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:30:35 +0100 Subject: Rename timeline CSS file for easier finding --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index b7f7cda9..73920124 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -3,7 +3,7 @@ {% block title %}Timeline{% endblock %} {% block head %} - + {% endblock %} -- cgit v1.2.3 From f7fe7c83ab66fbbdb5cd77751190239fe8760c41 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:37:38 +0100 Subject: Enable animate in JS --- pydis_site/templates/home/timeline.html | 1 + 1 file changed, 1 insertion(+) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 73920124..f6b867b2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -472,4 +472,5 @@ + {% endblock %} -- cgit v1.2.3 From b42094dd3cae39e137388aa8a4e93d0926b8648f Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:39:35 +0100 Subject: Add media query for heading scaling on mobile devices --- pydis_site/static/css/home/timeline.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index dbe49755..f2920686 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -7,6 +7,12 @@ h2 { font-size: 2em; } +@media (max-width: 500px) { + h2 { + font-size: 1em; + } +} + article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main, form legend { display: block } -- cgit v1.2.3 From 960748e346cb709b0018921c0ae935bae02b375a Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:40:24 +0100 Subject: Reindent HTML --- pydis_site/templates/home/timeline.html | 932 ++++++++++++++++---------------- 1 file changed, 466 insertions(+), 466 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index f6b867b2..c9ff0a27 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -8,469 +8,469 @@ {% endblock %} {% block content %} - {% include "base/navbar.html" %} - -
-
-
-
- Picture -
- -
-

Python Discord is created

-

lorem ipsum

- -
- Jan 8th, 2017 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord hits 1,000 members

-

lorem ipsum

- -
- Nov 10th, 2017 - Read more -
-
-
- -
- -
- Picture -
- -
-

Our logo is born. Thanks Aperture!

-

picture here?

- -
- Feb 3rd, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis hits 2,000 members; pythondiscord.com and @Python are live

-

lorem ipsum

- -
- Mar 4th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

First code jam with the theme “snakes”

-

lorem ipsum

- -
- Mar 23rd, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

The privacy policy is created

-

lorem ipsum

- -
- May 21st, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

Do You Even Python and PyDis merger

-

lorem ipsum

- -
- Jun 9th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis hits 5,000 members

-

lorem ipsum

- -
- Jun 20th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

-

lorem ipsum

- -
- Jul 10th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

First Hacktoberfest PyDis event; @SeasonalBot is created

-

lorem ipsum

- -
- Oct 1st, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis hits 10,000 members

-

lorem ipsum

- -
- Nov 24th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

django-simple-bulma is released on PyPi

-

lorem ipsum

- -
- Dec 19th, 2018 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis hits 15,000 members; the “hot ones special” video is released

-

lorem ipsum

- -
- Apr 8th, 2019 - Read more -
-
-
- -
- -
- Picture -
- -
-

the Django rewrite of pythondiscord.com is now live!

-

lorem ipsum

- -
- Sep 15, 2019 - Read more -
-
-
- -
- -
- Picture -
- -
-

flake8-annotations is released on PyPI

-

lorem ipsum

- -
- Sep 25th, 2019 - Read more -
-
-
- -
- -
- Picture -
- -
-

The code of conduct is created

-

lorem ipsum

- -
- Oct 26th, 2019 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis hits 30,000 members

-

lorem ipsum

- -
- Dec 22nd, 2019 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

-

lorem ipsum

- -
- Jan 17, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

The new help channel system is live

-

lorem ipsum

- -
- Apr 5th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord hits 40,000 members, and is now bigger than Liechtenstein.

-

picture here?

- -
- Apr 14, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

-

lorem ipsum

- -
- Apr 17th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

ModMail is now live

-

lorem ipsum

- -
- May 25th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord is now listed on python.org/community

-

lorem ipsum

- -
- May 28th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord Public Statistics are now live

-

lorem ipsum

- -
- Jun 4th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

-

lorem ipsum

- -
- Jul 31st, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord is now the new home of the PyWeek event!

-

lorem ipsum

- -
- Aug 16th, 2020 - Read more -
-
-
- -
- -
- Picture -
- -
-

Python Discord hits 100,000 members.

-

lorem ipsum

- -
- Sep ??, 2020 - Read more -
-
-
-
-
- - - {% endblock %} +{% include "base/navbar.html" %} + +
+
+
+
+ Picture +
+ +
+

Python Discord is created

+

lorem ipsum

+ +
+ Jan 8th, 2017 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 1,000 members

+

lorem ipsum

+ +
+ Nov 10th, 2017 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Our logo is born. Thanks Aperture!

+

picture here?

+ +
+ Feb 3rd, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 2,000 members; pythondiscord.com and @Python are live

+

lorem ipsum

+ +
+ Mar 4th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

First code jam with the theme “snakes”

+

lorem ipsum

+ +
+ Mar 23rd, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The privacy policy is created

+

lorem ipsum

+ +
+ May 21st, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Do You Even Python and PyDis merger

+

lorem ipsum

+ +
+ Jun 9th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 5,000 members

+

lorem ipsum

+ +
+ Jun 20th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

+

lorem ipsum

+ +
+ Jul 10th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

First Hacktoberfest PyDis event; @SeasonalBot is created

+

lorem ipsum

+ +
+ Oct 1st, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 10,000 members

+

lorem ipsum

+ +
+ Nov 24th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

django-simple-bulma is released on PyPi

+

lorem ipsum

+ +
+ Dec 19th, 2018 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 15,000 members; the “hot ones special” video is released

+

lorem ipsum

+ +
+ Apr 8th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

the Django rewrite of pythondiscord.com is now live!

+

lorem ipsum

+ +
+ Sep 15, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

flake8-annotations is released on PyPI

+

lorem ipsum

+ +
+ Sep 25th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The code of conduct is created

+

lorem ipsum

+ +
+ Oct 26th, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis hits 30,000 members

+

lorem ipsum

+ +
+ Dec 22nd, 2019 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

+

lorem ipsum

+ +
+ Jan 17, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

The new help channel system is live

+

lorem ipsum

+ +
+ Apr 5th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 40,000 members, and is now bigger than Liechtenstein.

+

picture here?

+ +
+ Apr 14, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

+

lorem ipsum

+ +
+ Apr 17th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

ModMail is now live

+

lorem ipsum

+ +
+ May 25th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord is now listed on python.org/community

+

lorem ipsum

+ +
+ May 28th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord Public Statistics are now live

+

lorem ipsum

+ +
+ Jun 4th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

+

lorem ipsum

+ +
+ Jul 31st, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord is now the new home of the PyWeek event!

+

lorem ipsum

+ +
+ Aug 16th, 2020 + Read more +
+
+
+ +
+ +
+ Picture +
+ +
+

Python Discord hits 100,000 members.

+

lorem ipsum

+ +
+ Sep ??, 2020 + Read more +
+
+
+
+
+ + +{% endblock %} -- cgit v1.2.3 From 392be623a573a845ca4c4af5228250192a7f16b1 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Sat, 10 Oct 2020 13:41:26 +0100 Subject: Remove read more buttons --- pydis_site/templates/home/timeline.html | 27 --------------------------- 1 file changed, 27 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index c9ff0a27..8ad19f4b 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -23,7 +23,6 @@
Jan 8th, 2017 - Read more
@@ -40,7 +39,6 @@
Nov 10th, 2017 - Read more
@@ -57,7 +55,6 @@
Feb 3rd, 2018 - Read more
@@ -74,7 +71,6 @@
Mar 4th, 2018 - Read more
@@ -91,7 +87,6 @@
Mar 23rd, 2018 - Read more
@@ -108,7 +103,6 @@
May 21st, 2018 - Read more
@@ -125,7 +119,6 @@
Jun 9th, 2018 - Read more
@@ -142,7 +135,6 @@
Jun 20th, 2018 - Read more
@@ -159,7 +151,6 @@
Jul 10th, 2018 - Read more
@@ -176,7 +167,6 @@
Oct 1st, 2018 - Read more
@@ -193,7 +183,6 @@
Nov 24th, 2018 - Read more
@@ -210,7 +199,6 @@
Dec 19th, 2018 - Read more
@@ -227,7 +215,6 @@
Apr 8th, 2019 - Read more
@@ -244,7 +231,6 @@
Sep 15, 2019 - Read more
@@ -261,7 +247,6 @@
Sep 25th, 2019 - Read more
@@ -278,7 +263,6 @@
Oct 26th, 2019 - Read more
@@ -295,7 +279,6 @@
Dec 22nd, 2019 - Read more
@@ -312,7 +295,6 @@
Jan 17, 2020 - Read more
@@ -329,7 +311,6 @@
Apr 5th, 2020 - Read more
@@ -346,7 +327,6 @@
Apr 14, 2020 - Read more
@@ -363,7 +343,6 @@
Apr 17th, 2020 - Read more
@@ -380,7 +359,6 @@
May 25th, 2020 - Read more
@@ -397,7 +375,6 @@
May 28th, 2020 - Read more
@@ -414,7 +391,6 @@
Jun 4th, 2020 - Read more
@@ -431,7 +407,6 @@
Jul 31st, 2020 - Read more
@@ -448,7 +423,6 @@
Aug 16th, 2020 - Read more
@@ -465,7 +439,6 @@
Sep ??, 2020 - Read more
-- cgit v1.2.3 From e982e2841da532e3eb215926277a4c3d17e47e81 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:24:10 +0100 Subject: Add copy from lemon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Leon Sandøy --- pydis_site/templates/home/timeline.html | 60 ++++++++++++++++++--------------- 1 file changed, 33 insertions(+), 27 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 8ad19f4b..4d837b30 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -19,7 +19,7 @@

Python Discord is created

-

lorem ipsum

+

joe becomes one of the owners around 3 days after it is created, and lemon joins the owner team later in the year, when the community has around 300 members.

Jan 8th, 2017 @@ -35,7 +35,7 @@

Python Discord hits 1,000 members

-

lorem ipsum

+

Our main source of new users at this point is a post on Reddit that happens to get very good SEO. We are one of the top 10 search engine hits for the search term "python discord".

Nov 10th, 2017 @@ -50,7 +50,7 @@
-

Our logo is born. Thanks Aperture!

+

Our logo is born. Thanks @Aperture!

picture here?

@@ -67,7 +67,7 @@

PyDis hits 2,000 members; pythondiscord.com and @Python are live

-

lorem ipsum

+

The public moderation bot we're using at the time, Rowboat, announces it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we can have more control over its features. We also buy a domain and start making a website in Flask.

Mar 4th, 2018 @@ -83,7 +83,7 @@

First code jam with the theme “snakes”

-

lorem ipsum

+

Our very first Code Jam attracts a handful of users who work in random teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written for this jam still lives on in SeasonalBot, and you can play with it by using the .snakes command. For more information on this event, see the event page

Mar 23rd, 2018 @@ -99,7 +99,7 @@

The privacy policy is created

-

lorem ipsum

+

Since data privacy is quite important to us, we create a privacy page pretty much as soon as our new bot and site starts collecting some data. To this day, we keep our privacy policy up to date with all changes, and since April 2020 we've started doing monthly data reviews.

May 21st, 2018 @@ -115,7 +115,7 @@

Do You Even Python and PyDis merger

-

lorem ipsum

+

At this point in time, there are only two serious Python communities on Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold proposal - let's shut down their community, replace it with links to ours, and in return we will let their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and @Mr. Hemlock joining our Admin team

Jun 9th, 2018 @@ -130,8 +130,8 @@
-

PyDis hits 5,000 members

-

lorem ipsum

+

PyDis hits 5,000 members and partners with r/Python

+

As we continue to grow, we approach the r/Python subreddit and ask to become their official Discord community. They agree, and we become listed in their sidebar, giving us yet another source of new members.

Jun 20th, 2018 @@ -147,7 +147,7 @@

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

-

lorem ipsum

+

After being rejected for their Partner program several times, we finally get approved. The recent partnership with the r/Python subreddit plays a significant role in qualifying us for this partnership.

Jul 10th, 2018 @@ -163,7 +163,7 @@

First Hacktoberfest PyDis event; @SeasonalBot is created

-

lorem ipsum

+

We create a second bot for our community and fill it up with simple, fun and relatively easy issues. The idea is to create an approachable arena for our members to cut their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck. We're training our members to be productive contributors in the open-source ecosystem.

Oct 1st, 2018 @@ -179,7 +179,7 @@

PyDis hits 10,000 members

-

lorem ipsum

+

We partner with RLBot, move from GitLab to GitHub, and start putting together the first Advent of Code event.

Nov 24th, 2018 @@ -195,7 +195,7 @@

django-simple-bulma is released on PyPi

-

lorem ipsum

+

Our very first package on PyPI, django-simple-bulma is a package that sets up the Bulma CSS framework for your Django application and lets you configure everything in settings.py.

Dec 19th, 2018 @@ -211,7 +211,7 @@

PyDis hits 15,000 members; the “hot ones special” video is released

-

lorem ipsum

+
Apr 8th, 2019 @@ -226,8 +226,8 @@
-

the Django rewrite of pythondiscord.com is now live!

-

lorem ipsum

+

The Django rewrite of pythondiscord.com is now live!

+

The site is getting more and more complex, and it's time for a rewrite. We decide to go for a different stack, and build a website based on Django, DRF, Bulma and PostgreSQL.

Sep 15, 2019 @@ -259,7 +259,7 @@

The code of conduct is created

-

lorem ipsum

+

Inspired by the Adafruit, Rust and Django communities, an essential community pillar is created; Our Code of Conduct.

Oct 26th, 2019 @@ -275,7 +275,7 @@

PyDis hits 30,000 members

-

lorem ipsum

+

More than tripling in size since the year before, the community hits 30000 users. At this point, we're probably the largest Python chat community on the planet.

Dec 22nd, 2019 @@ -291,7 +291,9 @@

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

-

lorem ipsum

+

Our Code Jams are becoming an increasingly big deal, and the Kivy core developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!

+ +
Jan 17, 2020 @@ -307,7 +309,7 @@

The new help channel system is live

-

lorem ipsum

+

We release our dynamic help-channel system, which allows you to claim your very own help channel instead of fighting over the static help channels. We release a Help Channel Guide to help our members fully understand how the system works.

Apr 5th, 2020 @@ -339,7 +341,9 @@

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

-

lorem ipsum

+

The creator of Arcade, Paul Vincent Craven, joins us as a judge. Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.

+ +
Apr 17th, 2020 @@ -355,7 +359,7 @@

ModMail is now live

-

lorem ipsum

+

Having originally planned to write our own ModMail bot from scratch, we come across an exceptionally good ModMail bot by kyb3r and decide to just self-host that one instead.

May 25th, 2020 @@ -371,7 +375,7 @@

Python Discord is now listed on python.org/community

-

lorem ipsum

+

After working towards this goal for months, we finally work out an arrangement with the PSF that allows us to be listed on that most holiest of websites: https://python.org/. There was much rejoicing.

May 28th, 2020 @@ -387,7 +391,7 @@

Python Discord Public Statistics are now live

-

lorem ipsum

+

After getting numerous requests to publish beautiful data on member count and channel use, we create https://stats.pythondiscord.com/ for all to enjoy.

Jun 4th, 2020 @@ -403,7 +407,9 @@

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

-

lorem ipsum

+

Sponsored by the Django Software Foundation and JetBrains, the Summer Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:

+ +
Jul 31st, 2020 @@ -419,7 +425,7 @@

Python Discord is now the new home of the PyWeek event!

-

lorem ipsum

+

PyWeek, a game jam that has been running since 2005, joins Python Discord as one of our official events. Find more information about PyWeek on their official website.

Aug 16th, 2020 @@ -435,7 +441,7 @@

Python Discord hits 100,000 members.

-

lorem ipsum

+

After years of hard work, we hit 100,000 users. A monumental milestone, and one we're very proud of. To commemorate it, we create this timeline.

Sep ??, 2020 -- cgit v1.2.3 From de3b67c562fa90eac2d79938481a5b84b4e1079f Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:30:41 +0100 Subject: Remove pointless comments --- pydis_site/templates/home/timeline.html | 314 ++++++++++++++++++-------------- 1 file changed, 175 insertions(+), 139 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 4d837b30..da89c25e 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -15,39 +15,41 @@
Picture -
+

Python Discord is created

-

joe becomes one of the owners around 3 days after it is created, and lemon joins the owner team later in the year, when the community has around 300 members.

+

joe becomes one of the owners around 3 days after it + is created, and lemon joins the owner team later in the year, when the community + has around 300 members.

Jan 8th, 2017
-
-
+
+
-
Picture -
+

Python Discord hits 1,000 members

-

Our main source of new users at this point is a post on Reddit that happens to get very good SEO. We are one of the top 10 search engine hits for the search term "python discord".

+

Our main source of new users at this point is a post on Reddit that + happens to get very good SEO. We are one of the top 10 search engine hits for the search term + "python discord".

Nov 10th, 2017
-
-
+
+
-
Picture -
+

Our logo is born. Thanks @Aperture!

@@ -56,190 +58,208 @@
Feb 3rd, 2018
-
-
+
+
-
Picture -
+

PyDis hits 2,000 members; pythondiscord.com and @Python are live

-

The public moderation bot we're using at the time, Rowboat, announces it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we can have more control over its features. We also buy a domain and start making a website in Flask.

+

The public moderation bot we're using at the time, Rowboat, announces + it will be shutting down. We decide that we'll write our own bot to handle moderation, so that we + can have more control over its features. We also buy a domain and start making a website in Flask. +

Mar 4th, 2018
-
-
+
+
-
Picture -
+

First code jam with the theme “snakes”

-

Our very first Code Jam attracts a handful of users who work in random teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written for this jam still lives on in SeasonalBot, and you can play with it by using the .snakes command. For more information on this event, see the event page

+

Our very first Code Jam attracts a handful of users who work in random + teams of 2. We ask our participants to write a snake-themed Discord bot. Most of the code written + for this jam still lives on in SeasonalBot, and you can play with it by using the + .snakes command. For more information on this event, see the event page

Mar 23rd, 2018
-
-
+
+
-
Picture -
+

The privacy policy is created

-

Since data privacy is quite important to us, we create a privacy page pretty much as soon as our new bot and site starts collecting some data. To this day, we keep our privacy policy up to date with all changes, and since April 2020 we've started doing monthly data reviews.

+

Since data privacy is quite important to us, we create a privacy page + pretty much as soon as our new bot and site starts collecting some data. To this day, we keep our privacy policy up to date with all + changes, and since April 2020 we've started doing monthly data reviews.

May 21st, 2018
-
-
+
+
-
Picture -
+

Do You Even Python and PyDis merger

-

At this point in time, there are only two serious Python communities on Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold proposal - let's shut down their community, replace it with links to ours, and in return we will let their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and @Mr. Hemlock joining our Admin team

+

At this point in time, there are only two serious Python communities on + Discord - Ours, and one called Do You Even Python. We approach the owners of DYEP with a bold + proposal - let's shut down their community, replace it with links to ours, and in return we will let + their staff join our staff. This gives us a big boost in members, and eventually leads to @eivl and + @Mr. Hemlock joining our Admin team

Jun 9th, 2018
-
-
+
+
-
Picture -
+

PyDis hits 5,000 members and partners with r/Python

-

As we continue to grow, we approach the r/Python subreddit and ask to become their official Discord community. They agree, and we become listed in their sidebar, giving us yet another source of new members.

+

As we continue to grow, we approach the r/Python subreddit and ask to + become their official Discord community. They agree, and we become listed in their sidebar, giving + us yet another source of new members.

Jun 20th, 2018
-
-
+
+
-
Picture -
+

PyDis is now partnered with Discord; the vanity URL discord.gg/python is created

-

After being rejected for their Partner program several times, we finally get approved. The recent partnership with the r/Python subreddit plays a significant role in qualifying us for this partnership.

+

After being rejected for their Partner program several times, we + finally get approved. The recent partnership with the r/Python subreddit plays a significant role in + qualifying us for this partnership.

Jul 10th, 2018
-
-
+
+
-
Picture -
+

First Hacktoberfest PyDis event; @SeasonalBot is created

-

We create a second bot for our community and fill it up with simple, fun and relatively easy issues. The idea is to create an approachable arena for our members to cut their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck. We're training our members to be productive contributors in the open-source ecosystem.

+

We create a second bot for our community and fill it up with simple, + fun and relatively easy issues. The idea is to create an approachable arena for our members to cut + their open-source teeth on, and to provide lots of help and hand-holding for those who get stuck. + We're training our members to be productive contributors in the open-source ecosystem.

Oct 1st, 2018
-
-
+
+
-
Picture -
+

PyDis hits 10,000 members

-

We partner with RLBot, move from GitLab to GitHub, and start putting together the first Advent of Code event.

+

We partner with RLBot, move from GitLab to GitHub, and start putting + together the first Advent of Code event.

Nov 24th, 2018
-
-
+
+
-
Picture -
+

django-simple-bulma is released on PyPi

-

Our very first package on PyPI, django-simple-bulma is a package that sets up the Bulma CSS framework for your Django application and lets you configure everything in settings.py.

+

Our very first package on PyPI, django-simple-bulma is a package that + sets up the Bulma CSS framework for your Django application and lets you configure everything in + settings.py.

Dec 19th, 2018
-
-
+
+
-
Picture -
+

PyDis hits 15,000 members; the “hot ones special” video is released

- +
Apr 8th, 2019
-
-
+
+
-
Picture -
+

The Django rewrite of pythondiscord.com is now live!

-

The site is getting more and more complex, and it's time for a rewrite. We decide to go for a different stack, and build a website based on Django, DRF, Bulma and PostgreSQL.

+

The site is getting more and more complex, and it's time for a rewrite. + We decide to go for a different stack, and build a website based on Django, DRF, Bulma and + PostgreSQL.

Sep 15, 2019
-
-
+
+
-
Picture -
+

flake8-annotations is released on PyPI

@@ -248,208 +268,224 @@
Sep 25th, 2019
-
-
+
+
-
Picture -
+

The code of conduct is created

-

Inspired by the Adafruit, Rust and Django communities, an essential community pillar is created; Our Code of Conduct.

+

Inspired by the Adafruit, Rust and Django communities, an essential + community pillar is created; Our Code of + Conduct.

Oct 26th, 2019
-
-
+
+
-
Picture -
+

PyDis hits 30,000 members

-

More than tripling in size since the year before, the community hits 30000 users. At this point, we're probably the largest Python chat community on the planet.

+

More than tripling in size since the year before, the community hits + 30000 users. At this point, we're probably the largest Python chat community on the planet.

Dec 22nd, 2019
-
- + +
-
Picture -
+

PyDis sixth code jam with the theme “Ancient technology” and the technology Kivy

-

Our Code Jams are becoming an increasingly big deal, and the Kivy core developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!

- - +

Our Code Jams are becoming an increasingly big deal, and the Kivy core + developers join us to judge the event and help out our members during the event. One of them, + @tshirtman, even joins our staff!

+ +
Jan 17, 2020
-
- + +
-
Picture -
+

The new help channel system is live

-

We release our dynamic help-channel system, which allows you to claim your very own help channel instead of fighting over the static help channels. We release a Help Channel Guide to help our members fully understand how the system works.

+

We release our dynamic help-channel system, which allows you to claim + your very own help channel instead of fighting over the static help channels. We release a Help Channel Guide to + help our members fully understand how the system works.

Apr 5th, 2020
-
- + +
-
Picture -
+

Python Discord hits 40,000 members, and is now bigger than Liechtenstein.

-

picture here?

+

+

Apr 14, 2020
-
- + +
-
Picture -
+

PyDis Game Jam 2020 with the “Three of a Kind” theme and Arcade as the technology

-

The creator of Arcade, Paul Vincent Craven, joins us as a judge. Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.

- - +

The creator of Arcade, Paul Vincent Craven, joins us as a judge. + Several of the Code Jam participants also end up getting involved contributing to the Arcade + repository.

+ +
Apr 17th, 2020
-
- + +
-
Picture -
+

ModMail is now live

-

Having originally planned to write our own ModMail bot from scratch, we come across an exceptionally good ModMail bot by kyb3r and decide to just self-host that one instead.

+

Having originally planned to write our own ModMail bot from scratch, we + come across an exceptionally good ModMail bot by + kyb3r and decide to just self-host that one instead.

May 25th, 2020
-
- + +
-
Picture -
+

Python Discord is now listed on python.org/community

-

After working towards this goal for months, we finally work out an arrangement with the PSF that allows us to be listed on that most holiest of websites: https://python.org/. There was much rejoicing.

+

After working towards this goal for months, we finally work out an + arrangement with the PSF that allows us to be listed on that most holiest of websites: + https://python.org/. There was much rejoicing.

May 28th, 2020
-
- + +
-
Picture -
+

Python Discord Public Statistics are now live

-

After getting numerous requests to publish beautiful data on member count and channel use, we create https://stats.pythondiscord.com/ for all to enjoy.

+

After getting numerous requests to publish beautiful data on member + count and channel use, we create https://stats.pythondiscord.com/ for all to enjoy.

Jun 4th, 2020
-
- + +
-
Picture -
+

PyDis summer code jam 2020 with the theme “Early Internet” and Django as the technology

-

Sponsored by the Django Software Foundation and JetBrains, the Summer Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:

- - +

Sponsored by the Django Software Foundation and JetBrains, the Summer + Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic + projects. Check them out in our judge stream below:

+ +
Jul 31st, 2020
-
- + +
-
Picture -
+

Python Discord is now the new home of the PyWeek event!

-

PyWeek, a game jam that has been running since 2005, joins Python Discord as one of our official events. Find more information about PyWeek on their official website.

+

PyWeek, a game jam that has been running since 2005, joins Python + Discord as one of our official events. Find more information about PyWeek on their official website.

Aug 16th, 2020
-
- + +
-
Picture -
+

Python Discord hits 100,000 members.

-

After years of hard work, we hit 100,000 users. A monumental milestone, and one we're very proud of. To commemorate it, we create this timeline.

+

After years of hard work, we hit 100,000 users. A monumental milestone, + and one we're very proud of. To commemorate it, we create this timeline.

Sep ??, 2020
-
- + + - + {% endblock %} -- cgit v1.2.3 From c0e9af6d8c736205bcefc92bf89e6d587db29455 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:31:04 +0100 Subject: Remove flake8-annotations timeline item --- pydis_site/templates/home/timeline.html | 15 --------------- 1 file changed, 15 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index da89c25e..6e466106 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -256,21 +256,6 @@ -
-
- Picture -
- -
-

flake8-annotations is released on PyPI

-

lorem ipsum

- -
- Sep 25th, 2019 -
-
-
-
Picture -- cgit v1.2.3 From 059f6c07b755290634f9aae1a3657d3c4d761b43 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:32:44 +0100 Subject: Add logo to new logo timeline item --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 6e466106..0c8fc61c 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -53,7 +53,7 @@

Our logo is born. Thanks @Aperture!

-

picture here?

+

Feb 3rd, 2018 -- cgit v1.2.3 From 410bfd8996af861beedacc6711adce26dc5f684b Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:40:12 +0100 Subject: Responsively size YouTube embeds --- pydis_site/static/css/home/timeline.css | 14 +++++++++++++ pydis_site/templates/home/timeline.html | 36 +++++++++++++++++++++------------ 2 files changed, 37 insertions(+), 13 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index f2920686..77b2f8da 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -29,6 +29,20 @@ button, input, textarea, select { margin: 0 } +.video-container { + position: relative; + width: 100%; + height: 0; + padding-bottom: 56.25%; +} +.video { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + .btn, .form-control, .link, .reset { background-color: transparent; padding: 0; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 0c8fc61c..9c7817e9 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -53,7 +53,9 @@

Our logo is born. Thanks @Aperture!

-

+

+

Feb 3rd, 2018 @@ -229,9 +231,11 @@

PyDis hits 15,000 members; the “hot ones special” video is released

- +
+ +
Apr 8th, 2019 @@ -300,9 +304,11 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!

- +
+ +
Jan 17, 2020 @@ -356,9 +362,11 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.

- +
+ +
Apr 17th, 2020 @@ -427,9 +435,11 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:

- +
+ +
Jul 31st, 2020 -- cgit v1.2.3 From 74992b465b7acceadaee551ed6aa3337a61213ac Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:58:40 +0100 Subject: Add fontawesome icons to every timeline event --- pydis_site/templates/home/timeline.html | 46 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 23 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 9c7817e9..fee54d66 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -31,7 +31,7 @@
- Picture +
@@ -65,7 +65,7 @@
- Picture +
@@ -83,7 +83,7 @@
- Picture +
@@ -102,7 +102,7 @@
- Picture +
@@ -121,7 +121,7 @@
- Picture +
@@ -140,7 +140,7 @@
- Picture +
@@ -157,7 +157,7 @@
- Picture +
@@ -174,7 +174,7 @@
- Picture +
@@ -192,7 +192,7 @@
- Picture +
@@ -208,7 +208,7 @@
- Picture +
@@ -226,7 +226,7 @@
- Picture +
@@ -245,7 +245,7 @@
- Picture +
@@ -262,7 +262,7 @@
- Picture +
@@ -279,7 +279,7 @@
- Picture +
@@ -295,7 +295,7 @@
- Picture +
@@ -318,7 +318,7 @@
- Picture +
@@ -353,7 +353,7 @@
- Picture +
@@ -376,7 +376,7 @@
- Picture +
@@ -393,7 +393,7 @@
- Picture +
@@ -410,7 +410,7 @@
- Picture +
@@ -426,7 +426,7 @@
- Picture +
@@ -449,7 +449,7 @@
- Picture +
@@ -466,7 +466,7 @@
- Picture +
-- cgit v1.2.3 From 914614e58e901e5f32b632b2cc05f151dafd71e8 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:58:49 +0100 Subject: Better scale YouTube videos --- pydis_site/static/css/home/timeline.css | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 77b2f8da..00e0b447 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -33,7 +33,7 @@ button, input, textarea, select { position: relative; width: 100%; height: 0; - padding-bottom: 56.25%; + padding-bottom: 75%; } .video { position: absolute; @@ -3463,9 +3463,14 @@ mark { box-shadow: 0 0 0 4px var(--color-white), inset 0 2px 0 rgba(0, 0, 0, 0.08), 0 3px 0 4px rgba(0, 0, 0, 0.05) } +.cd-timeline__img i { + font-size: 1.5em; + color: white; +} + .cd-timeline__img img { - width: 24px; - height: 24px + width: 30px; + height: 30px; } @media (min-width: 64rem) { @@ -3477,14 +3482,14 @@ mark { margin-left: calc(5% - 30px); will-change: transform } + .cd-timeline__block:nth-child(even) .cd-timeline__img { margin-right: calc(5% - 30px) } } .cd-timeline__img--picture { - background-color: hsl(111, 51%, 60%); - background-color: var(--cd-color-4) + background-color: #7289DA; } .cd-timeline__img--movie { -- cgit v1.2.3 From 1da259dde97b856262185fc06dd25d5bae385cff Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 00:58:56 +0100 Subject: Update default picture to community logo --- .../static/images/timeline/cd-icon-picture.svg | 83 ++++++++++++++++++++-- 1 file changed, 78 insertions(+), 5 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index dd5f180b..b173ff12 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -1,5 +1,78 @@ - - - + +image/svg+xml \ No newline at end of file -- cgit v1.2.3 From 479624eab5074427345ea46e226acd58807d285b Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:03:42 +0100 Subject: Add unit test for timeline page --- pydis_site/apps/home/tests/test_views.py | 7 +++++++ pydis_site/apps/home/urls.py | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/apps/home/tests/test_views.py b/pydis_site/apps/home/tests/test_views.py index 572317a7..6ef4cf30 100644 --- a/pydis_site/apps/home/tests/test_views.py +++ b/pydis_site/apps/home/tests/test_views.py @@ -202,6 +202,13 @@ class TestIndexReturns200(TestCase): resp = self.client.get(url) self.assertEqual(resp.status_code, 200) +class TestTimelineReturns200(TestCase): + def test_timeline_returns_200(self): + """Check that the timeline page returns a HTTP 200 response.""" + url = reverse('timeline') + resp = self.client.get(url) + self.assertEqual(resp.status_code, 200) + class TestLoginCancelledReturns302(TestCase): def test_login_cancelled_returns_302(self): diff --git a/pydis_site/apps/home/urls.py b/pydis_site/apps/home/urls.py index cf0c7457..14d118f8 100644 --- a/pydis_site/apps/home/urls.py +++ b/pydis_site/apps/home/urls.py @@ -38,5 +38,5 @@ urlpatterns = [ path('admin/', admin.site.urls), path('notifications/', include('django_nyt.urls')), - path('timeline/', timeline), + path('timeline/', timeline, name="timeline"), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) -- cgit v1.2.3 From aa1bd99d69a66ed2b931c864305b45664256cf69 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:07:53 +0100 Subject: Fix linting in tests file --- pydis_site/apps/home/tests/test_views.py | 1 + 1 file changed, 1 insertion(+) (limited to 'pydis_site') diff --git a/pydis_site/apps/home/tests/test_views.py b/pydis_site/apps/home/tests/test_views.py index 6ef4cf30..40c80205 100644 --- a/pydis_site/apps/home/tests/test_views.py +++ b/pydis_site/apps/home/tests/test_views.py @@ -202,6 +202,7 @@ class TestIndexReturns200(TestCase): resp = self.client.get(url) self.assertEqual(resp.status_code, 200) + class TestTimelineReturns200(TestCase): def test_timeline_returns_200(self): """Check that the timeline page returns a HTTP 200 response.""" -- cgit v1.2.3 From 4cb6b5abd96e1aa83380d4fb990985edd4346260 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:16:04 +0100 Subject: Update missed icon --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index fee54d66..558257ac 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -336,7 +336,7 @@
- Picture +
-- cgit v1.2.3 From 59a29dc7c2a716ba84e51100d2db947291e1328f Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:16:35 +0100 Subject: Fix line endings --- pydis_site/static/images/timeline/cd-icon-picture.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index b173ff12..6ebd0d83 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -75,4 +75,4 @@ class="st3" id="path1950" inkscape:connector-curvature="0" - inkscape:label="lower_snake" /> \ No newline at end of file + inkscape:label="lower_snake" /> -- cgit v1.2.3 From 0ad74500786c7e3389c475aa6affbc9b6728c5bc Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:22:35 +0100 Subject: Hyperlink stats page --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 558257ac..f785fde4 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -416,7 +416,7 @@

Python Discord Public Statistics are now live

After getting numerous requests to publish beautiful data on member - count and channel use, we create https://stats.pythondiscord.com/ for all to enjoy.

+ count and channel use, we create stats.pythondiscord.com for all to enjoy.

Jun 4th, 2020 -- cgit v1.2.3 From 31ce101536c92c69ff543a7fe64982368d90b9a3 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:23:30 +0100 Subject: Update privacy policy icon --- pydis_site/templates/home/timeline.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index f785fde4..ad81a703 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -102,7 +102,7 @@
- +
-- cgit v1.2.3 From 8a9337ecb120c325e7f2f4c22e2d4c1b46ac3f48 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:30:23 +0100 Subject: Use bigger icon for timeline items --- .../static/images/timeline/cd-icon-picture.svg | 82 ++++++++++------------ 1 file changed, 38 insertions(+), 44 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index 6ebd0d83..c2e297ac 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -7,16 +7,19 @@ xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" - xml:space="preserve" - viewBox="0 0 463.86203 463.86203" - y="0px" - x="0px" - id="svg8" + enable-background="new 0 0 438 438" version="1.1" - sodipodi:docname="logo_discord.svg" + viewBox="0 0 346.16486 345.72064" + xml:space="preserve" + id="svg6016" + sodipodi:docname="logo_solo.svg" inkscape:version="0.91 r13725" - width="463.86203" - height="463.86203">image/svg+xml + style="fill:#ffffff" /> \ No newline at end of file -- cgit v1.2.3 From f3c28395e234b34006d986ae572c6f010796c4a9 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:30:34 +0100 Subject: Use logo with text for new logo timeline itemm --- pydis_site/static/css/home/timeline.css | 9 +++++++++ pydis_site/templates/home/timeline.html | 4 ++-- 2 files changed, 11 insertions(+), 2 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 00e0b447..11080766 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -43,6 +43,15 @@ button, input, textarea, select { height: 100%; } +.pydis-logo-banner { + background-color: #7289DA !important; + border-radius: 10px; +} + +.pydis-logo-banner img { + padding-right: 20px; +} + .btn, .form-control, .link, .reset { background-color: transparent; padding: 0; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index ad81a703..681f5be2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -53,8 +53,8 @@

Our logo is born. Thanks @Aperture!

-

+

-- cgit v1.2.3 From d309d8e2218fa0ca60c68f0a5e757b36cc44f889 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:44:45 +0100 Subject: Use different colours for each category --- pydis_site/static/css/home/timeline.css | 32 +++++++++++++++++++ pydis_site/templates/home/timeline.html | 54 ++++++++++++++++----------------- 2 files changed, 59 insertions(+), 27 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 11080766..62b4834f 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -29,6 +29,38 @@ button, input, textarea, select { margin: 0 } +.pastel-red { + background-color: #FF7878 !important; +} + +.pastel-orange { + background-color: #FFBF76 !important; +} + +.pastel-green { + background-color: #8bd6a7 !important; +} + +.pastel-blue { + background-color: #8edbec !important; +} + +.pastel-purple { + background-color: #CBB1FF !important; +} + +.pastel-pink { + background-color: #F6ACFF !important; +} + +.pastel-lime { + background-color: #c7f835 !important; +} + +.pastel-dark-blue { + background-color: #6982FF !important; +} + .video-container { position: relative; width: 100%; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 681f5be2..1459b432 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -30,7 +30,7 @@
-
+
@@ -64,7 +64,7 @@
-
+
@@ -82,7 +82,7 @@
-
+
@@ -101,7 +101,7 @@
-
+
@@ -120,7 +120,7 @@
-
+
@@ -139,7 +139,7 @@
-
+
@@ -156,7 +156,7 @@
-
+
@@ -173,7 +173,7 @@
-
+
@@ -191,7 +191,7 @@
-
+
@@ -207,8 +207,8 @@
-
- +
+
@@ -225,7 +225,7 @@
-
+
@@ -244,7 +244,7 @@
-
+
@@ -261,7 +261,7 @@
-
+
@@ -278,7 +278,7 @@
-
+
@@ -294,7 +294,7 @@
-
+
@@ -317,8 +317,8 @@
-
- +
+
@@ -335,7 +335,7 @@
-
+
@@ -352,7 +352,7 @@
-
+
@@ -375,8 +375,8 @@
-
- +
+
@@ -392,7 +392,7 @@
-
+
@@ -409,7 +409,7 @@
-
+
@@ -425,7 +425,7 @@
-
+
@@ -448,7 +448,7 @@
-
+
@@ -465,7 +465,7 @@
-
+
-- cgit v1.2.3 From 53e1a6465dba8252011cf743b630a52020a8e83b Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:48:36 +0100 Subject: Add Ves joining timeline itemm --- pydis_site/static/css/home/timeline.css | 2 +- pydis_site/templates/home/timeline.html | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 62b4834f..13a6e0ca 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -54,7 +54,7 @@ button, input, textarea, select { } .pastel-lime { - background-color: #c7f835 !important; + background-color: #b6df3a !important; } .pastel-dark-blue { diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 1459b432..5c71f3a7 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -277,6 +277,21 @@
+
+
+ Picture +
+ +
+

Ves Zappa becomes an owner

+

After being a long time active contributor to our projects and the driving force behind our events, Ves Zappa joined the Owners team alongside joe & lemon.

+ +
+ Sept 22nd, 2019 +
+
+
+
-- cgit v1.2.3 From e1cd1214ac54473634707fb558a889f89a917501 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:49:15 +0100 Subject: Make dark blue darker to separate from blurple --- pydis_site/static/css/home/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 13a6e0ca..e7e0b264 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -58,7 +58,7 @@ button, input, textarea, select { } .pastel-dark-blue { - background-color: #6982FF !important; + background-color: #576297 !important; } .video-container { -- cgit v1.2.3 From 96860be9cbe6d3dba680e8ef9ac9db410bfd8e19 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 01:49:54 +0100 Subject: Fix line endings --- pydis_site/static/images/timeline/cd-icon-picture.svg | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/images/timeline/cd-icon-picture.svg b/pydis_site/static/images/timeline/cd-icon-picture.svg index c2e297ac..015718a8 100755 --- a/pydis_site/static/images/timeline/cd-icon-picture.svg +++ b/pydis_site/static/images/timeline/cd-icon-picture.svg @@ -69,4 +69,4 @@ id="path6014" inkscape:label="lower_snake" inkscape:connector-curvature="0" - style="fill:#ffffff" /> \ No newline at end of file + style="fill:#ffffff" /> -- cgit v1.2.3 From 924f54a83246fa0ec201daac0b391a2f59fe9aff Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 09:52:11 +0100 Subject: Align server icons better --- pydis_site/static/css/home/timeline.css | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index e7e0b264..fd364d38 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3510,8 +3510,19 @@ mark { } .cd-timeline__img img { - width: 30px; - height: 30px; + width: 50px; + height: 50px; + margin-left: 2px; + margin-top: 2px; +} + +@media (max-width: 64rem) { + .cd-timeline__img img { + width: 30px; + height: 30px; + margin-left: 2px; + margin-top: 2px; + } } @media (min-width: 64rem) { -- cgit v1.2.3 From 26274d5e5ca61237158d35feb77e99f02f9495d2 Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Mon, 12 Oct 2020 10:39:16 +0100 Subject: Update font sizing Co-authored-by: scragly <29337040+scragly@users.noreply.github.com> --- pydis_site/static/css/home/timeline.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'pydis_site') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index fd364d38..73698c7c 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3594,7 +3594,7 @@ mark { flex-grow: 0; will-change: transform; margin: 0; - font-size: 0.8em; + font-size: 0.9em; --line-height-multiplier: 1.2 } .cd-timeline__content::before { -- cgit v1.2.3