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/static') 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 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/static') 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/static') 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 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/static') 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 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/static') 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 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/static') 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/static') 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 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/static') 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 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/static') 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/static') 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/static') 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/static') 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/static') 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/static') 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/static') 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/static') 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 From 2d7f789652216f9684c6cd7ee85854f0bfb1af0b Mon Sep 17 00:00:00 2001 From: Joe Banks Date: Thu, 22 Oct 2020 00:49:18 +0100 Subject: Fix some icon sizing in timeline CSS --- pydis_site/static/css/home/timeline.css | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 73698c7c..07e17e15 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3497,8 +3497,8 @@ mark { align-items: center; -ms-flex-negative: 0; flex-shrink: 0; - width: 40px; - height: 40px; + width: 30px; + height: 30px; 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) @@ -3509,17 +3509,23 @@ mark { color: white; } +@media (max-width: 64rem) { + .cd-timeline__img i { + font-size: 0.9em; + } +} + .cd-timeline__img img { - width: 50px; - height: 50px; + width: 40px; + height: 40px; margin-left: 2px; margin-top: 2px; } @media (max-width: 64rem) { .cd-timeline__img img { - width: 30px; - height: 30px; + width: 20px; + height: 20px; margin-left: 2px; margin-top: 2px; } @@ -3532,7 +3538,7 @@ mark { -ms-flex-order: 1; order: 1; margin-left: calc(5% - 30px); - will-change: transform + will-change: transform; } .cd-timeline__block:nth-child(even) .cd-timeline__img { -- cgit v1.2.3 From e5355de93315c51f5de800fa6412f73f4aa2a4fc Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 14:29:33 +1000 Subject: Add wave-style hero, 100K promo, timeline card. --- pydis_site/static/css/home/index.css | 127 +++++++++++++++++++++++++++---- pydis_site/static/images/events/100k.png | Bin 0 -> 210477 bytes pydis_site/templates/home/index.html | 58 +++++++++++++- 3 files changed, 169 insertions(+), 16 deletions(-) create mode 100644 pydis_site/static/images/events/100k.png (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index ba856a8e..67caf61c 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -70,18 +70,117 @@ span.repo-language-dot.javascript { padding-bottom: 3rem; } -@media screen and (min-width: 1088px) { - .video-container iframe { - height: calc(42vw * 0.5625); - max-height: 371px; - max-width: 660px; - } -} - -@media screen and (max-width: 1087px) { - .video-container iframe { - height: calc(92vw * 0.5625); - max-height: none; - max-width: none; - } +.welcome-video { + box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); + border-radius: 10px; + margin-top: 1em; +} + +.welcome-video:hover { + box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); +} + +.aspect-wrapper { + position: relative; + padding-bottom: 56.25%; +} +.aspect-content { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; +} + +.hero-card img{ + border-radius: 10px; + box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); + margin-top: 1em; +} + +.main-head { + position: relative; + background-color: #7289DA; + color: #fff; + height: 32vw; + max-height: 500px; + overflow-x: hidden; + width: 100%; + padding: 0; +} + +.bottom-wave { + background: url(https://svgur.com/i/QVH.svg) repeat-x; + position: absolute; + bottom: 0; + width: 6400px; + height: 26px; + animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; + transform: translate3d(0, 0, 0); + z-index: 3; +} + +.above-waves { + z-index: 4; +} + +.wave { + background: url(https://svgur.com/i/QSd.svg) repeat-x; + position: absolute; + bottom: 0; + width: 6400px; + height: 198px; + animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; + transform: translate3d(0, 0, 0); +} + +.wave:nth-of-type(2) { + animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite; + opacity: 0.5; + height: 178px; + animation-delay: -50s; +} + +@keyframes wave { + 0% { + margin-left: 0; + } + 100% { + margin-left: -1600px; + } +} + +.showcase { + margin: 0 1em; +} + +.mini-timeline { + height: 3px; + position: relative; + margin: 50px 0 50px 0; + background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00); + text-align: center; +} +.mtl-item { + display: inline-block; + vertical-align: middle; + width: 30px; + height: 30px; + border-radius: 50%; + position: relative; + top: -14px; + margin: 0 4% 0 4%; + background-color: #3EB2EF; + color: white; + font-size: 15px; + line-height: 33px; + border:none; + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); + transition: all 0.3s cubic-bezier(.25,.8,.25,1); +} + +.mtl-item:hover { + box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); + transform: scale(1.5); } diff --git a/pydis_site/static/images/events/100k.png b/pydis_site/static/images/events/100k.png new file mode 100644 index 00000000..ae024d77 Binary files /dev/null and b/pydis_site/static/images/events/100k.png differ diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index f31363a4..04ad4465 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,6 +9,35 @@ {% block content %} {% include "base/navbar.html" %} +
+
+
+
+
+ +
+
+ +
+ 100K members! +
+ +
+ +
+ +
+
+
+ +
{# Who are we? #} @@ -38,8 +67,33 @@
{# Right column container #} -
- +
+
+

+ New Timeline! +

+
+ + + + + + +
+

+ Start from our humble beginnings to discover the events that made our community what it is today. +

+
+ + + +
+
-- cgit v1.2.3 From 235abfd6db3f684bf4c87ef9f77015636fdca488 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:01:46 +1000 Subject: Use local svgs for wave elements. --- pydis_site/static/css/home/index.css | 4 +- pydis_site/static/images/waves/wave_dark.svg | 73 +++++++++++++++++++++++++ pydis_site/static/images/waves/wave_white.svg | 77 +++++++++++++++++++++++++++ 3 files changed, 152 insertions(+), 2 deletions(-) create mode 100644 pydis_site/static/images/waves/wave_dark.svg create mode 100644 pydis_site/static/images/waves/wave_white.svg (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 67caf61c..9e36a51c 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -111,7 +111,7 @@ span.repo-language-dot.javascript { } .bottom-wave { - background: url(https://svgur.com/i/QVH.svg) repeat-x; + background: url(../../images/waves/wave_white.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; @@ -126,7 +126,7 @@ span.repo-language-dot.javascript { } .wave { - background: url(https://svgur.com/i/QSd.svg) repeat-x; + background: url(../../images/waves/wave_dark.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; diff --git a/pydis_site/static/images/waves/wave_dark.svg b/pydis_site/static/images/waves/wave_dark.svg new file mode 100644 index 00000000..35174c47 --- /dev/null +++ b/pydis_site/static/images/waves/wave_dark.svg @@ -0,0 +1,73 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + diff --git a/pydis_site/static/images/waves/wave_white.svg b/pydis_site/static/images/waves/wave_white.svg new file mode 100644 index 00000000..441dacff --- /dev/null +++ b/pydis_site/static/images/waves/wave_white.svg @@ -0,0 +1,77 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + -- cgit v1.2.3 From a971b36e079345fff3142a9cc663670f3b2a2ff8 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:45:14 +1000 Subject: Add a message section to replace hero section for mobiles. --- pydis_site/static/css/home/index.css | 5 +++++ pydis_site/templates/home/index.html | 13 ++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 9e36a51c..18f2d1aa 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -104,6 +104,7 @@ span.repo-language-dot.javascript { background-color: #7289DA; color: #fff; height: 32vw; + min-height: 270px; max-height: 500px; overflow-x: hidden; width: 100%; @@ -184,3 +185,7 @@ span.repo-language-dot.javascript { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); transform: scale(1.5); } + +.message { + margin: 5px; +} diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 04ad4465..fbdd942d 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,18 @@ {% block content %} {% include "base/navbar.html" %} -
+
+
+

100K Member Milestone!

+
+
+ Thanks to all our members for helping us create this friendly and helpful community! +

+ As a nice treat, we've created a Timeline page for people + to discover the events that made our community what it is today. Be sure to check it out! +
+
+
-- cgit v1.2.3 From 6437abed32c35b5c3de365b7af2cedf9b4adea42 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:50:58 +1000 Subject: Override notice bottom margin, use new class instead of bulma class. --- pydis_site/static/css/home/index.css | 3 ++- pydis_site/templates/home/index.html | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index 18f2d1aa..cb79a6e6 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -186,6 +186,7 @@ span.repo-language-dot.javascript { transform: scale(1.5); } -.message { +.notice { margin: 5px; + margin-bottom: -10px!important; } diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index fbdd942d..24806399 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,7 @@ {% block content %} {% include "base/navbar.html" %} -
+

100K Member Milestone!

-- cgit v1.2.3 From 53a11f43225c2f8d7a28295339ab70c7ce2225f8 Mon Sep 17 00:00:00 2001 From: ks129 <45097959+ks129@users.noreply.github.com> Date: Thu, 22 Oct 2020 15:49:13 +0300 Subject: Improve timeline page animation Instead of just leaving all elements like they are when bounce-in is done, when they leave from view, make them bounce out and hidden again to let them bounce-in again. --- pydis_site/static/css/home/timeline.css | 80 +++++++++++++++++++++++++++++++++ pydis_site/static/js/timeline/main.js | 37 ++++++++++++++- 2 files changed, 115 insertions(+), 2 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 07e17e15..c7137fde 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -3652,6 +3652,14 @@ mark { -webkit-animation-name: cd-bounce-2-inverse; animation-name: cd-bounce-2-inverse } + .cd-timeline__img--bounce-out { + -webkit-animation: cd-bounce-out-1 0.6s; + animation: cd-bounce-out-1 0.6s; + } + .cd-timeline__content--bounce-out { + -webkit-animation: cd-bounce-out-2 0.6s; + animation: cd-bounce-out-2 0.6s; + } } @-webkit-keyframes cd-bounce-1 { @@ -3755,3 +3763,75 @@ mark { transform: translateX(0) } } + +@-webkit-keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1) + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2) + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5) + } +} + +@keyframes cd-bounce-out-1 { + 0% { + opacity: 1; + -webkit-transform: scale(1); + transform: scale(1); + } + + 60% { + -webkit-transform: scale(1.2); + transform: scale(1.2); + } + + 100% { + opacity: 0; + -webkit-transform: scale(0.5); + transform: scale(0.5); + } +} + +@-webkit-keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} + +@keyframes cd-bounce-out-2 { + 0% { + opacity: 1; + -webkit-transform: translateX(0); + transform: translateX(0) + } + 60% { + -webkit-transform: translateX(20px); + transform: translateX(20px) + } + 100% { + opacity: 0; + -webkit-transform: translateX(-100px); + transform: translateX(-100px) + } +} diff --git a/pydis_site/static/js/timeline/main.js b/pydis_site/static/js/timeline/main.js index a4bf4f31..2ff7df57 100644 --- a/pydis_site/static/js/timeline/main.js +++ b/pydis_site/static/js/timeline/main.js @@ -1,5 +1,5 @@ (function(){ - // Vertical Timeline - by CodyHouse.co + // Vertical Timeline - by CodyHouse.co (modified) function VerticalTimeline( element ) { this.element = element; this.blocks = this.element.getElementsByClassName("cd-timeline__block"); @@ -32,17 +32,36 @@ 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 ) { + if((self.contents[i].classList.contains("cd-timeline__content--hidden") || self.contents[i].classList.contains("cd-timeline__content--bounce-out")) && 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"); + self.images[i].classList.remove("cd-timeline__img--bounce-out"); + self.contents[i].classList.remove("cd-timeline__content--bounce-out"); } })(i); } }; + VerticalTimeline.prototype.hideBlocksScroll = 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--bounce-in") && self.blocks[i].getBoundingClientRect().top > window.innerHeight*self.offset ) { + self.images[i].classList.remove("cd-timeline__img--bounce-in"); + self.contents[i].classList.remove("cd-timeline__content--bounce-in"); + self.images[i].classList.add("cd-timeline__img--bounce-out"); + self.contents[i].classList.add("cd-timeline__content--bounce-out"); + } + })(i); + } + } + var verticalTimelines = document.getElementsByClassName("js-cd-timeline"), verticalTimelinesArray = [], scrolling = false; @@ -60,11 +79,25 @@ (!window.requestAnimationFrame) ? setTimeout(checkTimelineScroll, 250) : window.requestAnimationFrame(checkTimelineScroll); } }); + + function animationEnd(event) { + if (event.target.classList.contains("cd-timeline__img--bounce-out")) { + event.target.classList.add("cd-timeline__img--hidden"); + event.target.classList.remove("cd-timeline__img--bounce-out"); + } else if (event.target.classList.contains("cd-timeline__content--bounce-out")) { + event.target.classList.add("cd-timeline__content--hidden"); + event.target.classList.remove("cd-timeline__content--bounce-out"); + } + } + + window.addEventListener("animationend", animationEnd); + window.addEventListener("webkitAnimationEnd", animationEnd); } function checkTimelineScroll() { verticalTimelinesArray.forEach(function(timeline){ timeline.showBlocks(); + timeline.hideBlocksScroll(); }); scrolling = false; }; -- cgit v1.2.3 From 325f978b5f9d94deef8988617eb16a6cd97f0cbe Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 21:52:54 +1000 Subject: Change discord img-based link to normal nav item. --- pydis_site/static/css/base/base.css | 18 ++++++++++++------ pydis_site/templates/base/navbar.html | 11 +++-------- 2 files changed, 15 insertions(+), 14 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index dc7c504d..42bbc8cf 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -30,16 +30,22 @@ div.card.has-equal-height { background-color: transparent; } -.navbar-item.has-left-margin-1 { - margin-left: 1rem; +.navbar-link:not(.is-arrowless) { + padding-left: 2rem; + padding-right: 3.5em; } -.navbar-item.has-left-margin-2 { - margin-left: 2rem; +.navbar-link:not(.is-arrowless)::after { + right: 2em; + margin-top: -0.42em; } -.navbar-item.has-left-margin-3 { - margin-left: 3rem; +/* Dropdown nav needs to be viewable at edge of canvas */ +@media screen and (min-width: 1024px) { + .navbar-dropdown { + left: unset; + right: 0; + } } #navbar-banner { diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index c2915025..9453c7b5 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -20,8 +20,8 @@ -- cgit v1.2.3 From 0debbceebc7cad5212bae56e0250e885896a3035 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 21:56:36 +1000 Subject: Use sections, remove unused CSS, improve repo cards. --- pydis_site/static/css/base/base.css | 16 ++- pydis_site/static/css/home/index.css | 248 +++++++++++++++++++---------------- pydis_site/templates/home/index.html | 166 ++++++++++++++--------- 3 files changed, 255 insertions(+), 175 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 42bbc8cf..306a3def 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -12,7 +12,7 @@ main.site-content { flex: 1; } -div.card.has-equal-height { +.card.has-equal-height { height: 100%; display: flex; flex-direction: column; @@ -117,3 +117,17 @@ button.is-size-navbar-menu, a.is-size-navbar-menu { .codehilite-wrap { margin-bottom: 1em; } + +/* 16:9 aspect ratio fixing */ +.force-aspect-container { + position: relative; + padding-bottom: 56.25%; +} + +.force-aspect-content { + top: 0; + left: 0; + width: 100%; + height: 100%; + position: absolute; +} diff --git a/pydis_site/static/css/home/index.css b/pydis_site/static/css/home/index.css index cb79a6e6..58ca8888 100644 --- a/pydis_site/static/css/home/index.css +++ b/pydis_site/static/css/home/index.css @@ -1,146 +1,86 @@ -.discord-banner { - border-radius: 0.5rem; +h1 { + padding-bottom: 0.5em; } -.hero-image { - width: 20rem; - margin: auto; -} - -.hero-body { - padding-top: 1rem; - padding-bottom: 1rem; -} - -.section-sp img { - height: 5rem; - margin-right: 2rem; -} +/* Mobile-only notice banner */ -.video-container iframe, -.video-container object, -.video-container embed { - width: 100%; - height: calc(92vw * 0.5625); - margin: 8px auto auto auto; +#mobile-notice { + margin: 5px; + margin-bottom: -10px!important; } -div.card.github-card { - box-shadow: none; - border: #d1d5da 1px solid; - border-radius: 3px; -} +/* Wave hero */ -div.repo-headline { - font-size: 1.25rem; - margin-bottom: 8px; -} - -span.repo-language-dot { - border-radius: 50%; - height: 12px; - width: 12px; - top: 1px; - display: inline-block; +#wave-hero { position: relative; + background-color: #7289DA; + color: #fff; + height: 32vw; + min-height: 270px; + max-height: 500px; + overflow-x: hidden; + width: 100%; + padding: 0; } -span.repo-language-dot.python { - background-color: #3572A5; -} - -span.repo-language-dot.html { - background-color: #e34c26; -} - -span.repo-language-dot.css { - background-color: #563d7c; -} - -span.repo-language-dot.javascript { - background-color: #f1e05a; -} - -#repo-footer-item { - margin-left: 1.2rem; +#wave-hero .container { + z-index: 4; /* keep hero contents above wave animations */ } -#sponsors-hero { - padding-top: 2rem; - padding-bottom: 3rem; +@media screen and (min-width: 769px) and (max-width: 1023px) { + #wave-hero .columns { + margin: 0 1em 0 1em; /* Stop cards touching canvas edges in table-view */ + } } -.welcome-video { +#wave-hero iframe { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); transition: all 0.3s cubic-bezier(.25,.8,.25,1); border-radius: 10px; margin-top: 1em; + border: none; } -.welcome-video:hover { +#wave-hero iframe:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } -.aspect-wrapper { - position: relative; - padding-bottom: 56.25%; -} -.aspect-content { - top: 0; - left: 0; - width: 100%; - height: 100%; - position: absolute; -} - -.hero-card img{ +#wave-hero-right img{ border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); margin-top: 1em; + text-align: right; } -.main-head { - position: relative; - background-color: #7289DA; - color: #fff; - height: 32vw; - min-height: 270px; - max-height: 500px; - overflow-x: hidden; - width: 100%; - padding: 0; -} - -.bottom-wave { - background: url(../../images/waves/wave_white.svg) repeat-x; +#wave-hero .wave { + background: url(../../images/waves/wave_dark.svg) repeat-x; position: absolute; bottom: 0; width: 6400px; - height: 26px; - animation: wave 50s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; - transform: translate3d(0, 0, 0); - z-index: 3; + animation-name: wave; + animation-timing-function: cubic-bezier(.36,.45,.63,.53); + animation-iteration-count: infinite; + transform: translate3d(0,0,0); /* Trigger 3D acceleration for smoother animation */ } -.above-waves { - z-index: 4; +#front-wave { + animation-duration: 60s; + animation-delay: -50s; + opacity: 0.5; + height: 178px; } -.wave { - background: url(../../images/waves/wave_dark.svg) repeat-x; - position: absolute; - bottom: 0; - width: 6400px; +#back-wave { + animation-duration: 65s; height: 198px; - animation: wave 65s cubic-bezier( 0.36, 0.45, 0.63, 0.53) infinite; - transform: translate3d(0, 0, 0); } -.wave:nth-of-type(2) { - animation: wave 60s cubic-bezier( 0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 60s ease -1.25s infinite; - opacity: 0.5; - height: 178px; - animation-delay: -50s; +#bottom-wave { + animation-duration: 50s; + animation-delay: -10s; + background: url(../../images/waves/wave_white.svg) repeat-x !important; + height: 26px; + z-index: 3; } @keyframes wave { @@ -152,18 +92,21 @@ span.repo-language-dot.javascript { } } -.showcase { +/* Showcase */ + +#showcase { margin: 0 1em; } -.mini-timeline { +#showcase .mini-timeline { height: 3px; position: relative; margin: 50px 0 50px 0; background: linear-gradient(to right, #ffffff00, #666666ff, #ffffff00); text-align: center; } -.mtl-item { + +#showcase .mini-timeline i { display: inline-block; vertical-align: middle; width: 30px; @@ -181,12 +124,91 @@ span.repo-language-dot.javascript { transition: all 0.3s cubic-bezier(.25,.8,.25,1); } -.mtl-item:hover { +#showcase .mini-timeline i:hover { box-shadow: 0 2px 5px rgba(0,0,0,0.16), 0 2px 5px rgba(0,0,0,0.23); transform: scale(1.5); } -.notice { - margin: 5px; - margin-bottom: -10px!important; +/* Projects */ + +#projects { + padding-top: 0; +} + +#projects .card { + box-shadow: none; + border: #d1d5da 1px solid; + border-radius: 3px; + transition: all 0.2s cubic-bezier(.25,.8,.25,1); + height: 100%; + display: flex; + flex-direction: column; +} + +#projects .card:hover { + box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); +} + +#projects .card-header { + box-shadow: none; + font-size: 1.25rem; + padding: 1.5rem 1.5rem 0 1.5rem; +} + +#projects .card-header-icon { + font-size: 1.5rem; + padding: 0 1rem 0 0; +} + +#projects .card-header-title { + padding: 0; + color: #7289DA; +} + +#projects .card:hover .card-header-title { + color: #363636; +} + +#projects .card-content { + padding-top: 8px; + padding-bottom: 1rem; +} + +#projects .card-footer { + margin-top: auto; + border: none; +} + +#projects .card-footer-item { + border: none; +} + +#projects .card-footer-item i { + margin-right: 0.5rem; +} + +#projects .repo-language-dot { + border-radius: 50%; + height: 12px; + width: 12px; + top: -1px; + display: inline-block; + position: relative; +} + +#projects .repo-language-dot.python { background-color: #3572A5; } +#projects .repo-language-dot.html { background-color: #e34c26; } +#projects .repo-language-dot.css { background-color: #563d7c; } +#projects .repo-language-dot.javascript { background-color: #f1e05a; } + +/* Sponsors */ + +#sponsors .hero-body { + padding-top: 2rem; + padding-bottom: 3rem; +} + +#sponsors img { + height: 5rem; + margin-right: 2rem; } diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 24806399..7d91feb4 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -9,7 +9,8 @@ {% block content %} {% include "base/navbar.html" %} -
+ +

100K Member Milestone!

@@ -19,42 +20,58 @@ As a nice treat, we've created a Timeline page for people to discover the events that made our community what it is today. Be sure to check it out!
- -
-
-
-
-
+
+ + +
+ +
+
+ + {# Embedded Welcome video #} +
+
-
- 100K members! + {# Right side content #} +
+ 100K members!
-
-
-
-
+ {# Animated wave elements #} + + +
-
- {# Who are we? #} -
+ +
+ +

Who are we?

-
+

@@ -77,70 +94,97 @@

- {# Right column container #} -
-
-

- New Timeline! -

+ {# Showcase box #} +
+
-
+ + +
+
+
+
- {# Projects #} + +
+

Projects

-
+
- {# Display projects from HomeView.repos #} + {# Generate project data from HomeView.repos #} {% for repo in repo_data %}
-
-
-
- - {{ repo.repo_name }} -
- -
-
+

+ +
+
+ + {{ repo.language }} +
+
+ + {{ repo.stargazers }} +
+
+ + {{ repo.forks }} +
+
+ + + +
{% endfor %}
+
- {# Sponsors #} -
-
+ +
+

Sponsors -- cgit v1.2.3 From f1ee1f154494728f305381df19d9f293b8667805 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Fri, 23 Oct 2020 22:00:27 +1000 Subject: Fix video aspect in timeline, quote img src urls. After updating the frontpage and creating an fixed-aspect-ratio style pair, I found I could just reuse them in the timeline to fix the inconsistent responsive aspect ratio that was occurring there. Some img src values also were not quoted; while this can work fine, it can break if the url has spaces or certain characters and is inconsistent with the rest of the project. --- pydis_site/static/css/home/timeline.css | 14 -------------- pydis_site/templates/home/timeline.html | 24 ++++++++++++------------ 2 files changed, 12 insertions(+), 26 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/home/timeline.css b/pydis_site/static/css/home/timeline.css index 07e17e15..89de0887 100644 --- a/pydis_site/static/css/home/timeline.css +++ b/pydis_site/static/css/home/timeline.css @@ -61,20 +61,6 @@ button, input, textarea, select { background-color: #576297 !important; } -.video-container { - position: relative; - width: 100%; - height: 0; - padding-bottom: 75%; -} -.video { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; -} - .pydis-logo-banner { background-color: #7289DA !important; border-radius: 10px; diff --git a/pydis_site/templates/home/timeline.html b/pydis_site/templates/home/timeline.html index 54cbdc1b..f3c58fc2 100644 --- a/pydis_site/templates/home/timeline.html +++ b/pydis_site/templates/home/timeline.html @@ -14,7 +14,7 @@
- Picture + Picture
@@ -231,8 +231,8 @@

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

-
-
@@ -319,8 +319,8 @@ developers join us to judge the event and help out our members during the event. One of them, @tshirtman, even joins our staff!

-
-
@@ -377,8 +377,8 @@ Several of the Code Jam participants also end up getting involved contributing to the Arcade repository.

-
-
@@ -450,8 +450,8 @@ Code Jam for 2020 attracts hundreds of participants, and sees the creation of some fantastic projects. Check them out in our judge stream below:

-
-
@@ -481,13 +481,13 @@
- Picture + Picture

Python Discord hosts the 2020 CPython Core Developer Q&A

-
-
-- cgit v1.2.3 From 7395563a2114ad00e07d5e7caf7986e7e6de5e53 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:09:16 +1000 Subject: Change discord nav item to distinct CTA button. --- pydis_site/static/css/base/base.css | 53 +++++--- pydis_site/static/images/navbar/discord.svg | 143 +++++++++++++++++++++ .../static/images/navbar/navbar_discordjoin.svg | 81 ------------ pydis_site/templates/base/navbar.html | 11 +- 4 files changed, 185 insertions(+), 103 deletions(-) create mode 100644 pydis_site/static/images/navbar/discord.svg delete mode 100644 pydis_site/static/images/navbar/navbar_discordjoin.svg (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 306a3def..3ac2c503 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -18,42 +18,55 @@ main.site-content { flex-direction: column; } -.navbar-item.is-fullsize { - padding: 0; +.navbar { + padding-right: 0.8em; } -.navbar-item.is-fullsize img { - max-height: 4.75rem; +.navbar-item .navbar-link { + padding-left: 1.5em; + padding-right: 2.5em; +} + +.navbar-link:not(.is-arrowless)::after { + right: 1.125em; + margin-top: -0.455em; } .navbar-item.has-no-highlight:hover { background-color: transparent; } -.navbar-link:not(.is-arrowless) { - padding-left: 2rem; - padding-right: 3.5em; +#navbar-banner { + background-color: transparent; } -.navbar-link:not(.is-arrowless)::after { - right: 2em; - margin-top: -0.42em; +#navbar-banner img { + max-height: 3rem; } -/* Dropdown nav needs to be viewable at edge of canvas */ -@media screen and (min-width: 1024px) { - .navbar-dropdown { - left: unset; - right: 0; - } +#discord-btn a { + color: transparent; + background-image: url(../../images/navbar/discord.svg); + background-size: 200%; + background-position: 100% 50%; + background-repeat: no-repeat; + padding-left: 2.5rem; + padding-right: 2.5rem; + background-color: #697ec4ff; + margin-left: 0.5rem; + transition: all 0.2s cubic-bezier(.25,.8,.25,1); + overflow: hidden; } -#navbar-banner { - background-color: transparent; +#discord-btn:hover a { + box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); + /*transform: scale(1.03) translate3d(0,0,0);*/ + background-size: 200%; + background-position: 5% 50%; } -#navbar-banner img { - max-height: 3rem; +#discord-btn:hover { + background-color: transparent; } #django-logo { diff --git a/pydis_site/static/images/navbar/discord.svg b/pydis_site/static/images/navbar/discord.svg new file mode 100644 index 00000000..e3090ee7 --- /dev/null +++ b/pydis_site/static/images/navbar/discord.svg @@ -0,0 +1,143 @@ + + + + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + JOIN US + + + + diff --git a/pydis_site/static/images/navbar/navbar_discordjoin.svg b/pydis_site/static/images/navbar/navbar_discordjoin.svg deleted file mode 100644 index 75e6b102..00000000 --- a/pydis_site/static/images/navbar/navbar_discordjoin.svg +++ /dev/null @@ -1,81 +0,0 @@ - - - - - - - - - - image/svg+xml - - - - - - - - - - - diff --git a/pydis_site/templates/base/navbar.html b/pydis_site/templates/base/navbar.html index 9453c7b5..d8abf36d 100644 --- a/pydis_site/templates/base/navbar.html +++ b/pydis_site/templates/base/navbar.html @@ -20,8 +20,8 @@ + + {# Desktop Nav Discord #} +
+ Discord +
+
+
-- cgit v1.2.3 From fcf0067ea4f68003ed0e2954d645398df82a43e0 Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:09:49 +1000 Subject: Use local img for welcome video thumbnail. --- pydis_site/static/images/frontpage/welcome.jpg | Bin 0 -> 51725 bytes pydis_site/templates/home/index.html | 2 +- 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 pydis_site/static/images/frontpage/welcome.jpg (limited to 'pydis_site/static') diff --git a/pydis_site/static/images/frontpage/welcome.jpg b/pydis_site/static/images/frontpage/welcome.jpg new file mode 100644 index 00000000..0eb8f672 Binary files /dev/null and b/pydis_site/static/images/frontpage/welcome.jpg differ diff --git a/pydis_site/templates/home/index.html b/pydis_site/templates/home/index.html index 7d91feb4..7f59231c 100644 --- a/pydis_site/templates/home/index.html +++ b/pydis_site/templates/home/index.html @@ -42,7 +42,7 @@ span{height:1.5em;text-align:center;font:68px/1.5 sans-serif;color:#FFFFFFEE;text-shadow:0 0 0.1em #00000020} - Welcome to Python Discord + Welcome to Python Discord ▶ " allow="autoplay; accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" -- cgit v1.2.3 From 75dadc4a76f795fd13a2e87cb2f68c2758b0e7ad Mon Sep 17 00:00:00 2001 From: scragly <29337040+scragly@users.noreply.github.com> Date: Sun, 25 Oct 2020 01:40:07 +1000 Subject: Remove blurple peek on Discord CTA, convert text to obj. --- pydis_site/static/css/base/base.css | 2 +- pydis_site/static/images/navbar/discord.svg | 42 ++++++++++++++++++++++------- 2 files changed, 33 insertions(+), 11 deletions(-) (limited to 'pydis_site/static') diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css index 3ac2c503..b53ff5d4 100644 --- a/pydis_site/static/css/base/base.css +++ b/pydis_site/static/css/base/base.css @@ -62,7 +62,7 @@ main.site-content { box-shadow: 0 1px 4px rgba(0,0,0,0.16), 0 1px 6px rgba(0,0,0,0.23); /*transform: scale(1.03) translate3d(0,0,0);*/ background-size: 200%; - background-position: 5% 50%; + background-position: 1% 50%; } #discord-btn:hover { diff --git a/pydis_site/static/images/navbar/discord.svg b/pydis_site/static/images/navbar/discord.svg index e3090ee7..406e3836 100644 --- a/pydis_site/static/images/navbar/discord.svg +++ b/pydis_site/static/images/navbar/discord.svg @@ -13,7 +13,7 @@ version="1.1" id="svg8" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" - sodipodi:docname="navbar_discordjoin2.svg"> + sodipodi:docname="discord.svg"> image/svg+xml - + @@ -106,7 +106,7 @@ + transform="matrix(0.90000009,0,0,0.90000009,10.464254,9.7980333)"> @@ -128,14 +128,36 @@ d="m 107.16039,90.382629 -3.19204,3.19205 c -0.15408,0.15408 -0.40352,0.15408 -0.55746,0 l -0.37229,-0.37231 c -0.15368,-0.15369 -0.15408,-0.40277 -5.3e-4,-0.55681 l 2.52975,-2.54167 -2.52975,-2.54164 c -0.15329,-0.15408 -0.15309,-0.40312 5.3e-4,-0.55681 l 0.37229,-0.37228 c 0.15408,-0.15408 0.40353,-0.15408 0.55746,0 l 3.19204,3.19201 c 0.15408,0.15407 0.15408,0.40354 0,0.55746 z" inkscape:connector-curvature="0" style="fill:#7289da;fill-opacity:1;stroke-width:0.0164247" /> - JOIN US + style="font-style:normal;font-weight:normal;font-size:6.35px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect953-0);fill:#7289da;fill-opacity:1;stroke:none"> + + + + + + +