@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%
}
: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%
}
[data-theme]{
    background-color:hsl(0, 0%, 100%);
    background-color:var(--color-bg);
    color:hsl(240, 4%, 20%);
    color:var(--color-contrast-high)
}
: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)
}
@supports (--css: variables){
    @media (min-width: 64rem){
        :root{
            --space-unit: 1.25em
        }
    }
}
.margin-top,.margin-top--md{
    margin-top:1.25em;
    margin-top:var(--space-md)
}
.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--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-bottom,.margin-bottom--md{
    margin-bottom:1.25em;
    margin-bottom:var(--space-md)
}
.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--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)
}
:root{
    --container-width-xs: 37.5rem;
    --container-width-sm: 45rem;
    --container-width-md: 64rem;
    --container-width-lg: 80rem;
    --container-width-xl: 90rem
}
.container{
    width:calc(100% - 1.25em);
    width:calc(100% - 2*var(--component-padding));
    margin-left:auto;
    margin-right:auto
}
.container--full-width{
    width:100%
}
.container--xs{
    max-width:37.5rem;
    max-width:var(--container-width-xs)
}
.container--sm{
    max-width:45rem;
    max-width:var(--container-width-sm)
}
.container--md{
    max-width:64rem;
    max-width:var(--container-width-md)
}
.container--lg{
    max-width:80rem;
    max-width:var(--container-width-lg)
}
.container--xl{
    max-width:90rem;
    max-width:var(--container-width-xl)
}
.container--adaptive,.container--adaptive-lg{
    max-width:37.5rem;
    max-width:var(--container-width-xs)
}
@media (min-width: 64rem){
    .container--adaptive,.container--adaptive-lg{
        max-width:64rem;
        max-width:var(--container-width-md)
    }
}
@media (min-width: 90rem){
    .container--adaptive,.container--adaptive-lg{
        max-width:80rem;
        max-width:var(--container-width-lg)
    }
}
.container--adaptive-sm{
    max-width:37.5rem;
    max-width:var(--container-width-xs)
}
@media (min-width: 64rem){
    .container--adaptive-sm{
        max-width:45rem;
        max-width:var(--container-width-sm)
    }
}
.container--adaptive-md{
    max-width:37.5rem;
    max-width:var(--container-width-xs)
}
@media (min-width: 64rem){
    .container--adaptive-md{
        max-width:64rem;
        max-width:var(--container-width-md)
    }
}
.container--adaptive-xl{
    max-width:37.5rem;
    max-width:var(--container-width-xs)
}
@media (min-width: 64rem){
    .container--adaptive-xl{
        max-width:64rem;
        max-width:var(--container-width-md)
    }
}
@media (min-width: 90rem){
    .container--adaptive-xl{
        max-width:90rem;
        max-width:var(--container-width-xl)
    }
}
.grid{
    display:-ms-flexbox;
    display:flex;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.grid>*{
    background-clip:content-box;
    -ms-flex-preferred-size:100%;
    flex-basis:100%
}
.grid--gap-xs,.grid-gap--xs{
    margin:-0.5em 0 0 -0.5em;
    margin:calc(var(--space-xs)*-1) 0 0 calc(var(--space-xs)*-1)
}
.grid--gap-xs>*,.grid-gap--xs>*{
    padding:0.5em 0 0 0.5em;
    padding:var(--space-xs) 0 0 var(--space-xs)
}
.grid--gap-sm,.grid-gap--sm{
    margin:-0.75em 0 0 -0.75em;
    margin:calc(var(--space-sm)*-1) 0 0 calc(var(--space-sm)*-1)
}
.grid--gap-sm>*,.grid-gap--sm>*{
    padding:0.75em 0 0 0.75em;
    padding:var(--space-sm) 0 0 var(--space-sm)
}
.grid--gap-md,.grid-gap--md{
    margin:-1.25em 0 0 -1.25em;
    margin:calc(var(--space-md)*-1) 0 0 calc(var(--space-md)*-1)
}
.grid--gap-md>*,.grid-gap--md>*{
    padding:1.25em 0 0 1.25em;
    padding:var(--space-md) 0 0 var(--space-md)
}
.grid--gap-lg,.grid-gap--lg{
    margin:-2em 0 0 -2em;
    margin:calc(var(--space-lg)*-1) 0 0 calc(var(--space-lg)*-1)
}
.grid--gap-lg>*,.grid-gap--lg>*{
    padding:2em 0 0 2em;
    padding:var(--space-lg) 0 0 var(--space-lg)
}
.grid--gap-xl,.grid-gap--xl{
    margin:-3.25em 0 0 -3.25em;
    margin:calc(var(--space-xl)*-1) 0 0 calc(var(--space-xl)*-1)
}
.grid--gap-xl>*,.grid-gap--xl>*{
    padding:3.25em 0 0 3.25em;
    padding:var(--space-xl) 0 0 var(--space-xl)
}
.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:8.33%;
    flex-basis:8.33%;
    max-width:8.33%
}
.col--2{
    -ms-flex-preferred-size:16.66%;
    flex-basis:16.66%;
    max-width:16.66%
}
.col--3{
    -ms-flex-preferred-size:25%;
    flex-basis:25%;
    max-width:25%
}
.col--4{
    -ms-flex-preferred-size:33.33%;
    flex-basis:33.33%;
    max-width:33.33%
}
.col--5{
    -ms-flex-preferred-size:41.66%;
    flex-basis:41.66%;
    max-width:41.66%
}
.col--6{
    -ms-flex-preferred-size:50%;
    flex-basis:50%;
    max-width:50%
}
.col--7{
    -ms-flex-preferred-size:58.33%;
    flex-basis:58.33%;
    max-width:58.33%
}
.col--8{
    -ms-flex-preferred-size:66.66%;
    flex-basis:66.66%;
    max-width:66.66%
}
.col--9{
    -ms-flex-preferred-size:75%;
    flex-basis:75%;
    max-width:75%
}
.col--10{
    -ms-flex-preferred-size:83.33%;
    flex-basis:83.33%;
    max-width:83.33%
}
.col--11{
    -ms-flex-preferred-size:91.66%;
    flex-basis:91.66%;
    max-width:91.66%
}
.col--12{
    -ms-flex-preferred-size:100%;
    flex-basis:100%;
    max-width:100%
}
@media (min-width: 30rem){
    .col--xs{
        -ms-flex-positive:1;
        flex-grow:1;
        -ms-flex-preferred-size:0;
        flex-basis:0;
        max-width:100%
    }
    .col--xs-1{
        -ms-flex-preferred-size:8.33%;
        flex-basis:8.33%;
        max-width:8.33%
    }
    .col--xs-2{
        -ms-flex-preferred-size:16.66%;
        flex-basis:16.66%;
        max-width:16.66%
    }
    .col--xs-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col--xs-4{
        -ms-flex-preferred-size:33.33%;
        flex-basis:33.33%;
        max-width:33.33%
    }
    .col--xs-5{
        -ms-flex-preferred-size:41.66%;
        flex-basis:41.66%;
        max-width:41.66%
    }
    .col--xs-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col--xs-7{
        -ms-flex-preferred-size:58.33%;
        flex-basis:58.33%;
        max-width:58.33%
    }
    .col--xs-8{
        -ms-flex-preferred-size:66.66%;
        flex-basis:66.66%;
        max-width:66.66%
    }
    .col--xs-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col--xs-10{
        -ms-flex-preferred-size:83.33%;
        flex-basis:83.33%;
        max-width:83.33%
    }
    .col--xs-11{
        -ms-flex-preferred-size:91.66%;
        flex-basis:91.66%;
        max-width:91.66%
    }
    .col--xs-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
}
@media (min-width: 37.5rem){
    .col--sm{
        -ms-flex-positive:1;
        flex-grow:1;
        -ms-flex-preferred-size:0;
        flex-basis:0;
        max-width:100%
    }
    .col--sm-1{
        -ms-flex-preferred-size:8.33%;
        flex-basis:8.33%;
        max-width:8.33%
    }
    .col--sm-2{
        -ms-flex-preferred-size:16.66%;
        flex-basis:16.66%;
        max-width:16.66%
    }
    .col--sm-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col--sm-4{
        -ms-flex-preferred-size:33.33%;
        flex-basis:33.33%;
        max-width:33.33%
    }
    .col--sm-5{
        -ms-flex-preferred-size:41.66%;
        flex-basis:41.66%;
        max-width:41.66%
    }
    .col--sm-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col--sm-7{
        -ms-flex-preferred-size:58.33%;
        flex-basis:58.33%;
        max-width:58.33%
    }
    .col--sm-8{
        -ms-flex-preferred-size:66.66%;
        flex-basis:66.66%;
        max-width:66.66%
    }
    .col--sm-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col--sm-10{
        -ms-flex-preferred-size:83.33%;
        flex-basis:83.33%;
        max-width:83.33%
    }
    .col--sm-11{
        -ms-flex-preferred-size:91.66%;
        flex-basis:91.66%;
        max-width:91.66%
    }
    .col--sm-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
}
@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--md-1{
        -ms-flex-preferred-size:8.33%;
        flex-basis:8.33%;
        max-width:8.33%
    }
    .col--md-2{
        -ms-flex-preferred-size:16.66%;
        flex-basis:16.66%;
        max-width:16.66%
    }
    .col--md-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col--md-4{
        -ms-flex-preferred-size:33.33%;
        flex-basis:33.33%;
        max-width:33.33%
    }
    .col--md-5{
        -ms-flex-preferred-size:41.66%;
        flex-basis:41.66%;
        max-width:41.66%
    }
    .col--md-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col--md-7{
        -ms-flex-preferred-size:58.33%;
        flex-basis:58.33%;
        max-width:58.33%
    }
    .col--md-8{
        -ms-flex-preferred-size:66.66%;
        flex-basis:66.66%;
        max-width:66.66%
    }
    .col--md-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col--md-10{
        -ms-flex-preferred-size:83.33%;
        flex-basis:83.33%;
        max-width:83.33%
    }
    .col--md-11{
        -ms-flex-preferred-size:91.66%;
        flex-basis:91.66%;
        max-width:91.66%
    }
    .col--md-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
}
@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--lg-1{
        -ms-flex-preferred-size:8.33%;
        flex-basis:8.33%;
        max-width:8.33%
    }
    .col--lg-2{
        -ms-flex-preferred-size:16.66%;
        flex-basis:16.66%;
        max-width:16.66%
    }
    .col--lg-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col--lg-4{
        -ms-flex-preferred-size:33.33%;
        flex-basis:33.33%;
        max-width:33.33%
    }
    .col--lg-5{
        -ms-flex-preferred-size:41.66%;
        flex-basis:41.66%;
        max-width:41.66%
    }
    .col--lg-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col--lg-7{
        -ms-flex-preferred-size:58.33%;
        flex-basis:58.33%;
        max-width:58.33%
    }
    .col--lg-8{
        -ms-flex-preferred-size:66.66%;
        flex-basis:66.66%;
        max-width:66.66%
    }
    .col--lg-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col--lg-10{
        -ms-flex-preferred-size:83.33%;
        flex-basis:83.33%;
        max-width:83.33%
    }
    .col--lg-11{
        -ms-flex-preferred-size:91.66%;
        flex-basis:91.66%;
        max-width:91.66%
    }
    .col--lg-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
}
@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--xl-1{
        -ms-flex-preferred-size:8.33%;
        flex-basis:8.33%;
        max-width:8.33%
    }
    .col--xl-2{
        -ms-flex-preferred-size:16.66%;
        flex-basis:16.66%;
        max-width:16.66%
    }
    .col--xl-3{
        -ms-flex-preferred-size:25%;
        flex-basis:25%;
        max-width:25%
    }
    .col--xl-4{
        -ms-flex-preferred-size:33.33%;
        flex-basis:33.33%;
        max-width:33.33%
    }
    .col--xl-5{
        -ms-flex-preferred-size:41.66%;
        flex-basis:41.66%;
        max-width:41.66%
    }
    .col--xl-6{
        -ms-flex-preferred-size:50%;
        flex-basis:50%;
        max-width:50%
    }
    .col--xl-7{
        -ms-flex-preferred-size:58.33%;
        flex-basis:58.33%;
        max-width:58.33%
    }
    .col--xl-8{
        -ms-flex-preferred-size:66.66%;
        flex-basis:66.66%;
        max-width:66.66%
    }
    .col--xl-9{
        -ms-flex-preferred-size:75%;
        flex-basis:75%;
        max-width:75%
    }
    .col--xl-10{
        -ms-flex-preferred-size:83.33%;
        flex-basis:83.33%;
        max-width:83.33%
    }
    .col--xl-11{
        -ms-flex-preferred-size:91.66%;
        flex-basis:91.66%;
        max-width:91.66%
    }
    .col--xl-12{
        -ms-flex-preferred-size:100%;
        flex-basis:100%;
        max-width:100%
    }
}
.flex{
    display:-ms-flexbox;
    display:flex
}
.flex>*{
    display:inline-block
}
.flex--wrap{
    -ms-flex-wrap:wrap;
    flex-wrap:wrap
}
.flex--column{
    -ms-flex-direction:column;
    flex-direction:column
}
.flex--end{
    -ms-flex-pack:end;
    justify-content:flex-end
}
.flex--center{
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center
}
.flex--center-x{
    -ms-flex-pack:center;
    justify-content:center
}
.flex--center-y{
    -ms-flex-align:center;
    align-items:center
}
.flex--space-between{
    -ms-flex-pack:justify;
    justify-content:space-between
}
.flex--space-around{
    -ms-flex-pack:distribute;
    justify-content:space-around
}
.flex--space-evenly{
    -ms-flex-pack:space-evenly;
    justify-content:space-evenly
}
.flex--grow>*{
    -ms-flex-positive:1;
    flex-grow:1
}
.flex--shrink-none>*{
    -ms-flex-negative:0;
    flex-shrink:0
}
.flex--gap>*,.flex--gap-md>*,.flex-gap>*,.flex-gap--md>*{
    margin-right:1.25em;
    margin-right:var(--space-md)
}
.flex--gap>*:last-child,.flex--gap-md>*:last-child,.flex-gap>*:last-child,.flex-gap--md>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap,.flex--wrap.flex--gap-md,.flex--wrap.flex-gap,.flex--wrap.flex-gap--md{
    margin-bottom:-1.25em;
    margin-bottom:calc(-1*var(--space-md))
}
.flex--wrap.flex--gap>*,.flex--wrap.flex--gap-md>*,.flex--wrap.flex-gap>*,.flex--wrap.flex-gap--md>*{
    margin-bottom:1.25em;
    margin-bottom:var(--space-md)
}
.flex--gap-xxs>*,.flex-gap--xxs>*{
    margin-right:0.375em;
    margin-right:var(--space-xxs)
}
.flex--gap-xxs>*:last-child,.flex-gap--xxs>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap-xxs,.flex--wrap.flex-gap--xxs{
    margin-bottom:-0.375em;
    margin-bottom:calc(-1*var(--space-xxs))
}
.flex--wrap.flex--gap-xxs>*,.flex--wrap.flex-gap--xxs>*{
    margin-bottom:0.375em;
    margin-bottom:var(--space-xxs)
}
.flex--gap-xs>*,.flex-gap--xs>*{
    margin-right:0.5em;
    margin-right:var(--space-xs)
}
.flex--gap-xs>*:last-child,.flex-gap--xs>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap-xs,.flex--wrap.flex-gap--xs{
    margin-bottom:-0.5em;
    margin-bottom:calc(-1*var(--space-xs))
}
.flex--wrap.flex--gap-xs>*,.flex--wrap.flex-gap--xs>*{
    margin-bottom:0.5em;
    margin-bottom:var(--space-xs)
}
.flex--gap-sm>*,.flex-gap--sm>*{
    margin-right:0.75em;
    margin-right:var(--space-sm)
}
.flex--gap-sm>*:last-child,.flex-gap--sm>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap-sm,.flex--wrap.flex-gap--sm{
    margin-bottom:-0.75em;
    margin-bottom:calc(-1*var(--space-sm))
}
.flex--wrap.flex--gap-sm>*,.flex--wrap.flex-gap--sm>*{
    margin-bottom:0.75em;
    margin-bottom:var(--space-sm)
}
.flex--gap-lg>*,.flex-gap--lg>*{
    margin-right:2em;
    margin-right:var(--space-lg)
}
.flex--gap-lg>*:last-child,.flex-gap--lg>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap-lg,.flex--wrap.flex-gap--lg{
    margin-bottom:-2em;
    margin-bottom:calc(-1*var(--space-lg))
}
.flex--wrap.flex--gap-lg>*,.flex--wrap.flex-gap--lg>*{
    margin-bottom:2em;
    margin-bottom:var(--space-lg)
}
.flex--gap-xl>*,.flex-gap--xl>*{
    margin-right:3.25em;
    margin-right:var(--space-xl)
}
.flex--gap-xl>*:last-child,.flex-gap--xl>*:last-child{
    margin-right:0
}
.flex--wrap.flex--gap-xl,.flex--wrap.flex-gap--xl{
    margin-bottom:-3.25em;
    margin-bottom:calc(-1*var(--space-xl))
}
.flex--wrap.flex--gap-xl>*,.flex--wrap.flex-gap--xl>*{
    margin-bottom:3.25em;
    margin-bottom:var(--space-xl)
}
.flex-item--end{
    -ms-flex-item-align:end;
    align-self:flex-end
}
.flex-item--grow{
    -ms-flex-positive:1;
    flex-grow:1
}
.flex-item--shrink-none{
    -ms-flex-negative:0;
    flex-shrink:0
}
:root{
    --radius: 0.25em;
    --shadow-sm: 0 1px 1px rgba(0, 0, 0, .2), 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);
    --transition-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --transition-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    --transition-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1)
}
: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
        }
    }
}
body{
    font-size:1em;
    font-size:var(--text-base-size);
    font-family:'Droid Serif', serif;
    font-family:var(--font-primary);
    color:hsl(240, 4%, 20%);
    color:var(--color-contrast-high)
}
h1,h2,h3,h4{
    color:hsl(240, 8%, 12%);
    color:var(--color-contrast-higher);
    line-height:1.2;
    line-height:var(--heading-line-height)
}
.text--xxxl{
    font-size:2.48832em;
    font-size:var(--text-xxxl)
}
h1,.text--xxl{
    font-size:2.0736em;
    font-size:var(--text-xxl)
}
h2,.text--xl{
    font-size:1.728em;
    font-size:var(--text-xl)
}
h3,.text--lg{
    font-size:1.44em;
    font-size:var(--text-lg)
}
h4,.text--md{
    font-size:1.2em;
    font-size:var(--text-md)
}
.text--sm,small{
    font-size:0.83333em;
    font-size:var(--text-sm)
}
.text--xs{
    font-size:0.69444em;
    font-size:var(--text-xs)
}
a,.link{
    color:hsl(220, 90%, 56%);
    color:var(--color-primary);
    text-decoration:none;
}
mark{
    background-color:hsl(355, 90%, 81%);
    background-color:var(--color-accent-lighter);
    color:inherit
}
strong{
    font-weight:bold
}
s{
    text-decoration:line-through
}
u{
    text-decoration:underline
}
.text--subtle,.text-component .text--subtle{
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium)
}
.text--inherit,.text-component .text--inherit{
    color:inherit
}
.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));
    --line-height-multiplier: 1;
    --text-vspace-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);
    margin-bottom:0.25em;
    margin-bottom:calc(var(--space-xxxs)*var(--text-vspace-multiplier))
}
.text-component h2,.text-component h3,.text-component h4{
    margin-top:0.75em;
    margin-top:calc(var(--space-sm)*var(--text-vspace-multiplier))
}
.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);
    color:hsl(240, 4%, 20%);
    color:var(--color-contrast-high)
}
.text-component ul,.text-component ol,.text-component p,.text-component blockquote{
    margin-bottom:0.75em;
    margin-bottom:calc(var(--space-sm)*var(--text-vspace-multiplier))
}
.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 em{
    font-style:italic
}
.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;
    margin:2em auto;
    margin:calc(var(--space-lg)*var(--text-vspace-multiplier)) auto
}
.text-component>*:first-child{
    margin-top:0
}
.text-component>*:last-child{
    margin-bottom:0
}
.article.text-component{
    --line-height-multiplier: 1.13
}
.article.text-component ul,.article.text-component ol,.article.text-component p,.article.text-component blockquote{
    --text-vspace-multiplier: 1.2
}
.text-component__img{
    margin-bottom:1.25em;
    margin-bottom:calc(var(--space-md)*var(--text-vspace-multiplier, 1));
    text-align:center
}
.text-component__img img{
    display:block;
    margin:0 auto
}
.text-component__img figcaption{
    text-align:center;
    font-size:0.83333em;
    font-size:var(--text-sm);
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium);
    margin-top:0.5em;
    margin-top:var(--space-xs)
}
.text-component__content{
    margin-bottom:1.25em;
    margin-bottom:calc(var(--space-md)*var(--text-vspace-multiplier, 1))
}
.text-component__content .text-component__img{
    margin-bottom:0
}
@media (min-width: 37.5rem){
    .text-component__content--left,.text-component__content--right,.text-component__img--left,.text-component__img--right{
        width:45%
    }
    .text-component__content--left img,.text-component__content--right img,.text-component__img--left img,.text-component__img--right img{
        width:100%
    }
    .text-component__content--left,.text-component__img--left{
        float:left;
        margin-right:1.25em;
        margin-right:calc(var(--space-md)*var(--text-vspace-multiplier, 1))
    }
    .text-component__content--right,.text-component__img--right{
        float:right;
        margin-left:1.25em;
        margin-left:calc(var(--space-md)*var(--text-vspace-multiplier, 1))
    }
}
@media (min-width: 90rem){
    .text-component__content--outset,.text-component__img--outset{
        width:calc(100% + 10.5em);
        width:calc(100% + 2*var(--space-xxl))
    }
    .text-component__content--outset img,.text-component__img--outset img{
        width:100%
    }
    .text-component__content--outset:not(.text-component__content--right),.text-component__img--outset:not(.text-component__img--right){
        margin-left:-5.25em;
        margin-left:calc(-1*var(--space-xxl))
    }
    .text-component__content--left,.text-component__content--right,.text-component__img--left,.text-component__img--right{
        width:50%
    }
    .text-component__content--right.text-component__content--outset,.text-component__img--right.text-component__img--outset{
        margin-right:-5.25em;
        margin-right:calc(-1*var(--space-xxl))
    }
}
.truncate{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.text--center{
    text-align:center
}
:root{
    --icon-xs: 16px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;
    --icon-xl: 64px
}
.icon{
    display:inline-block;
    color:hsl(240, 8%, 12%);
    color:var(--color-contrast-higher);
    fill:currentColor;
    height:1em;
    width:1em;
    line-height:1
}
.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-text{
    display:-ms-inline-flexbox;
    display:inline-flex;
    -ms-flex-align:center;
    align-items:center
}
.icon-text>*:nth-child(2){
    margin-left:0.375em;
    margin-left:var(--space-xxs)
}
.icon-text .icon{
    color:inherit;
    -ms-flex-negative:0;
    flex-shrink:0
}
.icon-text.icon-text-gap--none>*:nth-child(2){
    margin-left:0
}
.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
}
:root{
    --btn-font-size: 1em;
    --btn-sm: calc(var(--btn-font-size) - 0.2em);
    --btn-md: calc(var(--btn-font-size) + 0.2em);
    --btn-lg: calc(var(--btn-font-size) + 0.4em)
}
.btn{
    display:-ms-inline-flexbox;
    display:inline-flex;
    position:relative;
    white-space:nowrap;
    text-decoration:none;
    line-height:1;
    padding:0.5em 0.75em;
    padding:var(--space-xs) var(--space-sm);
    border-radius:0.25em;
    font-size:1em;
    font-size:var(--btn-font-size);
    -ms-flex-pack:center;
    justify-content:center;
    -ms-flex-align:center;
    align-items:center
}
.btn--primary{
    background-color:hsl(220, 90%, 56%);
    background-color:var(--color-primary);
    color:hsl(0, 0%, 100%);
    color:var(--color-white);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.btn--subtle{
    color:hsl(240, 8%, 12%);
    color:var(--color-contrast-higher);
    border:1px solid hsl(240, 1%, 83%);
    border:1px solid var(--color-contrast-low)
}
.btn--accent{
    background-color:hsl(355, 90%, 61%);
    background-color:var(--color-accent);
    color:hsl(0, 0%, 100%);
    color:var(--color-white);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.btn--disabled{
    cursor:not-allowed;
    box-shadow:none;
    opacity:0.6
}
.btn--sm{
    font-size:0.8em;
    font-size:var(--btn-sm)
}
.btn--md{
    font-size:1.2em;
    font-size:var(--btn-md)
}
.btn--lg{
    font-size:1.4em;
    font-size:var(--btn-lg)
}
.btn--full-width{
    display:-ms-flexbox;
    display:flex;
    width:100%
}
.btn .icon{
    color:inherit;
    -ms-flex-negative:0;
    flex-shrink:0
}
.btn--icon-text{
    -ms-flex-align:center;
    align-items:center
}
.btn--icon-text>*:nth-child(2){
    margin-left:0.375em;
    margin-left:var(--space-xxs)
}
.btn--icon{
    padding:0.5em;
    padding:var(--space-xs)
}
.form-control{
    padding:0.5em 0.75em;
    padding:var(--space-xs) var(--space-sm);
    background:hsl(0, 0%, 100%);
    background:var(--color-bg);
    border:2px solid hsl(240, 1%, 83%);
    border:2px solid var(--color-contrast-low);
    width:100%
}
.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::-webkit-input-placeholder{
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium)
}
.form-control::-moz-placeholder{
    opacity:1;
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium)
}
.form-control:-ms-input-placeholder{
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium)
}
.form-control:-moz-placeholder{
    color:hsl(240, 1%, 48%);
    color:var(--color-contrast-medium)
}
.form-control[disabled],.form-control[readonly]{
    cursor:not-allowed
}
.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-legend{
    color:hsl(240, 8%, 12%);
    color:var(--color-contrast-higher);
    line-height:1.2;
    font-size:1.2em;
    font-size:var(--text-md);
    margin-bottom:0.375em;
    margin-bottom:var(--space-xxs)
}
.form-label{
    display:inline-block;
    font-size:0.83333em;
    font-size:var(--text-sm);
    margin-bottom:0.25em;
    margin-bottom:var(--space-xxxs)
}
.form__msg-error{
    background-color:hsl(355, 90%, 61%);
    background-color:var(--color-error);
    color:hsl(0, 0%, 100%);
    color:var(--color-white);
    font-size:0.83333em;
    font-size:var(--text-sm);
    -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;
    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
}
.radio-list.radio-list--inline,.radio-list.checkbox-list--inline,.checkbox-list.radio-list--inline,.checkbox-list.checkbox-list--inline{
    display:-ms-flexbox;
    display:flex;
    margin-bottom:-1.25em;
    margin-bottom:calc(-1*var(--space-md))
}
.radio-list.radio-list--inline>*,.radio-list.checkbox-list--inline>*,.checkbox-list.radio-list--inline>*,.checkbox-list.checkbox-list--inline>*{
    margin:0 1.25em 1.25em 0;
    margin:0 var(--space-md) var(--space-md) 0
}
:root{
    --zindex-header: 2;
    --zindex-popover: 4;
    --zindex-fixed-element: 5;
    --zindex-overlay: 10
}
@media not all and (min-width: 30rem){
    .display--xs{
        display:none !important
    }
}
@media (min-width: 30rem){
    .hide--xs{
        display:none !important
    }
}
@media not all and (min-width: 37.5rem){
    .display--sm{
        display:none !important
    }
}
@media (min-width: 37.5rem){
    .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
}
: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);  
    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%);
        background:hsl(205, 38%, 89%);
    }
}
.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: #6f42c1;
}
.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);
    padding:1.25em;
    padding:var(--space-md);
  
}
.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)
    }
}