diff --git a/content/notizie/aggiornato_elenco_referenti_puglia.md b/content/notizie/aggiornato_elenco_referenti_puglia.md new file mode 100644 index 0000000..d47fb9e --- /dev/null +++ b/content/notizie/aggiornato_elenco_referenti_puglia.md @@ -0,0 +1,7 @@ +--- +title: "Aggiornato elenco dei referenti regionali" +date: 2020-03-03T10:01:41+01:00 +--- + +E' stato aggiornato l’elenco dei referenti regionali con i dati +relativi alla Regione Puglia. diff --git a/content/notizie/riapertura_iscrizioni.md b/content/notizie/riapertura_iscrizioni.md new file mode 100644 index 0000000..c290a46 --- /dev/null +++ b/content/notizie/riapertura_iscrizioni.md @@ -0,0 +1,21 @@ +--- +title: "Riapertura termini iscrizioni seconda edizione delle OEF" +date: 2020-11-19T13:11:43+01:00 +--- + +## Riapertura delle iscrizioni + +Dal 23 al 28 novembre 2020 si riapriranno i termini di iscrizione per +partecipare alla seconda edizione della competizione, rimasta in +sospeso a livello di fasi regionali. + +Con l'occasione, sarà possibile: + +1. perfezionare un’iscrizione rimasta incompleta +2. iscriversi ex-novo + +La procedura da seguire è, in entrambi i casi, molto semplice. + +Vi preghiamo però di seguire attentamente i passaggi indicati +all'interno di [questo](/files/riapertura_termini.pdf), a seconda +delle proprie esigenze. diff --git a/public/404.html b/public/404.html index 7bd9d4a..71d18e4 100644 --- a/public/404.html +++ b/public/404.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 + Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -37,6 +39,7 @@ + @@ -131,6 +134,9 @@ + + + diff --git a/public/bando/index.html b/public/bando/index.html index 3731f1a..05774b4 100644 --- a/public/bando/index.html +++ b/public/bando/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Bando e iscrizioni + Bando e iscrizioni | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + + diff --git a/public/biblioteca_ef/index.html b/public/biblioteca_ef/index.html index b1b47b0..565393c 100644 --- a/public/biblioteca_ef/index.html +++ b/public/biblioteca_ef/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Biblioteca Ecofinanziaria + Biblioteca Ecofinanziaria | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + + diff --git a/public/categories/index.html b/public/categories/index.html index 8e105d4..ee83167 100644 --- a/public/categories/index.html +++ b/public/categories/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 + Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -136,6 +139,9 @@ + + + diff --git a/public/contatti/index.html b/public/contatti/index.html index bf4b442..c439ac0 100644 --- a/public/contatti/index.html +++ b/public/contatti/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Supporto + Supporto | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + + diff --git a/public/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css b/public/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css new file mode 100644 index 0000000..ba1b08f --- /dev/null +++ b/public/dist/css/app.1cb140d8ba31d5b2f1114537dd04802a.css @@ -0,0 +1,3 @@ +/*! TACHYONS v4.9.1 | http://tachyons.io */ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}[hidden],template{display:none}.border-box,a,article,aside,blockquote,body,code,dd,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,html,input[type=email],input[type=number],input[type=password],input[type=tel],input[type=text],input[type=url],legend,li,main,nav,ol,p,pre,section,table,td,textarea,th,tr,ul{box-sizing:border-box}.aspect-ratio{height:0;position:relative}.aspect-ratio--16x9{padding-bottom:56.25%}.aspect-ratio--9x16{padding-bottom:177.77%}.aspect-ratio--4x3{padding-bottom:75%}.aspect-ratio--3x4{padding-bottom:133.33%}.aspect-ratio--6x4{padding-bottom:66.6%}.aspect-ratio--4x6{padding-bottom:150%}.aspect-ratio--8x5{padding-bottom:62.5%}.aspect-ratio--5x8{padding-bottom:160%}.aspect-ratio--7x5{padding-bottom:71.42%}.aspect-ratio--5x7{padding-bottom:140%}.aspect-ratio--1x1{padding-bottom:100%}.aspect-ratio--object{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}@media screen and (min-width:30em){.aspect-ratio-ns{height:0;position:relative}.aspect-ratio--16x9-ns{padding-bottom:56.25%}.aspect-ratio--9x16-ns{padding-bottom:177.77%}.aspect-ratio--4x3-ns{padding-bottom:75%}.aspect-ratio--3x4-ns{padding-bottom:133.33%}.aspect-ratio--6x4-ns{padding-bottom:66.6%}.aspect-ratio--4x6-ns{padding-bottom:150%}.aspect-ratio--8x5-ns{padding-bottom:62.5%}.aspect-ratio--5x8-ns{padding-bottom:160%}.aspect-ratio--7x5-ns{padding-bottom:71.42%}.aspect-ratio--5x7-ns{padding-bottom:140%}.aspect-ratio--1x1-ns{padding-bottom:100%}.aspect-ratio--object-ns{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}@media screen and (min-width:30em) and (max-width:60em){.aspect-ratio-m{height:0;position:relative}.aspect-ratio--16x9-m{padding-bottom:56.25%}.aspect-ratio--9x16-m{padding-bottom:177.77%}.aspect-ratio--4x3-m{padding-bottom:75%}.aspect-ratio--3x4-m{padding-bottom:133.33%}.aspect-ratio--6x4-m{padding-bottom:66.6%}.aspect-ratio--4x6-m{padding-bottom:150%}.aspect-ratio--8x5-m{padding-bottom:62.5%}.aspect-ratio--5x8-m{padding-bottom:160%}.aspect-ratio--7x5-m{padding-bottom:71.42%}.aspect-ratio--5x7-m{padding-bottom:140%}.aspect-ratio--1x1-m{padding-bottom:100%}.aspect-ratio--object-m{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}@media screen and (min-width:60em){.aspect-ratio-l{height:0;position:relative}.aspect-ratio--16x9-l{padding-bottom:56.25%}.aspect-ratio--9x16-l{padding-bottom:177.77%}.aspect-ratio--4x3-l{padding-bottom:75%}.aspect-ratio--3x4-l{padding-bottom:133.33%}.aspect-ratio--6x4-l{padding-bottom:66.6%}.aspect-ratio--4x6-l{padding-bottom:150%}.aspect-ratio--8x5-l{padding-bottom:62.5%}.aspect-ratio--5x8-l{padding-bottom:160%}.aspect-ratio--7x5-l{padding-bottom:71.42%}.aspect-ratio--5x7-l{padding-bottom:140%}.aspect-ratio--1x1-l{padding-bottom:100%}.aspect-ratio--object-l{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:100}}img{max-width:100%}.cover{background-size:cover!important}.contain{background-size:contain!important}@media screen and (min-width:30em){.cover-ns{background-size:cover!important}.contain-ns{background-size:contain!important}}@media screen and (min-width:30em) and (max-width:60em){.cover-m{background-size:cover!important}.contain-m{background-size:contain!important}}@media screen and (min-width:60em){.cover-l{background-size:cover!important}.contain-l{background-size:contain!important}}.bg-center{background-position:50%}.bg-center,.bg-top{background-repeat:no-repeat}.bg-top{background-position:top}.bg-right{background-position:100%}.bg-bottom,.bg-right{background-repeat:no-repeat}.bg-bottom{background-position:bottom}.bg-left{background-repeat:no-repeat;background-position:0}@media screen and (min-width:30em){.bg-center-ns{background-position:50%}.bg-center-ns,.bg-top-ns{background-repeat:no-repeat}.bg-top-ns{background-position:top}.bg-right-ns{background-position:100%}.bg-bottom-ns,.bg-right-ns{background-repeat:no-repeat}.bg-bottom-ns{background-position:bottom}.bg-left-ns{background-repeat:no-repeat;background-position:0}}@media screen and (min-width:30em) and (max-width:60em){.bg-center-m{background-position:50%}.bg-center-m,.bg-top-m{background-repeat:no-repeat}.bg-top-m{background-position:top}.bg-right-m{background-position:100%}.bg-bottom-m,.bg-right-m{background-repeat:no-repeat}.bg-bottom-m{background-position:bottom}.bg-left-m{background-repeat:no-repeat;background-position:0}}@media screen and (min-width:60em){.bg-center-l{background-position:50%}.bg-center-l,.bg-top-l{background-repeat:no-repeat}.bg-top-l{background-position:top}.bg-right-l{background-position:100%}.bg-bottom-l,.bg-right-l{background-repeat:no-repeat}.bg-bottom-l{background-position:bottom}.bg-left-l{background-repeat:no-repeat;background-position:0}}.outline{outline:1px solid}.outline-transparent{outline:1px solid transparent}.outline-0{outline:0}@media screen and (min-width:30em){.outline-ns{outline:1px solid}.outline-transparent-ns{outline:1px solid transparent}.outline-0-ns{outline:0}}@media screen and (min-width:30em) and (max-width:60em){.outline-m{outline:1px solid}.outline-transparent-m{outline:1px solid transparent}.outline-0-m{outline:0}}@media screen and (min-width:60em){.outline-l{outline:1px solid}.outline-transparent-l{outline:1px solid transparent}.outline-0-l{outline:0}}.ba{border-style:solid;border-width:1px}.bt{border-top-style:solid;border-top-width:1px}.br{border-right-style:solid;border-right-width:1px}.bb{border-bottom-style:solid;border-bottom-width:1px}.bl{border-left-style:solid;border-left-width:1px}.bn{border-style:none;border-width:0}@media screen and (min-width:30em){.ba-ns{border-style:solid;border-width:1px}.bt-ns{border-top-style:solid;border-top-width:1px}.br-ns{border-right-style:solid;border-right-width:1px}.bb-ns{border-bottom-style:solid;border-bottom-width:1px}.bl-ns{border-left-style:solid;border-left-width:1px}.bn-ns{border-style:none;border-width:0}}@media screen and (min-width:30em) and (max-width:60em){.ba-m{border-style:solid;border-width:1px}.bt-m{border-top-style:solid;border-top-width:1px}.br-m{border-right-style:solid;border-right-width:1px}.bb-m{border-bottom-style:solid;border-bottom-width:1px}.bl-m{border-left-style:solid;border-left-width:1px}.bn-m{border-style:none;border-width:0}}@media screen and (min-width:60em){.ba-l{border-style:solid;border-width:1px}.bt-l{border-top-style:solid;border-top-width:1px}.br-l{border-right-style:solid;border-right-width:1px}.bb-l{border-bottom-style:solid;border-bottom-width:1px}.bl-l{border-left-style:solid;border-left-width:1px}.bn-l{border-style:none;border-width:0}}.b--black{border-color:#000}.b--near-black{border-color:#111}.b--dark-gray{border-color:#333}.b--mid-gray{border-color:#555}.b--gray{border-color:#777}.b--silver{border-color:#999}.b--light-silver{border-color:#aaa}.b--moon-gray{border-color:#ccc}.b--light-gray{border-color:#eee}.b--near-white{border-color:#f4f4f4}.b--white{border-color:#fff}.b--white-90{border-color:hsla(0,0%,100%,.9)}.b--white-80{border-color:hsla(0,0%,100%,.8)}.b--white-70{border-color:hsla(0,0%,100%,.7)}.b--white-60{border-color:hsla(0,0%,100%,.6)}.b--white-50{border-color:hsla(0,0%,100%,.5)}.b--white-40{border-color:hsla(0,0%,100%,.4)}.b--white-30{border-color:hsla(0,0%,100%,.3)}.b--white-20{border-color:hsla(0,0%,100%,.2)}.b--white-10{border-color:hsla(0,0%,100%,.1)}.b--white-05{border-color:hsla(0,0%,100%,.05)}.b--white-025{border-color:hsla(0,0%,100%,.025)}.b--white-0125{border-color:hsla(0,0%,100%,.0125)}.b--black-90{border-color:rgba(0,0,0,.9)}.b--black-80{border-color:rgba(0,0,0,.8)}.b--black-70{border-color:rgba(0,0,0,.7)}.b--black-60{border-color:rgba(0,0,0,.6)}.b--black-50{border-color:rgba(0,0,0,.5)}.b--black-40{border-color:rgba(0,0,0,.4)}.b--black-30{border-color:rgba(0,0,0,.3)}.b--black-20{border-color:rgba(0,0,0,.2)}.b--black-10{border-color:rgba(0,0,0,.1)}.b--black-05{border-color:rgba(0,0,0,.05)}.b--black-025{border-color:rgba(0,0,0,.025)}.b--black-0125{border-color:rgba(0,0,0,.0125)}.b--dark-red{border-color:#e7040f}.b--red{border-color:#ff4136}.b--light-red{border-color:#ff725c}.b--orange{border-color:#ff6300}.b--gold{border-color:#ffb700}.b--yellow{border-color:gold}.b--light-yellow{border-color:#fbf1a9}.b--purple{border-color:#5e2ca5}.b--light-purple{border-color:#a463f2}.b--dark-pink{border-color:#d5008f}.b--hot-pink{border-color:#ff41b4}.b--pink{border-color:#ff80cc}.b--light-pink{border-color:#ffa3d7}.b--dark-green{border-color:#137752}.b--green{border-color:#19a974}.b--light-green{border-color:#9eebcf}.b--navy{border-color:#001b44}.b--dark-blue{border-color:#00449e}.b--blue{border-color:#357edd}.b--light-blue{border-color:#96ccff}.b--lightest-blue{border-color:#cdecff}.b--washed-blue{border-color:#f6fffe}.b--washed-green{border-color:#e8fdf5}.b--washed-yellow{border-color:#fffceb}.b--washed-red{border-color:#ffdfdf}.b--transparent{border-color:transparent}.b--inherit{border-color:inherit}.br0{border-radius:0}.br1{border-radius:.125rem}.br2{border-radius:.25rem}.br3{border-radius:.5rem}.br4{border-radius:1rem}.br-100{border-radius:100%}.br-pill{border-radius:9999px}.br--bottom{border-top-left-radius:0;border-top-right-radius:0}.br--top{border-bottom-right-radius:0}.br--right,.br--top{border-bottom-left-radius:0}.br--right{border-top-left-radius:0}.br--left{border-top-right-radius:0;border-bottom-right-radius:0}@media screen and (min-width:30em){.br0-ns{border-radius:0}.br1-ns{border-radius:.125rem}.br2-ns{border-radius:.25rem}.br3-ns{border-radius:.5rem}.br4-ns{border-radius:1rem}.br-100-ns{border-radius:100%}.br-pill-ns{border-radius:9999px}.br--bottom-ns{border-top-left-radius:0;border-top-right-radius:0}.br--top-ns{border-bottom-right-radius:0}.br--right-ns,.br--top-ns{border-bottom-left-radius:0}.br--right-ns{border-top-left-radius:0}.br--left-ns{border-top-right-radius:0;border-bottom-right-radius:0}}@media screen and (min-width:30em) and (max-width:60em){.br0-m{border-radius:0}.br1-m{border-radius:.125rem}.br2-m{border-radius:.25rem}.br3-m{border-radius:.5rem}.br4-m{border-radius:1rem}.br-100-m{border-radius:100%}.br-pill-m{border-radius:9999px}.br--bottom-m{border-top-left-radius:0;border-top-right-radius:0}.br--top-m{border-bottom-right-radius:0}.br--right-m,.br--top-m{border-bottom-left-radius:0}.br--right-m{border-top-left-radius:0}.br--left-m{border-top-right-radius:0;border-bottom-right-radius:0}}@media screen and (min-width:60em){.br0-l{border-radius:0}.br1-l{border-radius:.125rem}.br2-l{border-radius:.25rem}.br3-l{border-radius:.5rem}.br4-l{border-radius:1rem}.br-100-l{border-radius:100%}.br-pill-l{border-radius:9999px}.br--bottom-l{border-top-left-radius:0;border-top-right-radius:0}.br--top-l{border-bottom-right-radius:0}.br--right-l,.br--top-l{border-bottom-left-radius:0}.br--right-l{border-top-left-radius:0}.br--left-l{border-top-right-radius:0;border-bottom-right-radius:0}}.b--dotted{border-style:dotted}.b--dashed{border-style:dashed}.b--solid{border-style:solid}.b--none{border-style:none}@media screen and (min-width:30em){.b--dotted-ns{border-style:dotted}.b--dashed-ns{border-style:dashed}.b--solid-ns{border-style:solid}.b--none-ns{border-style:none}}@media screen and (min-width:30em) and (max-width:60em){.b--dotted-m{border-style:dotted}.b--dashed-m{border-style:dashed}.b--solid-m{border-style:solid}.b--none-m{border-style:none}}@media screen and (min-width:60em){.b--dotted-l{border-style:dotted}.b--dashed-l{border-style:dashed}.b--solid-l{border-style:solid}.b--none-l{border-style:none}}.bw0{border-width:0}.bw1{border-width:.125rem}.bw2{border-width:.25rem}.bw3{border-width:.5rem}.bw4{border-width:1rem}.bw5{border-width:2rem}.bt-0{border-top-width:0}.br-0{border-right-width:0}.bb-0{border-bottom-width:0}.bl-0{border-left-width:0}@media screen and (min-width:30em){.bw0-ns{border-width:0}.bw1-ns{border-width:.125rem}.bw2-ns{border-width:.25rem}.bw3-ns{border-width:.5rem}.bw4-ns{border-width:1rem}.bw5-ns{border-width:2rem}.bt-0-ns{border-top-width:0}.br-0-ns{border-right-width:0}.bb-0-ns{border-bottom-width:0}.bl-0-ns{border-left-width:0}}@media screen and (min-width:30em) and (max-width:60em){.bw0-m{border-width:0}.bw1-m{border-width:.125rem}.bw2-m{border-width:.25rem}.bw3-m{border-width:.5rem}.bw4-m{border-width:1rem}.bw5-m{border-width:2rem}.bt-0-m{border-top-width:0}.br-0-m{border-right-width:0}.bb-0-m{border-bottom-width:0}.bl-0-m{border-left-width:0}}@media screen and (min-width:60em){.bw0-l{border-width:0}.bw1-l{border-width:.125rem}.bw2-l{border-width:.25rem}.bw3-l{border-width:.5rem}.bw4-l{border-width:1rem}.bw5-l{border-width:2rem}.bt-0-l{border-top-width:0}.br-0-l{border-right-width:0}.bb-0-l{border-bottom-width:0}.bl-0-l{border-left-width:0}}.shadow-1{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}@media screen and (min-width:30em){.shadow-1-ns{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-ns{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-ns{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-ns{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-ns{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}}@media screen and (min-width:30em) and (max-width:60em){.shadow-1-m{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-m{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-m{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-m{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-m{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}}@media screen and (min-width:60em){.shadow-1-l{box-shadow:0 0 4px 2px rgba(0,0,0,.2)}.shadow-2-l{box-shadow:0 0 8px 2px rgba(0,0,0,.2)}.shadow-3-l{box-shadow:2px 2px 4px 2px rgba(0,0,0,.2)}.shadow-4-l{box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)}.shadow-5-l{box-shadow:4px 4px 8px 0 rgba(0,0,0,.2)}}.pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}.top-0{top:0}.right-0{right:0}.bottom-0{bottom:0}.left-0{left:0}.top-1{top:1rem}.right-1{right:1rem}.bottom-1{bottom:1rem}.left-1{left:1rem}.top-2{top:2rem}.right-2{right:2rem}.bottom-2{bottom:2rem}.left-2{left:2rem}.top--1{top:-1rem}.right--1{right:-1rem}.bottom--1{bottom:-1rem}.left--1{left:-1rem}.top--2{top:-2rem}.right--2{right:-2rem}.bottom--2{bottom:-2rem}.left--2{left:-2rem}.absolute--fill{top:0;right:0;bottom:0;left:0}@media screen and (min-width:30em){.top-0-ns{top:0}.left-0-ns{left:0}.right-0-ns{right:0}.bottom-0-ns{bottom:0}.top-1-ns{top:1rem}.left-1-ns{left:1rem}.right-1-ns{right:1rem}.bottom-1-ns{bottom:1rem}.top-2-ns{top:2rem}.left-2-ns{left:2rem}.right-2-ns{right:2rem}.bottom-2-ns{bottom:2rem}.top--1-ns{top:-1rem}.right--1-ns{right:-1rem}.bottom--1-ns{bottom:-1rem}.left--1-ns{left:-1rem}.top--2-ns{top:-2rem}.right--2-ns{right:-2rem}.bottom--2-ns{bottom:-2rem}.left--2-ns{left:-2rem}.absolute--fill-ns{top:0;right:0;bottom:0;left:0}}@media screen and (min-width:30em) and (max-width:60em){.top-0-m{top:0}.left-0-m{left:0}.right-0-m{right:0}.bottom-0-m{bottom:0}.top-1-m{top:1rem}.left-1-m{left:1rem}.right-1-m{right:1rem}.bottom-1-m{bottom:1rem}.top-2-m{top:2rem}.left-2-m{left:2rem}.right-2-m{right:2rem}.bottom-2-m{bottom:2rem}.top--1-m{top:-1rem}.right--1-m{right:-1rem}.bottom--1-m{bottom:-1rem}.left--1-m{left:-1rem}.top--2-m{top:-2rem}.right--2-m{right:-2rem}.bottom--2-m{bottom:-2rem}.left--2-m{left:-2rem}.absolute--fill-m{top:0;right:0;bottom:0;left:0}}@media screen and (min-width:60em){.top-0-l{top:0}.left-0-l{left:0}.right-0-l{right:0}.bottom-0-l{bottom:0}.top-1-l{top:1rem}.left-1-l{left:1rem}.right-1-l{right:1rem}.bottom-1-l{bottom:1rem}.top-2-l{top:2rem}.left-2-l{left:2rem}.right-2-l{right:2rem}.bottom-2-l{bottom:2rem}.top--1-l{top:-1rem}.right--1-l{right:-1rem}.bottom--1-l{bottom:-1rem}.left--1-l{left:-1rem}.top--2-l{top:-2rem}.right--2-l{right:-2rem}.bottom--2-l{bottom:-2rem}.left--2-l{left:-2rem}.absolute--fill-l{top:0;right:0;bottom:0;left:0}}.cf:after,.cf:before{content:" ";display:table}.cf:after{clear:both}.cf{*zoom:1}.cl{clear:left}.cr{clear:right}.cb{clear:both}.cn{clear:none}@media screen and (min-width:30em){.cl-ns{clear:left}.cr-ns{clear:right}.cb-ns{clear:both}.cn-ns{clear:none}}@media screen and (min-width:30em) and (max-width:60em){.cl-m{clear:left}.cr-m{clear:right}.cb-m{clear:both}.cn-m{clear:none}}@media screen and (min-width:60em){.cl-l{clear:left}.cr-l{clear:right}.cb-l{clear:both}.cn-l{clear:none}}.dn{display:none}.di{display:inline}.db{display:block}.dib{display:inline-block}.dit{display:inline-table}.dt{display:table}.dtc{display:table-cell}.dt-row{display:table-row}.dt-row-group{display:table-row-group}.dt-column{display:table-column}.dt-column-group{display:table-column-group}.dt--fixed{table-layout:fixed;width:100%}@media screen and (min-width:30em){.dn-ns{display:none}.di-ns{display:inline}.db-ns{display:block}.dib-ns{display:inline-block}.dit-ns{display:inline-table}.dt-ns{display:table}.dtc-ns{display:table-cell}.dt-row-ns{display:table-row}.dt-row-group-ns{display:table-row-group}.dt-column-ns{display:table-column}.dt-column-group-ns{display:table-column-group}.dt--fixed-ns{table-layout:fixed;width:100%}}@media screen and (min-width:30em) and (max-width:60em){.dn-m{display:none}.di-m{display:inline}.db-m{display:block}.dib-m{display:inline-block}.dit-m{display:inline-table}.dt-m{display:table}.dtc-m{display:table-cell}.dt-row-m{display:table-row}.dt-row-group-m{display:table-row-group}.dt-column-m{display:table-column}.dt-column-group-m{display:table-column-group}.dt--fixed-m{table-layout:fixed;width:100%}}@media screen and (min-width:60em){.dn-l{display:none}.di-l{display:inline}.db-l{display:block}.dib-l{display:inline-block}.dit-l{display:inline-table}.dt-l{display:table}.dtc-l{display:table-cell}.dt-row-l{display:table-row}.dt-row-group-l{display:table-row-group}.dt-column-l{display:table-column}.dt-column-group-l{display:table-column-group}.dt--fixed-l{table-layout:fixed;width:100%}}.flex{display:-ms-flexbox;display:flex}.inline-flex{display:-ms-inline-flexbox;display:inline-flex}.flex-auto{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none{-ms-flex:none;flex:none}.flex-column{-ms-flex-direction:column;flex-direction:column}.flex-row{-ms-flex-direction:row;flex-direction:row}.flex-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-nowrap{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap-reverse{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-column-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-row-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.items-start{-ms-flex-align:start;align-items:flex-start}.items-end{-ms-flex-align:end;align-items:flex-end}.items-center{-ms-flex-align:center;align-items:center}.items-baseline{-ms-flex-align:baseline;align-items:baseline}.items-stretch{-ms-flex-align:stretch;align-items:stretch}.self-start{-ms-flex-item-align:start;align-self:flex-start}.self-end{-ms-flex-item-align:end;align-self:flex-end}.self-center{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.self-baseline{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}.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}.justify-around{-ms-flex-pack:distribute;justify-content:space-around}.content-start{-ms-flex-line-pack:start;align-content:flex-start}.content-end{-ms-flex-line-pack:end;align-content:flex-end}.content-center{-ms-flex-line-pack:center;align-content:center}.content-between{-ms-flex-line-pack:justify;align-content:space-between}.content-around{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch{-ms-flex-line-pack:stretch;align-content:stretch}.order-0{-ms-flex-order:0;order:0}.order-1{-ms-flex-order:1;order:1}.order-2{-ms-flex-order:2;order:2}.order-3{-ms-flex-order:3;order:3}.order-4{-ms-flex-order:4;order:4}.order-5{-ms-flex-order:5;order:5}.order-6{-ms-flex-order:6;order:6}.order-7{-ms-flex-order:7;order:7}.order-8{-ms-flex-order:8;order:8}.order-last{-ms-flex-order:99999;order:99999}.flex-grow-0{-ms-flex-positive:0;flex-grow:0}.flex-grow-1{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0{-ms-flex-negative:0;flex-shrink:0}.flex-shrink-1{-ms-flex-negative:1;flex-shrink:1}@media screen and (min-width:30em){.flex-ns{display:-ms-flexbox;display:flex}.inline-flex-ns{display:-ms-inline-flexbox;display:inline-flex}.flex-auto-ns{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none-ns{-ms-flex:none;flex:none}.flex-column-ns{-ms-flex-direction:column;flex-direction:column}.flex-row-ns{-ms-flex-direction:row;flex-direction:row}.flex-wrap-ns{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-nowrap-ns{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap-reverse-ns{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-column-reverse-ns{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-row-reverse-ns{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.items-start-ns{-ms-flex-align:start;align-items:flex-start}.items-end-ns{-ms-flex-align:end;align-items:flex-end}.items-center-ns{-ms-flex-align:center;align-items:center}.items-baseline-ns{-ms-flex-align:baseline;align-items:baseline}.items-stretch-ns{-ms-flex-align:stretch;align-items:stretch}.self-start-ns{-ms-flex-item-align:start;align-self:flex-start}.self-end-ns{-ms-flex-item-align:end;align-self:flex-end}.self-center-ns{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.self-baseline-ns{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch-ns{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}.justify-start-ns{-ms-flex-pack:start;justify-content:flex-start}.justify-end-ns{-ms-flex-pack:end;justify-content:flex-end}.justify-center-ns{-ms-flex-pack:center;justify-content:center}.justify-between-ns{-ms-flex-pack:justify;justify-content:space-between}.justify-around-ns{-ms-flex-pack:distribute;justify-content:space-around}.content-start-ns{-ms-flex-line-pack:start;align-content:flex-start}.content-end-ns{-ms-flex-line-pack:end;align-content:flex-end}.content-center-ns{-ms-flex-line-pack:center;align-content:center}.content-between-ns{-ms-flex-line-pack:justify;align-content:space-between}.content-around-ns{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch-ns{-ms-flex-line-pack:stretch;align-content:stretch}.order-0-ns{-ms-flex-order:0;order:0}.order-1-ns{-ms-flex-order:1;order:1}.order-2-ns{-ms-flex-order:2;order:2}.order-3-ns{-ms-flex-order:3;order:3}.order-4-ns{-ms-flex-order:4;order:4}.order-5-ns{-ms-flex-order:5;order:5}.order-6-ns{-ms-flex-order:6;order:6}.order-7-ns{-ms-flex-order:7;order:7}.order-8-ns{-ms-flex-order:8;order:8}.order-last-ns{-ms-flex-order:99999;order:99999}.flex-grow-0-ns{-ms-flex-positive:0;flex-grow:0}.flex-grow-1-ns{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0-ns{-ms-flex-negative:0;flex-shrink:0}.flex-shrink-1-ns{-ms-flex-negative:1;flex-shrink:1}}@media screen and (min-width:30em) and (max-width:60em){.flex-m{display:-ms-flexbox;display:flex}.inline-flex-m{display:-ms-inline-flexbox;display:inline-flex}.flex-auto-m{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none-m{-ms-flex:none;flex:none}.flex-column-m{-ms-flex-direction:column;flex-direction:column}.flex-row-m{-ms-flex-direction:row;flex-direction:row}.flex-wrap-m{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-nowrap-m{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap-reverse-m{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-column-reverse-m{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-row-reverse-m{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.items-start-m{-ms-flex-align:start;align-items:flex-start}.items-end-m{-ms-flex-align:end;align-items:flex-end}.items-center-m{-ms-flex-align:center;align-items:center}.items-baseline-m{-ms-flex-align:baseline;align-items:baseline}.items-stretch-m{-ms-flex-align:stretch;align-items:stretch}.self-start-m{-ms-flex-item-align:start;align-self:flex-start}.self-end-m{-ms-flex-item-align:end;align-self:flex-end}.self-center-m{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.self-baseline-m{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch-m{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}.justify-start-m{-ms-flex-pack:start;justify-content:flex-start}.justify-end-m{-ms-flex-pack:end;justify-content:flex-end}.justify-center-m{-ms-flex-pack:center;justify-content:center}.justify-between-m{-ms-flex-pack:justify;justify-content:space-between}.justify-around-m{-ms-flex-pack:distribute;justify-content:space-around}.content-start-m{-ms-flex-line-pack:start;align-content:flex-start}.content-end-m{-ms-flex-line-pack:end;align-content:flex-end}.content-center-m{-ms-flex-line-pack:center;align-content:center}.content-between-m{-ms-flex-line-pack:justify;align-content:space-between}.content-around-m{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch-m{-ms-flex-line-pack:stretch;align-content:stretch}.order-0-m{-ms-flex-order:0;order:0}.order-1-m{-ms-flex-order:1;order:1}.order-2-m{-ms-flex-order:2;order:2}.order-3-m{-ms-flex-order:3;order:3}.order-4-m{-ms-flex-order:4;order:4}.order-5-m{-ms-flex-order:5;order:5}.order-6-m{-ms-flex-order:6;order:6}.order-7-m{-ms-flex-order:7;order:7}.order-8-m{-ms-flex-order:8;order:8}.order-last-m{-ms-flex-order:99999;order:99999}.flex-grow-0-m{-ms-flex-positive:0;flex-grow:0}.flex-grow-1-m{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0-m{-ms-flex-negative:0;flex-shrink:0}.flex-shrink-1-m{-ms-flex-negative:1;flex-shrink:1}}@media screen and (min-width:60em){.flex-l{display:-ms-flexbox;display:flex}.inline-flex-l{display:-ms-inline-flexbox;display:inline-flex}.flex-auto-l{-ms-flex:1 1 auto;flex:1 1 auto;min-width:0;min-height:0}.flex-none-l{-ms-flex:none;flex:none}.flex-column-l{-ms-flex-direction:column;flex-direction:column}.flex-row-l{-ms-flex-direction:row;flex-direction:row}.flex-wrap-l{-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-nowrap-l{-ms-flex-wrap:nowrap;flex-wrap:nowrap}.flex-wrap-reverse-l{-ms-flex-wrap:wrap-reverse;flex-wrap:wrap-reverse}.flex-column-reverse-l{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.flex-row-reverse-l{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.items-start-l{-ms-flex-align:start;align-items:flex-start}.items-end-l{-ms-flex-align:end;align-items:flex-end}.items-center-l{-ms-flex-align:center;align-items:center}.items-baseline-l{-ms-flex-align:baseline;align-items:baseline}.items-stretch-l{-ms-flex-align:stretch;align-items:stretch}.self-start-l{-ms-flex-item-align:start;align-self:flex-start}.self-end-l{-ms-flex-item-align:end;align-self:flex-end}.self-center-l{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.self-baseline-l{-ms-flex-item-align:baseline;align-self:baseline}.self-stretch-l{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}.justify-start-l{-ms-flex-pack:start;justify-content:flex-start}.justify-end-l{-ms-flex-pack:end;justify-content:flex-end}.justify-center-l{-ms-flex-pack:center;justify-content:center}.justify-between-l{-ms-flex-pack:justify;justify-content:space-between}.justify-around-l{-ms-flex-pack:distribute;justify-content:space-around}.content-start-l{-ms-flex-line-pack:start;align-content:flex-start}.content-end-l{-ms-flex-line-pack:end;align-content:flex-end}.content-center-l{-ms-flex-line-pack:center;align-content:center}.content-between-l{-ms-flex-line-pack:justify;align-content:space-between}.content-around-l{-ms-flex-line-pack:distribute;align-content:space-around}.content-stretch-l{-ms-flex-line-pack:stretch;align-content:stretch}.order-0-l{-ms-flex-order:0;order:0}.order-1-l{-ms-flex-order:1;order:1}.order-2-l{-ms-flex-order:2;order:2}.order-3-l{-ms-flex-order:3;order:3}.order-4-l{-ms-flex-order:4;order:4}.order-5-l{-ms-flex-order:5;order:5}.order-6-l{-ms-flex-order:6;order:6}.order-7-l{-ms-flex-order:7;order:7}.order-8-l{-ms-flex-order:8;order:8}.order-last-l{-ms-flex-order:99999;order:99999}.flex-grow-0-l{-ms-flex-positive:0;flex-grow:0}.flex-grow-1-l{-ms-flex-positive:1;flex-grow:1}.flex-shrink-0-l{-ms-flex-negative:0;flex-shrink:0}.flex-shrink-1-l{-ms-flex-negative:1;flex-shrink:1}}.fl{float:left}.fl,.fr{_display:inline}.fr{float:right}.fn{float:none}@media screen and (min-width:30em){.fl-ns{float:left}.fl-ns,.fr-ns{_display:inline}.fr-ns{float:right}.fn-ns{float:none}}@media screen and (min-width:30em) and (max-width:60em){.fl-m{float:left}.fl-m,.fr-m{_display:inline}.fr-m{float:right}.fn-m{float:none}}@media screen and (min-width:60em){.fl-l{float:left}.fl-l,.fr-l{_display:inline}.fr-l{float:right}.fn-l{float:none}}.sans-serif{font-family:-apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif}.serif{font-family:georgia,times,serif}.system-sans-serif{font-family:sans-serif}.system-serif{font-family:serif}.code,code{font-family:Consolas,monaco,monospace}.courier{font-family:Courier Next,courier,monospace}.helvetica{font-family:helvetica neue,helvetica,sans-serif}.avenir{font-family:avenir next,avenir,sans-serif}.athelas{font-family:athelas,georgia,serif}.georgia{font-family:georgia,serif}.times{font-family:times,serif}.bodoni{font-family:Bodoni MT,serif}.calisto{font-family:Calisto MT,serif}.garamond{font-family:garamond,serif}.baskerville{font-family:baskerville,serif}.i{font-style:italic}.fs-normal{font-style:normal}@media screen and (min-width:30em){.i-ns{font-style:italic}.fs-normal-ns{font-style:normal}}@media screen and (min-width:30em) and (max-width:60em){.i-m{font-style:italic}.fs-normal-m{font-style:normal}}@media screen and (min-width:60em){.i-l{font-style:italic}.fs-normal-l{font-style:normal}}.normal{font-weight:400}.b{font-weight:700}.fw1{font-weight:100}.fw2{font-weight:200}.fw3{font-weight:300}.fw4{font-weight:400}.fw5{font-weight:500}.fw6{font-weight:600}.fw7{font-weight:700}.fw8{font-weight:800}.fw9{font-weight:900}@media screen and (min-width:30em){.normal-ns{font-weight:400}.b-ns{font-weight:700}.fw1-ns{font-weight:100}.fw2-ns{font-weight:200}.fw3-ns{font-weight:300}.fw4-ns{font-weight:400}.fw5-ns{font-weight:500}.fw6-ns{font-weight:600}.fw7-ns{font-weight:700}.fw8-ns{font-weight:800}.fw9-ns{font-weight:900}}@media screen and (min-width:30em) and (max-width:60em){.normal-m{font-weight:400}.b-m{font-weight:700}.fw1-m{font-weight:100}.fw2-m{font-weight:200}.fw3-m{font-weight:300}.fw4-m{font-weight:400}.fw5-m{font-weight:500}.fw6-m{font-weight:600}.fw7-m{font-weight:700}.fw8-m{font-weight:800}.fw9-m{font-weight:900}}@media screen and (min-width:60em){.normal-l{font-weight:400}.b-l{font-weight:700}.fw1-l{font-weight:100}.fw2-l{font-weight:200}.fw3-l{font-weight:300}.fw4-l{font-weight:400}.fw5-l{font-weight:500}.fw6-l{font-weight:600}.fw7-l{font-weight:700}.fw8-l{font-weight:800}.fw9-l{font-weight:900}}.input-reset{-webkit-appearance:none;-moz-appearance:none}.button-reset::-moz-focus-inner,.input-reset::-moz-focus-inner{border:0;padding:0}.h1{height:1rem}.h2{height:2rem}.h3{height:4rem}.h4{height:8rem}.h5{height:16rem}.h-25{height:25%}.h-50{height:50%}.h-75{height:75%}.h-100{height:100%}.min-h-100{min-height:100%}.vh-25{height:25vh}.vh-50{height:50vh}.vh-75{height:75vh}.vh-100{height:100vh}.min-vh-100{min-height:100vh}.h-auto{height:auto}.h-inherit{height:inherit}@media screen and (min-width:30em){.h1-ns{height:1rem}.h2-ns{height:2rem}.h3-ns{height:4rem}.h4-ns{height:8rem}.h5-ns{height:16rem}.h-25-ns{height:25%}.h-50-ns{height:50%}.h-75-ns{height:75%}.h-100-ns{height:100%}.min-h-100-ns{min-height:100%}.vh-25-ns{height:25vh}.vh-50-ns{height:50vh}.vh-75-ns{height:75vh}.vh-100-ns{height:100vh}.min-vh-100-ns{min-height:100vh}.h-auto-ns{height:auto}.h-inherit-ns{height:inherit}}@media screen and (min-width:30em) and (max-width:60em){.h1-m{height:1rem}.h2-m{height:2rem}.h3-m{height:4rem}.h4-m{height:8rem}.h5-m{height:16rem}.h-25-m{height:25%}.h-50-m{height:50%}.h-75-m{height:75%}.h-100-m{height:100%}.min-h-100-m{min-height:100%}.vh-25-m{height:25vh}.vh-50-m{height:50vh}.vh-75-m{height:75vh}.vh-100-m{height:100vh}.min-vh-100-m{min-height:100vh}.h-auto-m{height:auto}.h-inherit-m{height:inherit}}@media screen and (min-width:60em){.h1-l{height:1rem}.h2-l{height:2rem}.h3-l{height:4rem}.h4-l{height:8rem}.h5-l{height:16rem}.h-25-l{height:25%}.h-50-l{height:50%}.h-75-l{height:75%}.h-100-l{height:100%}.min-h-100-l{min-height:100%}.vh-25-l{height:25vh}.vh-50-l{height:50vh}.vh-75-l{height:75vh}.vh-100-l{height:100vh}.min-vh-100-l{min-height:100vh}.h-auto-l{height:auto}.h-inherit-l{height:inherit}}.tracked{letter-spacing:.1em}.tracked-tight{letter-spacing:-.05em}.tracked-mega{letter-spacing:.25em}@media screen and (min-width:30em){.tracked-ns{letter-spacing:.1em}.tracked-tight-ns{letter-spacing:-.05em}.tracked-mega-ns{letter-spacing:.25em}}@media screen and (min-width:30em) and (max-width:60em){.tracked-m{letter-spacing:.1em}.tracked-tight-m{letter-spacing:-.05em}.tracked-mega-m{letter-spacing:.25em}}@media screen and (min-width:60em){.tracked-l{letter-spacing:.1em}.tracked-tight-l{letter-spacing:-.05em}.tracked-mega-l{letter-spacing:.25em}}.lh-solid{line-height:1}.lh-title{line-height:1.25}.lh-copy{line-height:1.5}@media screen and (min-width:30em){.lh-solid-ns{line-height:1}.lh-title-ns{line-height:1.25}.lh-copy-ns{line-height:1.5}}@media screen and (min-width:30em) and (max-width:60em){.lh-solid-m{line-height:1}.lh-title-m{line-height:1.25}.lh-copy-m{line-height:1.5}}@media screen and (min-width:60em){.lh-solid-l{line-height:1}.lh-title-l{line-height:1.25}.lh-copy-l{line-height:1.5}}.link{text-decoration:none}.link,.link:active,.link:focus,.link:hover,.link:link,.link:visited{transition:color .15s ease-in}.link:focus{outline:1px dotted currentColor}.list{list-style-type:none}.mw-100{max-width:100%}.mw1{max-width:1rem}.mw2{max-width:2rem}.mw3{max-width:4rem}.mw4{max-width:8rem}.mw5{max-width:16rem}.mw6{max-width:32rem}.mw7{max-width:48rem}.mw8{max-width:64rem}.mw9{max-width:96rem}.mw-none{max-width:none}@media screen and (min-width:30em){.mw-100-ns{max-width:100%}.mw1-ns{max-width:1rem}.mw2-ns{max-width:2rem}.mw3-ns{max-width:4rem}.mw4-ns{max-width:8rem}.mw5-ns{max-width:16rem}.mw6-ns{max-width:32rem}.mw7-ns{max-width:48rem}.mw8-ns{max-width:64rem}.mw9-ns{max-width:96rem}.mw-none-ns{max-width:none}}@media screen and (min-width:30em) and (max-width:60em){.mw-100-m{max-width:100%}.mw1-m{max-width:1rem}.mw2-m{max-width:2rem}.mw3-m{max-width:4rem}.mw4-m{max-width:8rem}.mw5-m{max-width:16rem}.mw6-m{max-width:32rem}.mw7-m{max-width:48rem}.mw8-m{max-width:64rem}.mw9-m{max-width:96rem}.mw-none-m{max-width:none}}@media screen and (min-width:60em){.mw-100-l{max-width:100%}.mw1-l{max-width:1rem}.mw2-l{max-width:2rem}.mw3-l{max-width:4rem}.mw4-l{max-width:8rem}.mw5-l{max-width:16rem}.mw6-l{max-width:32rem}.mw7-l{max-width:48rem}.mw8-l{max-width:64rem}.mw9-l{max-width:96rem}.mw-none-l{max-width:none}}.w1{width:1rem}.w2{width:2rem}.w3{width:4rem}.w4{width:8rem}.w5{width:16rem}.w-10{width:10%}.w-20{width:20%}.w-25{width:25%}.w-30{width:30%}.w-33{width:33%}.w-34{width:34%}.w-40{width:40%}.w-50{width:50%}.w-60{width:60%}.w-70{width:70%}.w-75{width:75%}.w-80{width:80%}.w-90{width:90%}.w-100{width:100%}.w-third{width:33.33333%}.w-two-thirds{width:66.66667%}.w-auto{width:auto}@media screen and (min-width:30em){.w1-ns{width:1rem}.w2-ns{width:2rem}.w3-ns{width:4rem}.w4-ns{width:8rem}.w5-ns{width:16rem}.w-10-ns{width:10%}.w-20-ns{width:20%}.w-25-ns{width:25%}.w-30-ns{width:30%}.w-33-ns{width:33%}.w-34-ns{width:34%}.w-40-ns{width:40%}.w-50-ns{width:50%}.w-60-ns{width:60%}.w-70-ns{width:70%}.w-75-ns{width:75%}.w-80-ns{width:80%}.w-90-ns{width:90%}.w-100-ns{width:100%}.w-third-ns{width:33.33333%}.w-two-thirds-ns{width:66.66667%}.w-auto-ns{width:auto}}@media screen and (min-width:30em) and (max-width:60em){.w1-m{width:1rem}.w2-m{width:2rem}.w3-m{width:4rem}.w4-m{width:8rem}.w5-m{width:16rem}.w-10-m{width:10%}.w-20-m{width:20%}.w-25-m{width:25%}.w-30-m{width:30%}.w-33-m{width:33%}.w-34-m{width:34%}.w-40-m{width:40%}.w-50-m{width:50%}.w-60-m{width:60%}.w-70-m{width:70%}.w-75-m{width:75%}.w-80-m{width:80%}.w-90-m{width:90%}.w-100-m{width:100%}.w-third-m{width:33.33333%}.w-two-thirds-m{width:66.66667%}.w-auto-m{width:auto}}@media screen and (min-width:60em){.w1-l{width:1rem}.w2-l{width:2rem}.w3-l{width:4rem}.w4-l{width:8rem}.w5-l{width:16rem}.w-10-l{width:10%}.w-20-l{width:20%}.w-25-l{width:25%}.w-30-l{width:30%}.w-33-l{width:33%}.w-34-l{width:34%}.w-40-l{width:40%}.w-50-l{width:50%}.w-60-l{width:60%}.w-70-l{width:70%}.w-75-l{width:75%}.w-80-l{width:80%}.w-90-l{width:90%}.w-100-l{width:100%}.w-third-l{width:33.33333%}.w-two-thirds-l{width:66.66667%}.w-auto-l{width:auto}}.overflow-visible{overflow:visible}.overflow-hidden{overflow:hidden}.overflow-scroll{overflow:scroll}.overflow-auto{overflow:auto}.overflow-x-visible{overflow-x:visible}.overflow-x-hidden{overflow-x:hidden}.overflow-x-scroll{overflow-x:scroll}.overflow-x-auto{overflow-x:auto}.overflow-y-visible{overflow-y:visible}.overflow-y-hidden{overflow-y:hidden}.overflow-y-scroll{overflow-y:scroll}.overflow-y-auto{overflow-y:auto}@media screen and (min-width:30em){.overflow-visible-ns{overflow:visible}.overflow-hidden-ns{overflow:hidden}.overflow-scroll-ns{overflow:scroll}.overflow-auto-ns{overflow:auto}.overflow-x-visible-ns{overflow-x:visible}.overflow-x-hidden-ns{overflow-x:hidden}.overflow-x-scroll-ns{overflow-x:scroll}.overflow-x-auto-ns{overflow-x:auto}.overflow-y-visible-ns{overflow-y:visible}.overflow-y-hidden-ns{overflow-y:hidden}.overflow-y-scroll-ns{overflow-y:scroll}.overflow-y-auto-ns{overflow-y:auto}}@media screen and (min-width:30em) and (max-width:60em){.overflow-visible-m{overflow:visible}.overflow-hidden-m{overflow:hidden}.overflow-scroll-m{overflow:scroll}.overflow-auto-m{overflow:auto}.overflow-x-visible-m{overflow-x:visible}.overflow-x-hidden-m{overflow-x:hidden}.overflow-x-scroll-m{overflow-x:scroll}.overflow-x-auto-m{overflow-x:auto}.overflow-y-visible-m{overflow-y:visible}.overflow-y-hidden-m{overflow-y:hidden}.overflow-y-scroll-m{overflow-y:scroll}.overflow-y-auto-m{overflow-y:auto}}@media screen and (min-width:60em){.overflow-visible-l{overflow:visible}.overflow-hidden-l{overflow:hidden}.overflow-scroll-l{overflow:scroll}.overflow-auto-l{overflow:auto}.overflow-x-visible-l{overflow-x:visible}.overflow-x-hidden-l{overflow-x:hidden}.overflow-x-scroll-l{overflow-x:scroll}.overflow-x-auto-l{overflow-x:auto}.overflow-y-visible-l{overflow-y:visible}.overflow-y-hidden-l{overflow-y:hidden}.overflow-y-scroll-l{overflow-y:scroll}.overflow-y-auto-l{overflow-y:auto}}.static{position:static}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}@media screen and (min-width:30em){.static-ns{position:static}.relative-ns{position:relative}.absolute-ns{position:absolute}.fixed-ns{position:fixed}}@media screen and (min-width:30em) and (max-width:60em){.static-m{position:static}.relative-m{position:relative}.absolute-m{position:absolute}.fixed-m{position:fixed}}@media screen and (min-width:60em){.static-l{position:static}.relative-l{position:relative}.absolute-l{position:absolute}.fixed-l{position:fixed}}.o-100{opacity:1}.o-90{opacity:.9}.o-80{opacity:.8}.o-70{opacity:.7}.o-60{opacity:.6}.o-50{opacity:.5}.o-40{opacity:.4}.o-30{opacity:.3}.o-20{opacity:.2}.o-10{opacity:.1}.o-05{opacity:.05}.o-025{opacity:.025}.o-0{opacity:0}.rotate-45{transform:rotate(45deg)}.rotate-90{transform:rotate(90deg)}.rotate-135{transform:rotate(135deg)}.rotate-180{transform:rotate(180deg)}.rotate-225{transform:rotate(225deg)}.rotate-270{transform:rotate(270deg)}.rotate-315{transform:rotate(315deg)}@media screen and (min-width:30em){.rotate-45-ns{transform:rotate(45deg)}.rotate-90-ns{transform:rotate(90deg)}.rotate-135-ns{transform:rotate(135deg)}.rotate-180-ns{transform:rotate(180deg)}.rotate-225-ns{transform:rotate(225deg)}.rotate-270-ns{transform:rotate(270deg)}.rotate-315-ns{transform:rotate(315deg)}}@media screen and (min-width:30em) and (max-width:60em){.rotate-45-m{transform:rotate(45deg)}.rotate-90-m{transform:rotate(90deg)}.rotate-135-m{transform:rotate(135deg)}.rotate-180-m{transform:rotate(180deg)}.rotate-225-m{transform:rotate(225deg)}.rotate-270-m{transform:rotate(270deg)}.rotate-315-m{transform:rotate(315deg)}}@media screen and (min-width:60em){.rotate-45-l{transform:rotate(45deg)}.rotate-90-l{transform:rotate(90deg)}.rotate-135-l{transform:rotate(135deg)}.rotate-180-l{transform:rotate(180deg)}.rotate-225-l{transform:rotate(225deg)}.rotate-270-l{transform:rotate(270deg)}.rotate-315-l{transform:rotate(315deg)}}.black-90{color:rgba(0,0,0,.9)}.black-80{color:rgba(0,0,0,.8)}.black-70{color:rgba(0,0,0,.7)}.black-60{color:rgba(0,0,0,.6)}.black-50{color:rgba(0,0,0,.5)}.black-40{color:rgba(0,0,0,.4)}.black-30{color:rgba(0,0,0,.3)}.black-20{color:rgba(0,0,0,.2)}.black-10{color:rgba(0,0,0,.1)}.black-05{color:rgba(0,0,0,.05)}.white-90{color:hsla(0,0%,100%,.9)}.white-80{color:hsla(0,0%,100%,.8)}.white-70{color:hsla(0,0%,100%,.7)}.white-60{color:hsla(0,0%,100%,.6)}.white-50{color:hsla(0,0%,100%,.5)}.white-40{color:hsla(0,0%,100%,.4)}.white-30{color:hsla(0,0%,100%,.3)}.white-20{color:hsla(0,0%,100%,.2)}.white-10{color:hsla(0,0%,100%,.1)}.black{color:#000}.near-black{color:#111}.dark-gray{color:#333}.mid-gray{color:#555}.gray{color:#777}.silver{color:#999}.light-silver{color:#aaa}.moon-gray{color:#ccc}.light-gray{color:#eee}.near-white{color:#f4f4f4}.white{color:#fff}.dark-red{color:#e7040f}.red{color:#ff4136}.light-red{color:#ff725c}.orange{color:#ff6300}.gold{color:#ffb700}.yellow{color:gold}.light-yellow{color:#fbf1a9}.purple{color:#5e2ca5}.light-purple{color:#a463f2}.dark-pink{color:#d5008f}.hot-pink{color:#ff41b4}.pink{color:#ff80cc}.light-pink{color:#ffa3d7}.dark-green{color:#137752}.green{color:#19a974}.light-green{color:#9eebcf}.navy{color:#001b44}.dark-blue{color:#00449e}.blue{color:#357edd}.light-blue{color:#96ccff}.lightest-blue{color:#cdecff}.washed-blue{color:#f6fffe}.washed-green{color:#e8fdf5}.washed-yellow{color:#fffceb}.washed-red{color:#ffdfdf}.color-inherit{color:inherit}.bg-black-90{background-color:rgba(0,0,0,.9)}.bg-black-80{background-color:rgba(0,0,0,.8)}.bg-black-70{background-color:rgba(0,0,0,.7)}.bg-black-60{background-color:rgba(0,0,0,.6)}.bg-black-50{background-color:rgba(0,0,0,.5)}.bg-black-40{background-color:rgba(0,0,0,.4)}.bg-black-30{background-color:rgba(0,0,0,.3)}.bg-black-20{background-color:rgba(0,0,0,.2)}.bg-black-10{background-color:rgba(0,0,0,.1)}.bg-black-05{background-color:rgba(0,0,0,.05)}.bg-white-90{background-color:hsla(0,0%,100%,.9)}.bg-white-80{background-color:hsla(0,0%,100%,.8)}.bg-white-70{background-color:hsla(0,0%,100%,.7)}.bg-white-60{background-color:hsla(0,0%,100%,.6)}.bg-white-50{background-color:hsla(0,0%,100%,.5)}.bg-white-40{background-color:hsla(0,0%,100%,.4)}.bg-white-30{background-color:hsla(0,0%,100%,.3)}.bg-white-20{background-color:hsla(0,0%,100%,.2)}.bg-white-10{background-color:hsla(0,0%,100%,.1)}.bg-black{background-color:#000}.bg-near-black{background-color:#111}.bg-dark-gray{background-color:#333}.bg-mid-gray{background-color:#555}.bg-gray{background-color:#777}.bg-silver{background-color:#999}.bg-light-silver{background-color:#aaa}.bg-moon-gray{background-color:#ccc}.bg-light-gray{background-color:#eee}.bg-near-white{background-color:#f4f4f4}.bg-white{background-color:#fff}.bg-transparent{background-color:transparent}.bg-dark-red{background-color:#e7040f}.bg-red{background-color:#ff4136}.bg-light-red{background-color:#ff725c}.bg-orange{background-color:#ff6300}.bg-gold{background-color:#ffb700}.bg-yellow{background-color:gold}.bg-light-yellow{background-color:#fbf1a9}.bg-purple{background-color:#5e2ca5}.bg-light-purple{background-color:#a463f2}.bg-dark-pink{background-color:#d5008f}.bg-hot-pink{background-color:#ff41b4}.bg-pink{background-color:#ff80cc}.bg-light-pink{background-color:#ffa3d7}.bg-dark-green{background-color:#137752}.bg-green{background-color:#19a974}.bg-light-green{background-color:#9eebcf}.bg-navy{background-color:#001b44}.bg-dark-blue{background-color:#00449e}.bg-blue{background-color:#357edd}.bg-light-blue{background-color:#96ccff}.bg-lightest-blue{background-color:#cdecff}.bg-washed-blue{background-color:#f6fffe}.bg-washed-green{background-color:#e8fdf5}.bg-washed-yellow{background-color:#fffceb}.bg-washed-red{background-color:#ffdfdf}.bg-inherit{background-color:inherit}.hover-black:focus,.hover-black:hover{color:#000}.hover-near-black:focus,.hover-near-black:hover{color:#111}.hover-dark-gray:focus,.hover-dark-gray:hover{color:#333}.hover-mid-gray:focus,.hover-mid-gray:hover{color:#555}.hover-gray:focus,.hover-gray:hover{color:#777}.hover-silver:focus,.hover-silver:hover{color:#999}.hover-light-silver:focus,.hover-light-silver:hover{color:#aaa}.hover-moon-gray:focus,.hover-moon-gray:hover{color:#ccc}.hover-light-gray:focus,.hover-light-gray:hover{color:#eee}.hover-near-white:focus,.hover-near-white:hover{color:#f4f4f4}.hover-white:focus,.hover-white:hover{color:#fff}.hover-black-90:focus,.hover-black-90:hover{color:rgba(0,0,0,.9)}.hover-black-80:focus,.hover-black-80:hover{color:rgba(0,0,0,.8)}.hover-black-70:focus,.hover-black-70:hover{color:rgba(0,0,0,.7)}.hover-black-60:focus,.hover-black-60:hover{color:rgba(0,0,0,.6)}.hover-black-50:focus,.hover-black-50:hover{color:rgba(0,0,0,.5)}.hover-black-40:focus,.hover-black-40:hover{color:rgba(0,0,0,.4)}.hover-black-30:focus,.hover-black-30:hover{color:rgba(0,0,0,.3)}.hover-black-20:focus,.hover-black-20:hover{color:rgba(0,0,0,.2)}.hover-black-10:focus,.hover-black-10:hover{color:rgba(0,0,0,.1)}.hover-white-90:focus,.hover-white-90:hover{color:hsla(0,0%,100%,.9)}.hover-white-80:focus,.hover-white-80:hover{color:hsla(0,0%,100%,.8)}.hover-white-70:focus,.hover-white-70:hover{color:hsla(0,0%,100%,.7)}.hover-white-60:focus,.hover-white-60:hover{color:hsla(0,0%,100%,.6)}.hover-white-50:focus,.hover-white-50:hover{color:hsla(0,0%,100%,.5)}.hover-white-40:focus,.hover-white-40:hover{color:hsla(0,0%,100%,.4)}.hover-white-30:focus,.hover-white-30:hover{color:hsla(0,0%,100%,.3)}.hover-white-20:focus,.hover-white-20:hover{color:hsla(0,0%,100%,.2)}.hover-white-10:focus,.hover-white-10:hover{color:hsla(0,0%,100%,.1)}.hover-inherit:focus,.hover-inherit:hover{color:inherit}.hover-bg-black:focus,.hover-bg-black:hover{background-color:#000}.hover-bg-near-black:focus,.hover-bg-near-black:hover{background-color:#111}.hover-bg-dark-gray:focus,.hover-bg-dark-gray:hover{background-color:#333}.hover-bg-mid-gray:focus,.hover-bg-mid-gray:hover{background-color:#555}.hover-bg-gray:focus,.hover-bg-gray:hover{background-color:#777}.hover-bg-silver:focus,.hover-bg-silver:hover{background-color:#999}.hover-bg-light-silver:focus,.hover-bg-light-silver:hover{background-color:#aaa}.hover-bg-moon-gray:focus,.hover-bg-moon-gray:hover{background-color:#ccc}.hover-bg-light-gray:focus,.hover-bg-light-gray:hover{background-color:#eee}.hover-bg-near-white:focus,.hover-bg-near-white:hover{background-color:#f4f4f4}.hover-bg-white:focus,.hover-bg-white:hover{background-color:#fff}.hover-bg-transparent:focus,.hover-bg-transparent:hover{background-color:transparent}.hover-bg-black-90:focus,.hover-bg-black-90:hover{background-color:rgba(0,0,0,.9)}.hover-bg-black-80:focus,.hover-bg-black-80:hover{background-color:rgba(0,0,0,.8)}.hover-bg-black-70:focus,.hover-bg-black-70:hover{background-color:rgba(0,0,0,.7)}.hover-bg-black-60:focus,.hover-bg-black-60:hover{background-color:rgba(0,0,0,.6)}.hover-bg-black-50:focus,.hover-bg-black-50:hover{background-color:rgba(0,0,0,.5)}.hover-bg-black-40:focus,.hover-bg-black-40:hover{background-color:rgba(0,0,0,.4)}.hover-bg-black-30:focus,.hover-bg-black-30:hover{background-color:rgba(0,0,0,.3)}.hover-bg-black-20:focus,.hover-bg-black-20:hover{background-color:rgba(0,0,0,.2)}.hover-bg-black-10:focus,.hover-bg-black-10:hover{background-color:rgba(0,0,0,.1)}.hover-bg-white-90:focus,.hover-bg-white-90:hover{background-color:hsla(0,0%,100%,.9)}.hover-bg-white-80:focus,.hover-bg-white-80:hover{background-color:hsla(0,0%,100%,.8)}.hover-bg-white-70:focus,.hover-bg-white-70:hover{background-color:hsla(0,0%,100%,.7)}.hover-bg-white-60:focus,.hover-bg-white-60:hover{background-color:hsla(0,0%,100%,.6)}.hover-bg-white-50:focus,.hover-bg-white-50:hover{background-color:hsla(0,0%,100%,.5)}.hover-bg-white-40:focus,.hover-bg-white-40:hover{background-color:hsla(0,0%,100%,.4)}.hover-bg-white-30:focus,.hover-bg-white-30:hover{background-color:hsla(0,0%,100%,.3)}.hover-bg-white-20:focus,.hover-bg-white-20:hover{background-color:hsla(0,0%,100%,.2)}.hover-bg-white-10:focus,.hover-bg-white-10:hover{background-color:hsla(0,0%,100%,.1)}.hover-dark-red:focus,.hover-dark-red:hover{color:#e7040f}.hover-red:focus,.hover-red:hover{color:#ff4136}.hover-light-red:focus,.hover-light-red:hover{color:#ff725c}.hover-orange:focus,.hover-orange:hover{color:#ff6300}.hover-gold:focus,.hover-gold:hover{color:#ffb700}.hover-yellow:focus,.hover-yellow:hover{color:gold}.hover-light-yellow:focus,.hover-light-yellow:hover{color:#fbf1a9}.hover-purple:focus,.hover-purple:hover{color:#5e2ca5}.hover-light-purple:focus,.hover-light-purple:hover{color:#a463f2}.hover-dark-pink:focus,.hover-dark-pink:hover{color:#d5008f}.hover-hot-pink:focus,.hover-hot-pink:hover{color:#ff41b4}.hover-pink:focus,.hover-pink:hover{color:#ff80cc}.hover-light-pink:focus,.hover-light-pink:hover{color:#ffa3d7}.hover-dark-green:focus,.hover-dark-green:hover{color:#137752}.hover-green:focus,.hover-green:hover{color:#19a974}.hover-light-green:focus,.hover-light-green:hover{color:#9eebcf}.hover-navy:focus,.hover-navy:hover{color:#001b44}.hover-dark-blue:focus,.hover-dark-blue:hover{color:#00449e}.hover-blue:focus,.hover-blue:hover{color:#357edd}.hover-light-blue:focus,.hover-light-blue:hover{color:#96ccff}.hover-lightest-blue:focus,.hover-lightest-blue:hover{color:#cdecff}.hover-washed-blue:focus,.hover-washed-blue:hover{color:#f6fffe}.hover-washed-green:focus,.hover-washed-green:hover{color:#e8fdf5}.hover-washed-yellow:focus,.hover-washed-yellow:hover{color:#fffceb}.hover-washed-red:focus,.hover-washed-red:hover{color:#ffdfdf}.hover-bg-dark-red:focus,.hover-bg-dark-red:hover{background-color:#e7040f}.hover-bg-red:focus,.hover-bg-red:hover{background-color:#ff4136}.hover-bg-light-red:focus,.hover-bg-light-red:hover{background-color:#ff725c}.hover-bg-orange:focus,.hover-bg-orange:hover{background-color:#ff6300}.hover-bg-gold:focus,.hover-bg-gold:hover{background-color:#ffb700}.hover-bg-yellow:focus,.hover-bg-yellow:hover{background-color:gold}.hover-bg-light-yellow:focus,.hover-bg-light-yellow:hover{background-color:#fbf1a9}.hover-bg-purple:focus,.hover-bg-purple:hover{background-color:#5e2ca5}.hover-bg-light-purple:focus,.hover-bg-light-purple:hover{background-color:#a463f2}.hover-bg-dark-pink:focus,.hover-bg-dark-pink:hover{background-color:#d5008f}.hover-bg-hot-pink:focus,.hover-bg-hot-pink:hover{background-color:#ff41b4}.hover-bg-pink:focus,.hover-bg-pink:hover{background-color:#ff80cc}.hover-bg-light-pink:focus,.hover-bg-light-pink:hover{background-color:#ffa3d7}.hover-bg-dark-green:focus,.hover-bg-dark-green:hover{background-color:#137752}.hover-bg-green:focus,.hover-bg-green:hover{background-color:#19a974}.hover-bg-light-green:focus,.hover-bg-light-green:hover{background-color:#9eebcf}.hover-bg-navy:focus,.hover-bg-navy:hover{background-color:#001b44}.hover-bg-dark-blue:focus,.hover-bg-dark-blue:hover{background-color:#00449e}.hover-bg-blue:focus,.hover-bg-blue:hover{background-color:#357edd}.hover-bg-light-blue:focus,.hover-bg-light-blue:hover{background-color:#96ccff}.hover-bg-lightest-blue:focus,.hover-bg-lightest-blue:hover{background-color:#cdecff}.hover-bg-washed-blue:focus,.hover-bg-washed-blue:hover{background-color:#f6fffe}.hover-bg-washed-green:focus,.hover-bg-washed-green:hover{background-color:#e8fdf5}.hover-bg-washed-yellow:focus,.hover-bg-washed-yellow:hover{background-color:#fffceb}.hover-bg-washed-red:focus,.hover-bg-washed-red:hover{background-color:#ffdfdf}.hover-bg-inherit:focus,.hover-bg-inherit:hover{background-color:inherit}.pa0{padding:0}.pa1{padding:.25rem}.pa2{padding:.5rem}.pa3{padding:1rem}.pa4{padding:2rem}.pa5{padding:4rem}.pa6{padding:8rem}.pa7{padding:16rem}.pl0{padding-left:0}.pl1{padding-left:.25rem}.pl2{padding-left:.5rem}.pl3{padding-left:1rem}.pl4{padding-left:2rem}.pl5{padding-left:4rem}.pl6{padding-left:8rem}.pl7{padding-left:16rem}.pr0{padding-right:0}.pr1{padding-right:.25rem}.pr2{padding-right:.5rem}.pr3{padding-right:1rem}.pr4{padding-right:2rem}.pr5{padding-right:4rem}.pr6{padding-right:8rem}.pr7{padding-right:16rem}.pb0{padding-bottom:0}.pb1{padding-bottom:.25rem}.pb2{padding-bottom:.5rem}.pb3{padding-bottom:1rem}.pb4{padding-bottom:2rem}.pb5{padding-bottom:4rem}.pb6{padding-bottom:8rem}.pb7{padding-bottom:16rem}.pt0{padding-top:0}.pt1{padding-top:.25rem}.pt2{padding-top:.5rem}.pt3{padding-top:1rem}.pt4{padding-top:2rem}.pt5{padding-top:4rem}.pt6{padding-top:8rem}.pt7{padding-top:16rem}.pv0{padding-top:0;padding-bottom:0}.pv1{padding-top:.25rem;padding-bottom:.25rem}.pv2{padding-top:.5rem;padding-bottom:.5rem}.pv3{padding-top:1rem;padding-bottom:1rem}.pv4{padding-top:2rem;padding-bottom:2rem}.pv5{padding-top:4rem;padding-bottom:4rem}.pv6{padding-top:8rem;padding-bottom:8rem}.pv7{padding-top:16rem;padding-bottom:16rem}.ph0{padding-left:0;padding-right:0}.ph1{padding-left:.25rem;padding-right:.25rem}.ph2{padding-left:.5rem;padding-right:.5rem}.ph3{padding-left:1rem;padding-right:1rem}.ph4{padding-left:2rem;padding-right:2rem}.ph5{padding-left:4rem;padding-right:4rem}.ph6{padding-left:8rem;padding-right:8rem}.ph7{padding-left:16rem;padding-right:16rem}.ma0{margin:0}.ma1{margin:.25rem}.ma2{margin:.5rem}.ma3{margin:1rem}.ma4{margin:2rem}.ma5{margin:4rem}.ma6{margin:8rem}.ma7{margin:16rem}.ml0{margin-left:0}.ml1{margin-left:.25rem}.ml2{margin-left:.5rem}.ml3{margin-left:1rem}.ml4{margin-left:2rem}.ml5{margin-left:4rem}.ml6{margin-left:8rem}.ml7{margin-left:16rem}.mr0{margin-right:0}.mr1{margin-right:.25rem}.mr2{margin-right:.5rem}.mr3{margin-right:1rem}.mr4{margin-right:2rem}.mr5{margin-right:4rem}.mr6{margin-right:8rem}.mr7{margin-right:16rem}.mb0{margin-bottom:0}.mb1{margin-bottom:.25rem}.mb2{margin-bottom:.5rem}.mb3{margin-bottom:1rem}.mb4{margin-bottom:2rem}.mb5{margin-bottom:4rem}.mb6{margin-bottom:8rem}.mb7{margin-bottom:16rem}.mt0{margin-top:0}.mt1{margin-top:.25rem}.mt2{margin-top:.5rem}.mt3{margin-top:1rem}.mt4{margin-top:2rem}.mt5{margin-top:4rem}.mt6{margin-top:8rem}.mt7{margin-top:16rem}.mv0{margin-top:0;margin-bottom:0}.mv1{margin-top:.25rem;margin-bottom:.25rem}.mv2{margin-top:.5rem;margin-bottom:.5rem}.mv3{margin-top:1rem;margin-bottom:1rem}.mv4{margin-top:2rem;margin-bottom:2rem}.mv5{margin-top:4rem;margin-bottom:4rem}.mv6{margin-top:8rem;margin-bottom:8rem}.mv7{margin-top:16rem;margin-bottom:16rem}.mh0{margin-left:0;margin-right:0}.mh1{margin-left:.25rem;margin-right:.25rem}.mh2{margin-left:.5rem;margin-right:.5rem}.mh3{margin-left:1rem;margin-right:1rem}.mh4{margin-left:2rem;margin-right:2rem}.mh5{margin-left:4rem;margin-right:4rem}.mh6{margin-left:8rem;margin-right:8rem}.mh7{margin-left:16rem;margin-right:16rem}@media screen and (min-width:30em){.pa0-ns{padding:0}.pa1-ns{padding:.25rem}.pa2-ns{padding:.5rem}.pa3-ns{padding:1rem}.pa4-ns{padding:2rem}.pa5-ns{padding:4rem}.pa6-ns{padding:8rem}.pa7-ns{padding:16rem}.pl0-ns{padding-left:0}.pl1-ns{padding-left:.25rem}.pl2-ns{padding-left:.5rem}.pl3-ns{padding-left:1rem}.pl4-ns{padding-left:2rem}.pl5-ns{padding-left:4rem}.pl6-ns{padding-left:8rem}.pl7-ns{padding-left:16rem}.pr0-ns{padding-right:0}.pr1-ns{padding-right:.25rem}.pr2-ns{padding-right:.5rem}.pr3-ns{padding-right:1rem}.pr4-ns{padding-right:2rem}.pr5-ns{padding-right:4rem}.pr6-ns{padding-right:8rem}.pr7-ns{padding-right:16rem}.pb0-ns{padding-bottom:0}.pb1-ns{padding-bottom:.25rem}.pb2-ns{padding-bottom:.5rem}.pb3-ns{padding-bottom:1rem}.pb4-ns{padding-bottom:2rem}.pb5-ns{padding-bottom:4rem}.pb6-ns{padding-bottom:8rem}.pb7-ns{padding-bottom:16rem}.pt0-ns{padding-top:0}.pt1-ns{padding-top:.25rem}.pt2-ns{padding-top:.5rem}.pt3-ns{padding-top:1rem}.pt4-ns{padding-top:2rem}.pt5-ns{padding-top:4rem}.pt6-ns{padding-top:8rem}.pt7-ns{padding-top:16rem}.pv0-ns{padding-top:0;padding-bottom:0}.pv1-ns{padding-top:.25rem;padding-bottom:.25rem}.pv2-ns{padding-top:.5rem;padding-bottom:.5rem}.pv3-ns{padding-top:1rem;padding-bottom:1rem}.pv4-ns{padding-top:2rem;padding-bottom:2rem}.pv5-ns{padding-top:4rem;padding-bottom:4rem}.pv6-ns{padding-top:8rem;padding-bottom:8rem}.pv7-ns{padding-top:16rem;padding-bottom:16rem}.ph0-ns{padding-left:0;padding-right:0}.ph1-ns{padding-left:.25rem;padding-right:.25rem}.ph2-ns{padding-left:.5rem;padding-right:.5rem}.ph3-ns{padding-left:1rem;padding-right:1rem}.ph4-ns{padding-left:2rem;padding-right:2rem}.ph5-ns{padding-left:4rem;padding-right:4rem}.ph6-ns{padding-left:8rem;padding-right:8rem}.ph7-ns{padding-left:16rem;padding-right:16rem}.ma0-ns{margin:0}.ma1-ns{margin:.25rem}.ma2-ns{margin:.5rem}.ma3-ns{margin:1rem}.ma4-ns{margin:2rem}.ma5-ns{margin:4rem}.ma6-ns{margin:8rem}.ma7-ns{margin:16rem}.ml0-ns{margin-left:0}.ml1-ns{margin-left:.25rem}.ml2-ns{margin-left:.5rem}.ml3-ns{margin-left:1rem}.ml4-ns{margin-left:2rem}.ml5-ns{margin-left:4rem}.ml6-ns{margin-left:8rem}.ml7-ns{margin-left:16rem}.mr0-ns{margin-right:0}.mr1-ns{margin-right:.25rem}.mr2-ns{margin-right:.5rem}.mr3-ns{margin-right:1rem}.mr4-ns{margin-right:2rem}.mr5-ns{margin-right:4rem}.mr6-ns{margin-right:8rem}.mr7-ns{margin-right:16rem}.mb0-ns{margin-bottom:0}.mb1-ns{margin-bottom:.25rem}.mb2-ns{margin-bottom:.5rem}.mb3-ns{margin-bottom:1rem}.mb4-ns{margin-bottom:2rem}.mb5-ns{margin-bottom:4rem}.mb6-ns{margin-bottom:8rem}.mb7-ns{margin-bottom:16rem}.mt0-ns{margin-top:0}.mt1-ns{margin-top:.25rem}.mt2-ns{margin-top:.5rem}.mt3-ns{margin-top:1rem}.mt4-ns{margin-top:2rem}.mt5-ns{margin-top:4rem}.mt6-ns{margin-top:8rem}.mt7-ns{margin-top:16rem}.mv0-ns{margin-top:0;margin-bottom:0}.mv1-ns{margin-top:.25rem;margin-bottom:.25rem}.mv2-ns{margin-top:.5rem;margin-bottom:.5rem}.mv3-ns{margin-top:1rem;margin-bottom:1rem}.mv4-ns{margin-top:2rem;margin-bottom:2rem}.mv5-ns{margin-top:4rem;margin-bottom:4rem}.mv6-ns{margin-top:8rem;margin-bottom:8rem}.mv7-ns{margin-top:16rem;margin-bottom:16rem}.mh0-ns{margin-left:0;margin-right:0}.mh1-ns{margin-left:.25rem;margin-right:.25rem}.mh2-ns{margin-left:.5rem;margin-right:.5rem}.mh3-ns{margin-left:1rem;margin-right:1rem}.mh4-ns{margin-left:2rem;margin-right:2rem}.mh5-ns{margin-left:4rem;margin-right:4rem}.mh6-ns{margin-left:8rem;margin-right:8rem}.mh7-ns{margin-left:16rem;margin-right:16rem}}@media screen and (min-width:30em) and (max-width:60em){.pa0-m{padding:0}.pa1-m{padding:.25rem}.pa2-m{padding:.5rem}.pa3-m{padding:1rem}.pa4-m{padding:2rem}.pa5-m{padding:4rem}.pa6-m{padding:8rem}.pa7-m{padding:16rem}.pl0-m{padding-left:0}.pl1-m{padding-left:.25rem}.pl2-m{padding-left:.5rem}.pl3-m{padding-left:1rem}.pl4-m{padding-left:2rem}.pl5-m{padding-left:4rem}.pl6-m{padding-left:8rem}.pl7-m{padding-left:16rem}.pr0-m{padding-right:0}.pr1-m{padding-right:.25rem}.pr2-m{padding-right:.5rem}.pr3-m{padding-right:1rem}.pr4-m{padding-right:2rem}.pr5-m{padding-right:4rem}.pr6-m{padding-right:8rem}.pr7-m{padding-right:16rem}.pb0-m{padding-bottom:0}.pb1-m{padding-bottom:.25rem}.pb2-m{padding-bottom:.5rem}.pb3-m{padding-bottom:1rem}.pb4-m{padding-bottom:2rem}.pb5-m{padding-bottom:4rem}.pb6-m{padding-bottom:8rem}.pb7-m{padding-bottom:16rem}.pt0-m{padding-top:0}.pt1-m{padding-top:.25rem}.pt2-m{padding-top:.5rem}.pt3-m{padding-top:1rem}.pt4-m{padding-top:2rem}.pt5-m{padding-top:4rem}.pt6-m{padding-top:8rem}.pt7-m{padding-top:16rem}.pv0-m{padding-top:0;padding-bottom:0}.pv1-m{padding-top:.25rem;padding-bottom:.25rem}.pv2-m{padding-top:.5rem;padding-bottom:.5rem}.pv3-m{padding-top:1rem;padding-bottom:1rem}.pv4-m{padding-top:2rem;padding-bottom:2rem}.pv5-m{padding-top:4rem;padding-bottom:4rem}.pv6-m{padding-top:8rem;padding-bottom:8rem}.pv7-m{padding-top:16rem;padding-bottom:16rem}.ph0-m{padding-left:0;padding-right:0}.ph1-m{padding-left:.25rem;padding-right:.25rem}.ph2-m{padding-left:.5rem;padding-right:.5rem}.ph3-m{padding-left:1rem;padding-right:1rem}.ph4-m{padding-left:2rem;padding-right:2rem}.ph5-m{padding-left:4rem;padding-right:4rem}.ph6-m{padding-left:8rem;padding-right:8rem}.ph7-m{padding-left:16rem;padding-right:16rem}.ma0-m{margin:0}.ma1-m{margin:.25rem}.ma2-m{margin:.5rem}.ma3-m{margin:1rem}.ma4-m{margin:2rem}.ma5-m{margin:4rem}.ma6-m{margin:8rem}.ma7-m{margin:16rem}.ml0-m{margin-left:0}.ml1-m{margin-left:.25rem}.ml2-m{margin-left:.5rem}.ml3-m{margin-left:1rem}.ml4-m{margin-left:2rem}.ml5-m{margin-left:4rem}.ml6-m{margin-left:8rem}.ml7-m{margin-left:16rem}.mr0-m{margin-right:0}.mr1-m{margin-right:.25rem}.mr2-m{margin-right:.5rem}.mr3-m{margin-right:1rem}.mr4-m{margin-right:2rem}.mr5-m{margin-right:4rem}.mr6-m{margin-right:8rem}.mr7-m{margin-right:16rem}.mb0-m{margin-bottom:0}.mb1-m{margin-bottom:.25rem}.mb2-m{margin-bottom:.5rem}.mb3-m{margin-bottom:1rem}.mb4-m{margin-bottom:2rem}.mb5-m{margin-bottom:4rem}.mb6-m{margin-bottom:8rem}.mb7-m{margin-bottom:16rem}.mt0-m{margin-top:0}.mt1-m{margin-top:.25rem}.mt2-m{margin-top:.5rem}.mt3-m{margin-top:1rem}.mt4-m{margin-top:2rem}.mt5-m{margin-top:4rem}.mt6-m{margin-top:8rem}.mt7-m{margin-top:16rem}.mv0-m{margin-top:0;margin-bottom:0}.mv1-m{margin-top:.25rem;margin-bottom:.25rem}.mv2-m{margin-top:.5rem;margin-bottom:.5rem}.mv3-m{margin-top:1rem;margin-bottom:1rem}.mv4-m{margin-top:2rem;margin-bottom:2rem}.mv5-m{margin-top:4rem;margin-bottom:4rem}.mv6-m{margin-top:8rem;margin-bottom:8rem}.mv7-m{margin-top:16rem;margin-bottom:16rem}.mh0-m{margin-left:0;margin-right:0}.mh1-m{margin-left:.25rem;margin-right:.25rem}.mh2-m{margin-left:.5rem;margin-right:.5rem}.mh3-m{margin-left:1rem;margin-right:1rem}.mh4-m{margin-left:2rem;margin-right:2rem}.mh5-m{margin-left:4rem;margin-right:4rem}.mh6-m{margin-left:8rem;margin-right:8rem}.mh7-m{margin-left:16rem;margin-right:16rem}}@media screen and (min-width:60em){.pa0-l{padding:0}.pa1-l{padding:.25rem}.pa2-l{padding:.5rem}.pa3-l{padding:1rem}.pa4-l{padding:2rem}.pa5-l{padding:4rem}.pa6-l{padding:8rem}.pa7-l{padding:16rem}.pl0-l{padding-left:0}.pl1-l{padding-left:.25rem}.pl2-l{padding-left:.5rem}.pl3-l{padding-left:1rem}.pl4-l{padding-left:2rem}.pl5-l{padding-left:4rem}.pl6-l{padding-left:8rem}.pl7-l{padding-left:16rem}.pr0-l{padding-right:0}.pr1-l{padding-right:.25rem}.pr2-l{padding-right:.5rem}.pr3-l{padding-right:1rem}.pr4-l{padding-right:2rem}.pr5-l{padding-right:4rem}.pr6-l{padding-right:8rem}.pr7-l{padding-right:16rem}.pb0-l{padding-bottom:0}.pb1-l{padding-bottom:.25rem}.pb2-l{padding-bottom:.5rem}.pb3-l{padding-bottom:1rem}.pb4-l{padding-bottom:2rem}.pb5-l{padding-bottom:4rem}.pb6-l{padding-bottom:8rem}.pb7-l{padding-bottom:16rem}.pt0-l{padding-top:0}.pt1-l{padding-top:.25rem}.pt2-l{padding-top:.5rem}.pt3-l{padding-top:1rem}.pt4-l{padding-top:2rem}.pt5-l{padding-top:4rem}.pt6-l{padding-top:8rem}.pt7-l{padding-top:16rem}.pv0-l{padding-top:0;padding-bottom:0}.pv1-l{padding-top:.25rem;padding-bottom:.25rem}.pv2-l{padding-top:.5rem;padding-bottom:.5rem}.pv3-l{padding-top:1rem;padding-bottom:1rem}.pv4-l{padding-top:2rem;padding-bottom:2rem}.pv5-l{padding-top:4rem;padding-bottom:4rem}.pv6-l{padding-top:8rem;padding-bottom:8rem}.pv7-l{padding-top:16rem;padding-bottom:16rem}.ph0-l{padding-left:0;padding-right:0}.ph1-l{padding-left:.25rem;padding-right:.25rem}.ph2-l{padding-left:.5rem;padding-right:.5rem}.ph3-l{padding-left:1rem;padding-right:1rem}.ph4-l{padding-left:2rem;padding-right:2rem}.ph5-l{padding-left:4rem;padding-right:4rem}.ph6-l{padding-left:8rem;padding-right:8rem}.ph7-l{padding-left:16rem;padding-right:16rem}.ma0-l{margin:0}.ma1-l{margin:.25rem}.ma2-l{margin:.5rem}.ma3-l{margin:1rem}.ma4-l{margin:2rem}.ma5-l{margin:4rem}.ma6-l{margin:8rem}.ma7-l{margin:16rem}.ml0-l{margin-left:0}.ml1-l{margin-left:.25rem}.ml2-l{margin-left:.5rem}.ml3-l{margin-left:1rem}.ml4-l{margin-left:2rem}.ml5-l{margin-left:4rem}.ml6-l{margin-left:8rem}.ml7-l{margin-left:16rem}.mr0-l{margin-right:0}.mr1-l{margin-right:.25rem}.mr2-l{margin-right:.5rem}.mr3-l{margin-right:1rem}.mr4-l{margin-right:2rem}.mr5-l{margin-right:4rem}.mr6-l{margin-right:8rem}.mr7-l{margin-right:16rem}.mb0-l{margin-bottom:0}.mb1-l{margin-bottom:.25rem}.mb2-l{margin-bottom:.5rem}.mb3-l{margin-bottom:1rem}.mb4-l{margin-bottom:2rem}.mb5-l{margin-bottom:4rem}.mb6-l{margin-bottom:8rem}.mb7-l{margin-bottom:16rem}.mt0-l{margin-top:0}.mt1-l{margin-top:.25rem}.mt2-l{margin-top:.5rem}.mt3-l{margin-top:1rem}.mt4-l{margin-top:2rem}.mt5-l{margin-top:4rem}.mt6-l{margin-top:8rem}.mt7-l{margin-top:16rem}.mv0-l{margin-top:0;margin-bottom:0}.mv1-l{margin-top:.25rem;margin-bottom:.25rem}.mv2-l{margin-top:.5rem;margin-bottom:.5rem}.mv3-l{margin-top:1rem;margin-bottom:1rem}.mv4-l{margin-top:2rem;margin-bottom:2rem}.mv5-l{margin-top:4rem;margin-bottom:4rem}.mv6-l{margin-top:8rem;margin-bottom:8rem}.mv7-l{margin-top:16rem;margin-bottom:16rem}.mh0-l{margin-left:0;margin-right:0}.mh1-l{margin-left:.25rem;margin-right:.25rem}.mh2-l{margin-left:.5rem;margin-right:.5rem}.mh3-l{margin-left:1rem;margin-right:1rem}.mh4-l{margin-left:2rem;margin-right:2rem}.mh5-l{margin-left:4rem;margin-right:4rem}.mh6-l{margin-left:8rem;margin-right:8rem}.mh7-l{margin-left:16rem;margin-right:16rem}}.na1{margin:-.25rem}.na2{margin:-.5rem}.na3{margin:-1rem}.na4{margin:-2rem}.na5{margin:-4rem}.na6{margin:-8rem}.na7{margin:-16rem}.nl1{margin-left:-.25rem}.nl2{margin-left:-.5rem}.nl3{margin-left:-1rem}.nl4{margin-left:-2rem}.nl5{margin-left:-4rem}.nl6{margin-left:-8rem}.nl7{margin-left:-16rem}.nr1{margin-right:-.25rem}.nr2{margin-right:-.5rem}.nr3{margin-right:-1rem}.nr4{margin-right:-2rem}.nr5{margin-right:-4rem}.nr6{margin-right:-8rem}.nr7{margin-right:-16rem}.nb1{margin-bottom:-.25rem}.nb2{margin-bottom:-.5rem}.nb3{margin-bottom:-1rem}.nb4{margin-bottom:-2rem}.nb5{margin-bottom:-4rem}.nb6{margin-bottom:-8rem}.nb7{margin-bottom:-16rem}.nt1{margin-top:-.25rem}.nt2{margin-top:-.5rem}.nt3{margin-top:-1rem}.nt4{margin-top:-2rem}.nt5{margin-top:-4rem}.nt6{margin-top:-8rem}.nt7{margin-top:-16rem}@media screen and (min-width:30em){.na1-ns{margin:-.25rem}.na2-ns{margin:-.5rem}.na3-ns{margin:-1rem}.na4-ns{margin:-2rem}.na5-ns{margin:-4rem}.na6-ns{margin:-8rem}.na7-ns{margin:-16rem}.nl1-ns{margin-left:-.25rem}.nl2-ns{margin-left:-.5rem}.nl3-ns{margin-left:-1rem}.nl4-ns{margin-left:-2rem}.nl5-ns{margin-left:-4rem}.nl6-ns{margin-left:-8rem}.nl7-ns{margin-left:-16rem}.nr1-ns{margin-right:-.25rem}.nr2-ns{margin-right:-.5rem}.nr3-ns{margin-right:-1rem}.nr4-ns{margin-right:-2rem}.nr5-ns{margin-right:-4rem}.nr6-ns{margin-right:-8rem}.nr7-ns{margin-right:-16rem}.nb1-ns{margin-bottom:-.25rem}.nb2-ns{margin-bottom:-.5rem}.nb3-ns{margin-bottom:-1rem}.nb4-ns{margin-bottom:-2rem}.nb5-ns{margin-bottom:-4rem}.nb6-ns{margin-bottom:-8rem}.nb7-ns{margin-bottom:-16rem}.nt1-ns{margin-top:-.25rem}.nt2-ns{margin-top:-.5rem}.nt3-ns{margin-top:-1rem}.nt4-ns{margin-top:-2rem}.nt5-ns{margin-top:-4rem}.nt6-ns{margin-top:-8rem}.nt7-ns{margin-top:-16rem}}@media screen and (min-width:30em) and (max-width:60em){.na1-m{margin:-.25rem}.na2-m{margin:-.5rem}.na3-m{margin:-1rem}.na4-m{margin:-2rem}.na5-m{margin:-4rem}.na6-m{margin:-8rem}.na7-m{margin:-16rem}.nl1-m{margin-left:-.25rem}.nl2-m{margin-left:-.5rem}.nl3-m{margin-left:-1rem}.nl4-m{margin-left:-2rem}.nl5-m{margin-left:-4rem}.nl6-m{margin-left:-8rem}.nl7-m{margin-left:-16rem}.nr1-m{margin-right:-.25rem}.nr2-m{margin-right:-.5rem}.nr3-m{margin-right:-1rem}.nr4-m{margin-right:-2rem}.nr5-m{margin-right:-4rem}.nr6-m{margin-right:-8rem}.nr7-m{margin-right:-16rem}.nb1-m{margin-bottom:-.25rem}.nb2-m{margin-bottom:-.5rem}.nb3-m{margin-bottom:-1rem}.nb4-m{margin-bottom:-2rem}.nb5-m{margin-bottom:-4rem}.nb6-m{margin-bottom:-8rem}.nb7-m{margin-bottom:-16rem}.nt1-m{margin-top:-.25rem}.nt2-m{margin-top:-.5rem}.nt3-m{margin-top:-1rem}.nt4-m{margin-top:-2rem}.nt5-m{margin-top:-4rem}.nt6-m{margin-top:-8rem}.nt7-m{margin-top:-16rem}}@media screen and (min-width:60em){.na1-l{margin:-.25rem}.na2-l{margin:-.5rem}.na3-l{margin:-1rem}.na4-l{margin:-2rem}.na5-l{margin:-4rem}.na6-l{margin:-8rem}.na7-l{margin:-16rem}.nl1-l{margin-left:-.25rem}.nl2-l{margin-left:-.5rem}.nl3-l{margin-left:-1rem}.nl4-l{margin-left:-2rem}.nl5-l{margin-left:-4rem}.nl6-l{margin-left:-8rem}.nl7-l{margin-left:-16rem}.nr1-l{margin-right:-.25rem}.nr2-l{margin-right:-.5rem}.nr3-l{margin-right:-1rem}.nr4-l{margin-right:-2rem}.nr5-l{margin-right:-4rem}.nr6-l{margin-right:-8rem}.nr7-l{margin-right:-16rem}.nb1-l{margin-bottom:-.25rem}.nb2-l{margin-bottom:-.5rem}.nb3-l{margin-bottom:-1rem}.nb4-l{margin-bottom:-2rem}.nb5-l{margin-bottom:-4rem}.nb6-l{margin-bottom:-8rem}.nb7-l{margin-bottom:-16rem}.nt1-l{margin-top:-.25rem}.nt2-l{margin-top:-.5rem}.nt3-l{margin-top:-1rem}.nt4-l{margin-top:-2rem}.nt5-l{margin-top:-4rem}.nt6-l{margin-top:-8rem}.nt7-l{margin-top:-16rem}}.collapse{border-collapse:collapse;border-spacing:0}.striped--light-silver:nth-child(odd){background-color:#aaa}.striped--moon-gray:nth-child(odd){background-color:#ccc}.striped--light-gray:nth-child(odd){background-color:#eee}.striped--near-white:nth-child(odd){background-color:#f4f4f4}.stripe-light:nth-child(odd){background-color:hsla(0,0%,100%,.1)}.stripe-dark:nth-child(odd){background-color:rgba(0,0,0,.1)}.strike{text-decoration:line-through}.underline{text-decoration:underline}.no-underline{text-decoration:none}@media screen and (min-width:30em){.strike-ns{text-decoration:line-through}.underline-ns{text-decoration:underline}.no-underline-ns{text-decoration:none}}@media screen and (min-width:30em) and (max-width:60em){.strike-m{text-decoration:line-through}.underline-m{text-decoration:underline}.no-underline-m{text-decoration:none}}@media screen and (min-width:60em){.strike-l{text-decoration:line-through}.underline-l{text-decoration:underline}.no-underline-l{text-decoration:none}}.tl{text-align:left}.tr{text-align:right}.tc{text-align:center}.tj{text-align:justify}@media screen and (min-width:30em){.tl-ns{text-align:left}.tr-ns{text-align:right}.tc-ns{text-align:center}.tj-ns{text-align:justify}}@media screen and (min-width:30em) and (max-width:60em){.tl-m{text-align:left}.tr-m{text-align:right}.tc-m{text-align:center}.tj-m{text-align:justify}}@media screen and (min-width:60em){.tl-l{text-align:left}.tr-l{text-align:right}.tc-l{text-align:center}.tj-l{text-align:justify}}.ttc{text-transform:capitalize}.ttl{text-transform:lowercase}.ttu{text-transform:uppercase}.ttn{text-transform:none}@media screen and (min-width:30em){.ttc-ns{text-transform:capitalize}.ttl-ns{text-transform:lowercase}.ttu-ns{text-transform:uppercase}.ttn-ns{text-transform:none}}@media screen and (min-width:30em) and (max-width:60em){.ttc-m{text-transform:capitalize}.ttl-m{text-transform:lowercase}.ttu-m{text-transform:uppercase}.ttn-m{text-transform:none}}@media screen and (min-width:60em){.ttc-l{text-transform:capitalize}.ttl-l{text-transform:lowercase}.ttu-l{text-transform:uppercase}.ttn-l{text-transform:none}}.f-6,.f-headline{font-size:6rem}.f-5,.f-subheadline{font-size:5rem}.f1{font-size:3rem}.f2{font-size:2.25rem}.f3{font-size:1.5rem}.f4{font-size:1.25rem}.f5{font-size:1rem}.f6{font-size:.875rem}.f7{font-size:.75rem}@media screen and (min-width:30em){.f-6-ns,.f-headline-ns{font-size:6rem}.f-5-ns,.f-subheadline-ns{font-size:5rem}.f1-ns{font-size:3rem}.f2-ns{font-size:2.25rem}.f3-ns{font-size:1.5rem}.f4-ns{font-size:1.25rem}.f5-ns{font-size:1rem}.f6-ns{font-size:.875rem}.f7-ns{font-size:.75rem}}@media screen and (min-width:30em) and (max-width:60em){.f-6-m,.f-headline-m{font-size:6rem}.f-5-m,.f-subheadline-m{font-size:5rem}.f1-m{font-size:3rem}.f2-m{font-size:2.25rem}.f3-m{font-size:1.5rem}.f4-m{font-size:1.25rem}.f5-m{font-size:1rem}.f6-m{font-size:.875rem}.f7-m{font-size:.75rem}}@media screen and (min-width:60em){.f-6-l,.f-headline-l{font-size:6rem}.f-5-l,.f-subheadline-l{font-size:5rem}.f1-l{font-size:3rem}.f2-l{font-size:2.25rem}.f3-l{font-size:1.5rem}.f4-l{font-size:1.25rem}.f5-l{font-size:1rem}.f6-l{font-size:.875rem}.f7-l{font-size:.75rem}}.measure{max-width:30em}.measure-wide{max-width:34em}.measure-narrow{max-width:20em}.indent{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps{font-feature-settings:"c2sc";font-variant:small-caps}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width:30em){.measure-ns{max-width:30em}.measure-wide-ns{max-width:34em}.measure-narrow-ns{max-width:20em}.indent-ns{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-ns{font-feature-settings:"c2sc";font-variant:small-caps}.truncate-ns{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width:30em) and (max-width:60em){.measure-m{max-width:30em}.measure-wide-m{max-width:34em}.measure-narrow-m{max-width:20em}.indent-m{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-m{font-feature-settings:"c2sc";font-variant:small-caps}.truncate-m{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-width:60em){.measure-l{max-width:30em}.measure-wide-l{max-width:34em}.measure-narrow-l{max-width:20em}.indent-l{text-indent:1em;margin-top:0;margin-bottom:0}.small-caps-l{font-feature-settings:"c2sc";font-variant:small-caps}.truncate-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}.overflow-container{overflow-y:scroll}.center{margin-left:auto}.center,.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}@media screen and (min-width:30em){.center-ns{margin-left:auto}.center-ns,.mr-auto-ns{margin-right:auto}.ml-auto-ns{margin-left:auto}}@media screen and (min-width:30em) and (max-width:60em){.center-m{margin-left:auto}.center-m,.mr-auto-m{margin-right:auto}.ml-auto-m{margin-left:auto}}@media screen and (min-width:60em){.center-l{margin-left:auto}.center-l,.mr-auto-l{margin-right:auto}.ml-auto-l{margin-left:auto}}.clip{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}@media screen and (min-width:30em){.clip-ns{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}}@media screen and (min-width:30em) and (max-width:60em){.clip-m{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}}@media screen and (min-width:60em){.clip-l{position:fixed!important;_position:absolute!important;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px)}}.ws-normal{white-space:normal}.nowrap{white-space:nowrap}.pre{white-space:pre}@media screen and (min-width:30em){.ws-normal-ns{white-space:normal}.nowrap-ns{white-space:nowrap}.pre-ns{white-space:pre}}@media screen and (min-width:30em) and (max-width:60em){.ws-normal-m{white-space:normal}.nowrap-m{white-space:nowrap}.pre-m{white-space:pre}}@media screen and (min-width:60em){.ws-normal-l{white-space:normal}.nowrap-l{white-space:nowrap}.pre-l{white-space:pre}}.v-base{vertical-align:baseline}.v-mid{vertical-align:middle}.v-top{vertical-align:top}.v-btm{vertical-align:bottom}@media screen and (min-width:30em){.v-base-ns{vertical-align:baseline}.v-mid-ns{vertical-align:middle}.v-top-ns{vertical-align:top}.v-btm-ns{vertical-align:bottom}}@media screen and (min-width:30em) and (max-width:60em){.v-base-m{vertical-align:baseline}.v-mid-m{vertical-align:middle}.v-top-m{vertical-align:top}.v-btm-m{vertical-align:bottom}}@media screen and (min-width:60em){.v-base-l{vertical-align:baseline}.v-mid-l{vertical-align:middle}.v-top-l{vertical-align:top}.v-btm-l{vertical-align:bottom}}.dim{opacity:1}.dim,.dim:focus,.dim:hover{transition:opacity .15s ease-in}.dim:focus,.dim:hover{opacity:.5}.dim:active{opacity:.8;transition:opacity .15s ease-out}.glow,.glow:focus,.glow:hover{transition:opacity .15s ease-in}.glow:focus,.glow:hover{opacity:1}.hide-child .child{opacity:0;transition:opacity .15s ease-in}.hide-child:active .child,.hide-child:focus .child,.hide-child:hover .child{opacity:1;transition:opacity .15s ease-in}.underline-hover:focus,.underline-hover:hover{text-decoration:underline}.grow{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:transform .25s ease-out}.grow:focus,.grow:hover{transform:scale(1.05)}.grow:active{transform:scale(.9)}.grow-large{-moz-osx-font-smoothing:grayscale;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0);transition:transform .25s ease-in-out}.grow-large:focus,.grow-large:hover{transform:scale(1.2)}.grow-large:active{transform:scale(.95)}.pointer:hover,.shadow-hover{cursor:pointer}.shadow-hover{position:relative;transition:all .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:after{content:"";box-shadow:0 0 16px 2px rgba(0,0,0,.2);border-radius:inherit;opacity:0;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;transition:opacity .5s cubic-bezier(.165,.84,.44,1)}.shadow-hover:focus:after,.shadow-hover:hover:after{opacity:1}.bg-animate,.bg-animate:focus,.bg-animate:hover{transition:background-color .15s ease-in-out}.z-0{z-index:0}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-999{z-index:999}.z-9999{z-index:9999}.z-max{z-index:2147483647}.z-inherit{z-index:inherit}.z-initial{z-index:auto}.z-unset{z-index:unset}.nested-copy-line-height ol,.nested-copy-line-height p,.nested-copy-line-height ul{line-height:1.5}.nested-headline-line-height h1,.nested-headline-line-height h2,.nested-headline-line-height h3,.nested-headline-line-height h4,.nested-headline-line-height h5,.nested-headline-line-height h6{line-height:1.25}.nested-list-reset ol,.nested-list-reset ul{padding-left:0;margin-left:0;list-style-type:none}.nested-copy-indent p+p{text-indent:1em;margin-top:0;margin-bottom:0}.nested-copy-separator p+p{margin-top:1.5em}.nested-img img{width:100%;max-width:100%;display:block}.nested-links a{color:#357edd;transition:color .15s ease-in}.nested-links a:focus,.nested-links a:hover{color:#96ccff;transition:color .15s ease-in}.pre,pre{overflow-x:auto;overflow-y:hidden;overflow:scroll}pre code{display:block;padding:1.5em;font-size:.875rem;line-height:2}pre,pre code{white-space:pre}pre{background-color:#222;color:#ddd;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none;position:relative}.pagination{margin:3rem 0}.pagination li{display:inline-block;margin-right:.375rem;font-size:.875rem;margin-bottom:2.5em}.pagination li a{padding:.5rem .625rem;background-color:#fff;color:#333;border:1px solid #ddd;border-radius:3px;text-decoration:none}.pagination li.disabled{display:none}.pagination li.active a:active,.pagination li.active a:link,.pagination li.active a:visited{background-color:#ddd}.facebook,.github,.gitlab,.instagram,.keybase,.linkedin,.mastodon,.medium,.slack,.stackoverflow,.twitter,.youtube{fill:#bababa}.new-window{opacity:0;display:inline-block;vertical-align:top}.link-transition:hover .new-window{opacity:1}.facebook:hover{fill:#3b5998}.twitter:hover{fill:#1da1f2}.instagram:hover{fill:#e1306c}.youtube:hover{fill:#cd201f}.github:hover{fill:#6cc644}.gitlab:hover{fill:#fc6d26}.keybase:hover{fill:#3d76ff}.linkedin:hover,.medium:hover{fill:#0077b5}.mastodon:hover{fill:#3088d4}.slack:hover{fill:#e01e5a}.stackoverflow:hover{fill:#f48024}#TableOfContents ul li{margin-bottom:1em}.lh-copy blockquote{display:block;font-size:.875em;margin-left:2rem;margin-top:2rem;margin-bottom:2rem;border-left:4px solid #ccc;padding-left:1rem} \ No newline at end of file diff --git a/public/dist/css/app.4fc0b62e4b82c997bb0041217cd6b979.css b/public/dist/css/app.4fc0b62e4b82c997bb0041217cd6b979.css new file mode 100644 index 0000000..de2428d --- /dev/null +++ b/public/dist/css/app.4fc0b62e4b82c997bb0041217cd6b979.css @@ -0,0 +1,5876 @@ +/*! TACHYONS v4.9.1 | http://tachyons.io */ + +/* + * + * ________ ______ + * ___ __/_____ _________ /______ ______________________ + * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ + * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) + * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ + * /____/ + * + * TABLE OF CONTENTS + * + * 1. External Library Includes + * - Normalize.css | http://normalize.css.github.io + * 2. Tachyons Modules + * 3. Variables + * - Media Queries + * - Colors + * 4. Debugging + * - Debug all + * - Debug children + * + */ + +/* External Library Includes */ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + +/* Modules */ + +/* + + BOX SIZING + +*/ + +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} + +/* + + ASPECT RATIOS + +*/ + +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} + +.aspect-ratio--16x9 { padding-bottom: 56.25%; } + +.aspect-ratio--9x16 { padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { padding-bottom: 75%; } + +.aspect-ratio--3x4 { padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { padding-bottom: 66.6%; } + +.aspect-ratio--4x6 { padding-bottom: 150%; } + +.aspect-ratio--8x5 { padding-bottom: 62.5%; } + +.aspect-ratio--5x8 { padding-bottom: 160%; } + +.aspect-ratio--7x5 { padding-bottom: 71.42%; } + +.aspect-ratio--5x7 { padding-bottom: 140%; } + +.aspect-ratio--1x1 { padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +@media screen and (min-width: 30em){ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 60em){ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ + +/* Responsive images! */ + +img { max-width: 100%; } + +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Often used in combination with background image set as an inline style + on an html element. +*/ + +.cover { background-size: cover!important; } + +.contain { background-size: contain!important; } + +@media screen and (min-width: 30em) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} + +@media screen and (min-width: 60em) { + .cover-l { background-size: cover!important; } + .contain-l { background-size: contain!important; } +} + +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media screen and (min-width: 30em) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 60em) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} + +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.outline { outline: 1px solid; } + +.outline-transparent { outline: 1px solid transparent; } + +.outline-0 { outline: 0; } + +@media screen and (min-width: 30em) { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } +} + +@media screen and (min-width: 60em) { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } +} + +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ba { border-style: solid; border-width: 1px; } + +.bt { border-top-style: solid; border-top-width: 1px; } + +.br { border-right-style: solid; border-right-width: 1px; } + +.bb { border-bottom-style: solid; border-bottom-width: 1px; } + +.bl { border-left-style: solid; border-left-width: 1px; } + +.bn { border-style: none; border-width: 0; } + +@media screen and (min-width: 30em) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 60em) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } +} + +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ + +.b--black { border-color: #000; } + +.b--near-black { border-color: #111; } + +.b--dark-gray { border-color: #333; } + +.b--mid-gray { border-color: #555; } + +.b--gray { border-color: #777; } + +.b--silver { border-color: #999; } + +.b--light-silver { border-color: #aaa; } + +.b--moon-gray { border-color: #ccc; } + +.b--light-gray { border-color: #eee; } + +.b--near-white { border-color: #f4f4f4; } + +.b--white { border-color: #fff; } + +.b--white-90 { border-color: rgba(255, 255, 255, .9); } + +.b--white-80 { border-color: rgba(255, 255, 255, .8); } + +.b--white-70 { border-color: rgba(255, 255, 255, .7); } + +.b--white-60 { border-color: rgba(255, 255, 255, .6); } + +.b--white-50 { border-color: rgba(255, 255, 255, .5); } + +.b--white-40 { border-color: rgba(255, 255, 255, .4); } + +.b--white-30 { border-color: rgba(255, 255, 255, .3); } + +.b--white-20 { border-color: rgba(255, 255, 255, .2); } + +.b--white-10 { border-color: rgba(255, 255, 255, .1); } + +.b--white-05 { border-color: rgba(255, 255, 255, .05); } + +.b--white-025 { border-color: rgba(255, 255, 255, .025); } + +.b--white-0125 { border-color: rgba(255, 255, 255, .0125); } + +.b--black-90 { border-color: rgba(0, 0, 0, .9); } + +.b--black-80 { border-color: rgba(0, 0, 0, .8); } + +.b--black-70 { border-color: rgba(0, 0, 0, .7); } + +.b--black-60 { border-color: rgba(0, 0, 0, .6); } + +.b--black-50 { border-color: rgba(0, 0, 0, .5); } + +.b--black-40 { border-color: rgba(0, 0, 0, .4); } + +.b--black-30 { border-color: rgba(0, 0, 0, .3); } + +.b--black-20 { border-color: rgba(0, 0, 0, .2); } + +.b--black-10 { border-color: rgba(0, 0, 0, .1); } + +.b--black-05 { border-color: rgba(0, 0, 0, .05); } + +.b--black-025 { border-color: rgba(0, 0, 0, .025); } + +.b--black-0125 { border-color: rgba(0, 0, 0, .0125); } + +.b--dark-red { border-color: #e7040f; } + +.b--red { border-color: #ff4136; } + +.b--light-red { border-color: #ff725c; } + +.b--orange { border-color: #ff6300; } + +.b--gold { border-color: #ffb700; } + +.b--yellow { border-color: #ffd700; } + +.b--light-yellow { border-color: #fbf1a9; } + +.b--purple { border-color: #5e2ca5; } + +.b--light-purple { border-color: #a463f2; } + +.b--dark-pink { border-color: #d5008f; } + +.b--hot-pink { border-color: #ff41b4; } + +.b--pink { border-color: #ff80cc; } + +.b--light-pink { border-color: #ffa3d7; } + +.b--dark-green { border-color: #137752; } + +.b--green { border-color: #19a974; } + +.b--light-green { border-color: #9eebcf; } + +.b--navy { border-color: #001b44; } + +.b--dark-blue { border-color: #00449e; } + +.b--blue { border-color: #357edd; } + +.b--light-blue { border-color: #96ccff; } + +.b--lightest-blue { border-color: #cdecff; } + +.b--washed-blue { border-color: #f6fffe; } + +.b--washed-green { border-color: #e8fdf5; } + +.b--washed-yellow { border-color: #fffceb; } + +.b--washed-red { border-color: #ffdfdf; } + +.b--transparent { border-color: transparent; } + +.b--inherit { border-color: inherit; } + +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.br0 { border-radius: 0; } + +.br1 { border-radius: .125rem; } + +.br2 { border-radius: .25rem; } + +.br3 { border-radius: .5rem; } + +.br4 { border-radius: 1rem; } + +.br-100 { border-radius: 100%; } + +.br-pill { border-radius: 9999px; } + +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + +@media screen and (min-width: 30em) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 60em) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.b--dotted { border-style: dotted; } + +.b--dashed { border-style: dashed; } + +.b--solid { border-style: solid; } + +.b--none { border-style: none; } + +@media screen and (min-width: 30em) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} + +@media screen and (min-width: 60em) { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } +} + +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.bw0 { border-width: 0; } + +.bw1 { border-width: .125rem; } + +.bw2 { border-width: .25rem; } + +.bw3 { border-width: .5rem; } + +.bw4 { border-width: 1rem; } + +.bw5 { border-width: 2rem; } + +/* Resets */ + +.bt-0 { border-top-width: 0; } + +.br-0 { border-right-width: 0; } + +.bb-0 { border-bottom-width: 0; } + +.bl-0 { border-left-width: 0; } + +@media screen and (min-width: 30em) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } +} + +@media screen and (min-width: 60em) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .bl-0-l { border-left-width: 0; } +} + +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-2 { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + +.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-4 { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + +.shadow-5 { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } + +@media screen and (min-width: 30em) { + .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 60em) { + .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +/* + + CODE + +*/ + +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.top-0 { top: 0; } + +.right-0 { right: 0; } + +.bottom-0 { bottom: 0; } + +.left-0 { left: 0; } + +.top-1 { top: 1rem; } + +.right-1 { right: 1rem; } + +.bottom-1 { bottom: 1rem; } + +.left-1 { left: 1rem; } + +.top-2 { top: 2rem; } + +.right-2 { right: 2rem; } + +.bottom-2 { bottom: 2rem; } + +.left-2 { left: 2rem; } + +.top--1 { top: -1rem; } + +.right--1 { right: -1rem; } + +.bottom--1 { bottom: -1rem; } + +.left--1 { left: -1rem; } + +.top--2 { top: -2rem; } + +.right--2 { right: -2rem; } + +.bottom--2 { bottom: -2rem; } + +.left--2 { left: -2rem; } + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media screen and (min-width: 30em) { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 60em) { + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ + +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { content: " "; display: table; } + +.cf:after { clear: both; } + +.cf { *zoom: 1; } + +.cl { clear: left; } + +.cr { clear: right; } + +.cb { clear: both; } + +.cn { clear: none; } + +@media screen and (min-width: 30em) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media screen and (min-width: 60em) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} + +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.dn { display: none; } + +.di { display: inline; } + +.db { display: block; } + +.dib { display: inline-block; } + +.dit { display: inline-table; } + +.dt { display: table; } + +.dtc { display: table-cell; } + +.dt-row { display: table-row; } + +.dt-row-group { display: table-row-group; } + +.dt-column { display: table-column; } + +.dt-column-group { display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ + +.dt--fixed { + table-layout: fixed; + width: 100%; +} + +@media screen and (min-width: 30em) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 60em) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} + +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } + +.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ + +.flex-auto { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + +.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + +.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + +.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } + +.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + +.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + +.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + +.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + +.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + +.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + +.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + +.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + +.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + +.self-start { -ms-flex-item-align: start; align-self: flex-start; } + +.self-end { -ms-flex-item-align: end; align-self: flex-end; } + +.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + +.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } + +.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + +.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + +.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + +.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + +.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + +.justify-around { -ms-flex-pack: distribute; justify-content: space-around; } + +.content-start { -ms-flex-line-pack: start; align-content: flex-start; } + +.content-end { -ms-flex-line-pack: end; align-content: flex-end; } + +.content-center { -ms-flex-line-pack: center; align-content: center; } + +.content-between { -ms-flex-line-pack: justify; align-content: space-between; } + +.content-around { -ms-flex-line-pack: distribute; align-content: space-around; } + +.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } + +.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + +.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + +.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + +.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + +.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + +.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + +.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + +.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + +.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + +.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + +.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + +.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + +.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } + +.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } + +@media screen and (min-width: 30em) { + .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-ns { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-ns { -ms-flex-line-pack: center; align-content: center; } + .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-m { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-m { -ms-flex-line-pack: center; align-content: center; } + .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 60em) { + .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-l { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + + .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-l { -ms-flex-line-pack: center; align-content: center; } + .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; } +} + +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.fl { float: left; _display: inline; } + +.fr { float: right; _display: inline; } + +.fn { float: none; } + +@media screen and (min-width: 30em) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} + +@media screen and (min-width: 60em) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} + +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + +*/ + +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, + 'avenir next', avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} + +.serif { + font-family: georgia, + times, + serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ + +code, .code { + font-family: Consolas, + monaco, + monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + +/* Sans-Serif Typefaces */ + +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} + +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} + +/* Serif Typefaces */ + +.athelas { + font-family: athelas, + georgia, + serif; +} + +.georgia { + font-family: georgia, + serif; +} + +.times { + font-family: times, + serif; +} + +.bodoni { + font-family: "Bodoni MT", + serif; +} + +.calisto { + font-family: "Calisto MT", + serif; +} + +.garamond { + font-family: garamond, + serif; +} + +.baskerville { + font-family: baskerville, + serif; +} + +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.i { font-style: italic; } + +.fs-normal { font-style: normal; } + +@media screen and (min-width: 30em) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media screen and (min-width: 60em) { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} + +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.normal { font-weight: normal; } + +.b { font-weight: bold; } + +.fw1 { font-weight: 100; } + +.fw2 { font-weight: 200; } + +.fw3 { font-weight: 300; } + +.fw4 { font-weight: 400; } + +.fw5 { font-weight: 500; } + +.fw6 { font-weight: 600; } + +.fw7 { font-weight: 700; } + +.fw8 { font-weight: 800; } + +.fw9 { font-weight: 900; } + +@media screen and (min-width: 30em) { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } +} + +@media screen and (min-width: 60em) { + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } +} + +/* + + FORMS + +*/ + +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Height Scale */ + +.h1 { height: 1rem; } + +.h2 { height: 2rem; } + +.h3 { height: 4rem; } + +.h4 { height: 8rem; } + +.h5 { height: 16rem; } + +/* Height Percentages - Based off of height of parent */ + +.h-25 { height: 25%; } + +.h-50 { height: 50%; } + +.h-75 { height: 75%; } + +.h-100 { height: 100%; } + +.min-h-100 { min-height: 100%; } + +/* Screen Height Percentage */ + +.vh-25 { height: 25vh; } + +.vh-50 { height: 50vh; } + +.vh-75 { height: 75vh; } + +.vh-100 { height: 100vh; } + +.min-vh-100 { min-height: 100vh; } + +/* String Properties */ + +.h-auto { height: auto; } + +.h-inherit { height: inherit; } + +@media screen and (min-width: 30em) { + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .h1-m { height: 1rem; } + .h2-m { height: 2rem; } + .h3-m { height: 4rem; } + .h4-m { height: 8rem; } + .h5-m { height: 16rem; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} + +@media screen and (min-width: 60em) { + .h1-l { height: 1rem; } + .h2-l { height: 2rem; } + .h3-l { height: 4rem; } + .h4-l { height: 8rem; } + .h5-l { height: 16rem; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} + +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tracked { letter-spacing: .1em; } + +.tracked-tight { letter-spacing: -.05em; } + +.tracked-mega { letter-spacing: .25em; } + +@media screen and (min-width: 30em) { + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } +} + +@media screen and (min-width: 60em) { + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } +} + +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.lh-solid { line-height: 1; } + +.lh-title { line-height: 1.25; } + +.lh-copy { line-height: 1.5; } + +@media screen and (min-width: 30em) { + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } +} + +@media screen and (min-width: 60em) { + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } +} + +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ + +.link { + text-decoration: none; + transition: color .15s ease-in; +} + +.link:link, +.link:visited { + transition: color .15s ease-in; +} + +.link:hover { + transition: color .15s ease-in; +} + +.link:active { + transition: color .15s ease-in; +} + +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} + +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + +*/ + +.list { list-style-type: none; } + +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Max Width Percentages */ + +.mw-100 { max-width: 100%; } + +/* Max Width Scale */ + +.mw1 { max-width: 1rem; } + +.mw2 { max-width: 2rem; } + +.mw3 { max-width: 4rem; } + +.mw4 { max-width: 8rem; } + +.mw5 { max-width: 16rem; } + +.mw6 { max-width: 32rem; } + +.mw7 { max-width: 48rem; } + +.mw8 { max-width: 64rem; } + +.mw9 { max-width: 96rem; } + +/* Max Width String Properties */ + +.mw-none { max-width: none; } + +@media screen and (min-width: 30em) { + .mw-100-ns { max-width: 100%; } + + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } + + .mw-none-ns { max-width: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .mw-100-m { max-width: 100%; } + + .mw1-m { max-width: 1rem; } + .mw2-m { max-width: 2rem; } + .mw3-m { max-width: 4rem; } + .mw4-m { max-width: 8rem; } + .mw5-m { max-width: 16rem; } + .mw6-m { max-width: 32rem; } + .mw7-m { max-width: 48rem; } + .mw8-m { max-width: 64rem; } + .mw9-m { max-width: 96rem; } + + .mw-none-m { max-width: none; } +} + +@media screen and (min-width: 60em) { + .mw-100-l { max-width: 100%; } + + .mw1-l { max-width: 1rem; } + .mw2-l { max-width: 2rem; } + .mw3-l { max-width: 4rem; } + .mw4-l { max-width: 8rem; } + .mw5-l { max-width: 16rem; } + .mw6-l { max-width: 32rem; } + .mw7-l { max-width: 48rem; } + .mw8-l { max-width: 64rem; } + .mw9-l { max-width: 96rem; } + + .mw-none-l { max-width: none; } +} + +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Width Scale */ + +.w1 { width: 1rem; } + +.w2 { width: 2rem; } + +.w3 { width: 4rem; } + +.w4 { width: 8rem; } + +.w5 { width: 16rem; } + +.w-10 { width: 10%; } + +.w-20 { width: 20%; } + +.w-25 { width: 25%; } + +.w-30 { width: 30%; } + +.w-33 { width: 33%; } + +.w-34 { width: 34%; } + +.w-40 { width: 40%; } + +.w-50 { width: 50%; } + +.w-60 { width: 60%; } + +.w-70 { width: 70%; } + +.w-75 { width: 75%; } + +.w-80 { width: 80%; } + +.w-90 { width: 90%; } + +.w-100 { width: 100%; } + +.w-third { width: 33.33333%; } + +.w-two-thirds { width: 66.66667%; } + +.w-auto { width: auto; } + +@media screen and (min-width: 30em) { + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: 33.33333%; } + .w-two-thirds-ns { width: 66.66667%; } + .w-auto-ns { width: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: 33.33333%; } + .w-two-thirds-m { width: 66.66667%; } + .w-auto-m { width: auto; } +} + +@media screen and (min-width: 60em) { + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: 33.33333%; } + .w-two-thirds-l { width: 66.66667%; } + .w-auto-l { width: auto; } +} + +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.overflow-visible { overflow: visible; } + +.overflow-hidden { overflow: hidden; } + +.overflow-scroll { overflow: scroll; } + +.overflow-auto { overflow: auto; } + +.overflow-x-visible { overflow-x: visible; } + +.overflow-x-hidden { overflow-x: hidden; } + +.overflow-x-scroll { overflow-x: scroll; } + +.overflow-x-auto { overflow-x: auto; } + +.overflow-y-visible { overflow-y: visible; } + +.overflow-y-hidden { overflow-y: hidden; } + +.overflow-y-scroll { overflow-y: scroll; } + +.overflow-y-auto { overflow-y: auto; } + +@media screen and (min-width: 30em) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} + +@media screen and (min-width: 60em) { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } +} + +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.static { position: static; } + +.relative { position: relative; } + +.absolute { position: absolute; } + +.fixed { position: fixed; } + +@media screen and (min-width: 30em) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } +} + +@media screen and (min-width: 60em) { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } +} + +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ + +.o-100 { opacity: 1; } + +.o-90 { opacity: .9; } + +.o-80 { opacity: .8; } + +.o-70 { opacity: .7; } + +.o-60 { opacity: .6; } + +.o-50 { opacity: .5; } + +.o-40 { opacity: .4; } + +.o-30 { opacity: .3; } + +.o-20 { opacity: .2; } + +.o-10 { opacity: .1; } + +.o-05 { opacity: .05; } + +.o-025 { opacity: .025; } + +.o-0 { opacity: 0; } + +/* + + ROTATIONS + +*/ + +.rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + +.rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + +.rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + +.rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + +.rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + +.rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + +.rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } + +@media screen and (min-width: 30em){ + .rotate-45-ns { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-ns { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-ns { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-ns { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-ns { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-ns { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-ns { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .rotate-45-m { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-m { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-m { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-m { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-m { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-m { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-m { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 60em){ + .rotate-45-l { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-l { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-l { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-l { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-l { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-l { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-l { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + +*/ + +/* Text colors */ + +.black-90 { color: rgba(0, 0, 0, .9); } + +.black-80 { color: rgba(0, 0, 0, .8); } + +.black-70 { color: rgba(0, 0, 0, .7); } + +.black-60 { color: rgba(0, 0, 0, .6); } + +.black-50 { color: rgba(0, 0, 0, .5); } + +.black-40 { color: rgba(0, 0, 0, .4); } + +.black-30 { color: rgba(0, 0, 0, .3); } + +.black-20 { color: rgba(0, 0, 0, .2); } + +.black-10 { color: rgba(0, 0, 0, .1); } + +.black-05 { color: rgba(0, 0, 0, .05); } + +.white-90 { color: rgba(255, 255, 255, .9); } + +.white-80 { color: rgba(255, 255, 255, .8); } + +.white-70 { color: rgba(255, 255, 255, .7); } + +.white-60 { color: rgba(255, 255, 255, .6); } + +.white-50 { color: rgba(255, 255, 255, .5); } + +.white-40 { color: rgba(255, 255, 255, .4); } + +.white-30 { color: rgba(255, 255, 255, .3); } + +.white-20 { color: rgba(255, 255, 255, .2); } + +.white-10 { color: rgba(255, 255, 255, .1); } + +.black { color: #000; } + +.near-black { color: #111; } + +.dark-gray { color: #333; } + +.mid-gray { color: #555; } + +.gray { color: #777; } + +.silver { color: #999; } + +.light-silver { color: #aaa; } + +.moon-gray { color: #ccc; } + +.light-gray { color: #eee; } + +.near-white { color: #f4f4f4; } + +.white { color: #fff; } + +.dark-red { color: #e7040f; } + +.red { color: #ff4136; } + +.light-red { color: #ff725c; } + +.orange { color: #ff6300; } + +.gold { color: #ffb700; } + +.yellow { color: #ffd700; } + +.light-yellow { color: #fbf1a9; } + +.purple { color: #5e2ca5; } + +.light-purple { color: #a463f2; } + +.dark-pink { color: #d5008f; } + +.hot-pink { color: #ff41b4; } + +.pink { color: #ff80cc; } + +.light-pink { color: #ffa3d7; } + +.dark-green { color: #137752; } + +.green { color: #19a974; } + +.light-green { color: #9eebcf; } + +.navy { color: #001b44; } + +.dark-blue { color: #00449e; } + +.blue { color: #357edd; } + +.light-blue { color: #96ccff; } + +.lightest-blue { color: #cdecff; } + +.washed-blue { color: #f6fffe; } + +.washed-green { color: #e8fdf5; } + +.washed-yellow { color: #fffceb; } + +.washed-red { color: #ffdfdf; } + +.color-inherit { color: inherit; } + +.bg-black-90 { background-color: rgba(0, 0, 0, .9); } + +.bg-black-80 { background-color: rgba(0, 0, 0, .8); } + +.bg-black-70 { background-color: rgba(0, 0, 0, .7); } + +.bg-black-60 { background-color: rgba(0, 0, 0, .6); } + +.bg-black-50 { background-color: rgba(0, 0, 0, .5); } + +.bg-black-40 { background-color: rgba(0, 0, 0, .4); } + +.bg-black-30 { background-color: rgba(0, 0, 0, .3); } + +.bg-black-20 { background-color: rgba(0, 0, 0, .2); } + +.bg-black-10 { background-color: rgba(0, 0, 0, .1); } + +.bg-black-05 { background-color: rgba(0, 0, 0, .05); } + +.bg-white-90 { background-color: rgba(255, 255, 255, .9); } + +.bg-white-80 { background-color: rgba(255, 255, 255, .8); } + +.bg-white-70 { background-color: rgba(255, 255, 255, .7); } + +.bg-white-60 { background-color: rgba(255, 255, 255, .6); } + +.bg-white-50 { background-color: rgba(255, 255, 255, .5); } + +.bg-white-40 { background-color: rgba(255, 255, 255, .4); } + +.bg-white-30 { background-color: rgba(255, 255, 255, .3); } + +.bg-white-20 { background-color: rgba(255, 255, 255, .2); } + +.bg-white-10 { background-color: rgba(255, 255, 255, .1); } + +/* Background colors */ + +.bg-black { background-color: #000; } + +.bg-near-black { background-color: #111; } + +.bg-dark-gray { background-color: #333; } + +.bg-mid-gray { background-color: #555; } + +.bg-gray { background-color: #777; } + +.bg-silver { background-color: #999; } + +.bg-light-silver { background-color: #aaa; } + +.bg-moon-gray { background-color: #ccc; } + +.bg-light-gray { background-color: #eee; } + +.bg-near-white { background-color: #f4f4f4; } + +.bg-white { background-color: #fff; } + +.bg-transparent { background-color: transparent; } + +.bg-dark-red { background-color: #e7040f; } + +.bg-red { background-color: #ff4136; } + +.bg-light-red { background-color: #ff725c; } + +.bg-orange { background-color: #ff6300; } + +.bg-gold { background-color: #ffb700; } + +.bg-yellow { background-color: #ffd700; } + +.bg-light-yellow { background-color: #fbf1a9; } + +.bg-purple { background-color: #5e2ca5; } + +.bg-light-purple { background-color: #a463f2; } + +.bg-dark-pink { background-color: #d5008f; } + +.bg-hot-pink { background-color: #ff41b4; } + +.bg-pink { background-color: #ff80cc; } + +.bg-light-pink { background-color: #ffa3d7; } + +.bg-dark-green { background-color: #137752; } + +.bg-green { background-color: #19a974; } + +.bg-light-green { background-color: #9eebcf; } + +.bg-navy { background-color: #001b44; } + +.bg-dark-blue { background-color: #00449e; } + +.bg-blue { background-color: #357edd; } + +.bg-light-blue { background-color: #96ccff; } + +.bg-lightest-blue { background-color: #cdecff; } + +.bg-washed-blue { background-color: #f6fffe; } + +.bg-washed-green { background-color: #e8fdf5; } + +.bg-washed-yellow { background-color: #fffceb; } + +.bg-washed-red { background-color: #ffdfdf; } + +.bg-inherit { background-color: inherit; } + +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ + +.hover-black:hover, +.hover-black:focus { color: #000; } + +.hover-near-black:hover, +.hover-near-black:focus { color: #111; } + +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: #333; } + +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: #555; } + +.hover-gray:hover, +.hover-gray:focus { color: #777; } + +.hover-silver:hover, +.hover-silver:focus { color: #999; } + +.hover-light-silver:hover, +.hover-light-silver:focus { color: #aaa; } + +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: #ccc; } + +.hover-light-gray:hover, +.hover-light-gray:focus { color: #eee; } + +.hover-near-white:hover, +.hover-near-white:focus { color: #f4f4f4; } + +.hover-white:hover, +.hover-white:focus { color: #fff; } + +.hover-black-90:hover, +.hover-black-90:focus { color: rgba(0, 0, 0, .9); } + +.hover-black-80:hover, +.hover-black-80:focus { color: rgba(0, 0, 0, .8); } + +.hover-black-70:hover, +.hover-black-70:focus { color: rgba(0, 0, 0, .7); } + +.hover-black-60:hover, +.hover-black-60:focus { color: rgba(0, 0, 0, .6); } + +.hover-black-50:hover, +.hover-black-50:focus { color: rgba(0, 0, 0, .5); } + +.hover-black-40:hover, +.hover-black-40:focus { color: rgba(0, 0, 0, .4); } + +.hover-black-30:hover, +.hover-black-30:focus { color: rgba(0, 0, 0, .3); } + +.hover-black-20:hover, +.hover-black-20:focus { color: rgba(0, 0, 0, .2); } + +.hover-black-10:hover, +.hover-black-10:focus { color: rgba(0, 0, 0, .1); } + +.hover-white-90:hover, +.hover-white-90:focus { color: rgba(255, 255, 255, .9); } + +.hover-white-80:hover, +.hover-white-80:focus { color: rgba(255, 255, 255, .8); } + +.hover-white-70:hover, +.hover-white-70:focus { color: rgba(255, 255, 255, .7); } + +.hover-white-60:hover, +.hover-white-60:focus { color: rgba(255, 255, 255, .6); } + +.hover-white-50:hover, +.hover-white-50:focus { color: rgba(255, 255, 255, .5); } + +.hover-white-40:hover, +.hover-white-40:focus { color: rgba(255, 255, 255, .4); } + +.hover-white-30:hover, +.hover-white-30:focus { color: rgba(255, 255, 255, .3); } + +.hover-white-20:hover, +.hover-white-20:focus { color: rgba(255, 255, 255, .2); } + +.hover-white-10:hover, +.hover-white-10:focus { color: rgba(255, 255, 255, .1); } + +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } + +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: #000; } + +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: #111; } + +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: #333; } + +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: #555; } + +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: #777; } + +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: #999; } + +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: #aaa; } + +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: #ccc; } + +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: #eee; } + +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: #f4f4f4; } + +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: #fff; } + +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: transparent; } + +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); } + +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); } + +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); } + +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); } + +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); } + +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); } + +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); } + +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); } + +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); } + +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); } + +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); } + +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); } + +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); } + +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); } + +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); } + +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); } + +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); } + +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); } + +.hover-dark-red:hover, +.hover-dark-red:focus { color: #e7040f; } + +.hover-red:hover, +.hover-red:focus { color: #ff4136; } + +.hover-light-red:hover, +.hover-light-red:focus { color: #ff725c; } + +.hover-orange:hover, +.hover-orange:focus { color: #ff6300; } + +.hover-gold:hover, +.hover-gold:focus { color: #ffb700; } + +.hover-yellow:hover, +.hover-yellow:focus { color: #ffd700; } + +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: #fbf1a9; } + +.hover-purple:hover, +.hover-purple:focus { color: #5e2ca5; } + +.hover-light-purple:hover, +.hover-light-purple:focus { color: #a463f2; } + +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: #d5008f; } + +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: #ff41b4; } + +.hover-pink:hover, +.hover-pink:focus { color: #ff80cc; } + +.hover-light-pink:hover, +.hover-light-pink:focus { color: #ffa3d7; } + +.hover-dark-green:hover, +.hover-dark-green:focus { color: #137752; } + +.hover-green:hover, +.hover-green:focus { color: #19a974; } + +.hover-light-green:hover, +.hover-light-green:focus { color: #9eebcf; } + +.hover-navy:hover, +.hover-navy:focus { color: #001b44; } + +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: #00449e; } + +.hover-blue:hover, +.hover-blue:focus { color: #357edd; } + +.hover-light-blue:hover, +.hover-light-blue:focus { color: #96ccff; } + +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: #cdecff; } + +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: #f6fffe; } + +.hover-washed-green:hover, +.hover-washed-green:focus { color: #e8fdf5; } + +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: #fffceb; } + +.hover-washed-red:hover, +.hover-washed-red:focus { color: #ffdfdf; } + +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: #e7040f; } + +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: #ff4136; } + +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: #ff725c; } + +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: #ff6300; } + +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: #ffb700; } + +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: #ffd700; } + +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: #fbf1a9; } + +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: #5e2ca5; } + +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: #a463f2; } + +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: #d5008f; } + +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: #ff41b4; } + +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: #ff80cc; } + +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: #ffa3d7; } + +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: #137752; } + +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: #19a974; } + +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: #9eebcf; } + +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: #001b44; } + +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: #00449e; } + +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: #357edd; } + +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: #96ccff; } + +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: #cdecff; } + +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: #f6fffe; } + +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: #e8fdf5; } + +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: #fffceb; } + +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: #ffdfdf; } + +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { background-color: inherit; } + +/* Variables */ + +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.pa0 { padding: 0; } + +.pa1 { padding: .25rem; } + +.pa2 { padding: .5rem; } + +.pa3 { padding: 1rem; } + +.pa4 { padding: 2rem; } + +.pa5 { padding: 4rem; } + +.pa6 { padding: 8rem; } + +.pa7 { padding: 16rem; } + +.pl0 { padding-left: 0; } + +.pl1 { padding-left: .25rem; } + +.pl2 { padding-left: .5rem; } + +.pl3 { padding-left: 1rem; } + +.pl4 { padding-left: 2rem; } + +.pl5 { padding-left: 4rem; } + +.pl6 { padding-left: 8rem; } + +.pl7 { padding-left: 16rem; } + +.pr0 { padding-right: 0; } + +.pr1 { padding-right: .25rem; } + +.pr2 { padding-right: .5rem; } + +.pr3 { padding-right: 1rem; } + +.pr4 { padding-right: 2rem; } + +.pr5 { padding-right: 4rem; } + +.pr6 { padding-right: 8rem; } + +.pr7 { padding-right: 16rem; } + +.pb0 { padding-bottom: 0; } + +.pb1 { padding-bottom: .25rem; } + +.pb2 { padding-bottom: .5rem; } + +.pb3 { padding-bottom: 1rem; } + +.pb4 { padding-bottom: 2rem; } + +.pb5 { padding-bottom: 4rem; } + +.pb6 { padding-bottom: 8rem; } + +.pb7 { padding-bottom: 16rem; } + +.pt0 { padding-top: 0; } + +.pt1 { padding-top: .25rem; } + +.pt2 { padding-top: .5rem; } + +.pt3 { padding-top: 1rem; } + +.pt4 { padding-top: 2rem; } + +.pt5 { padding-top: 4rem; } + +.pt6 { padding-top: 8rem; } + +.pt7 { padding-top: 16rem; } + +.pv0 { + padding-top: 0; + padding-bottom: 0; +} + +.pv1 { + padding-top: .25rem; + padding-bottom: .25rem; +} + +.pv2 { + padding-top: .5rem; + padding-bottom: .5rem; +} + +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.pv4 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pv5 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.pv6 { + padding-top: 8rem; + padding-bottom: 8rem; +} + +.pv7 { + padding-top: 16rem; + padding-bottom: 16rem; +} + +.ph0 { + padding-left: 0; + padding-right: 0; +} + +.ph1 { + padding-left: .25rem; + padding-right: .25rem; +} + +.ph2 { + padding-left: .5rem; + padding-right: .5rem; +} + +.ph3 { + padding-left: 1rem; + padding-right: 1rem; +} + +.ph4 { + padding-left: 2rem; + padding-right: 2rem; +} + +.ph5 { + padding-left: 4rem; + padding-right: 4rem; +} + +.ph6 { + padding-left: 8rem; + padding-right: 8rem; +} + +.ph7 { + padding-left: 16rem; + padding-right: 16rem; +} + +.ma0 { margin: 0; } + +.ma1 { margin: .25rem; } + +.ma2 { margin: .5rem; } + +.ma3 { margin: 1rem; } + +.ma4 { margin: 2rem; } + +.ma5 { margin: 4rem; } + +.ma6 { margin: 8rem; } + +.ma7 { margin: 16rem; } + +.ml0 { margin-left: 0; } + +.ml1 { margin-left: .25rem; } + +.ml2 { margin-left: .5rem; } + +.ml3 { margin-left: 1rem; } + +.ml4 { margin-left: 2rem; } + +.ml5 { margin-left: 4rem; } + +.ml6 { margin-left: 8rem; } + +.ml7 { margin-left: 16rem; } + +.mr0 { margin-right: 0; } + +.mr1 { margin-right: .25rem; } + +.mr2 { margin-right: .5rem; } + +.mr3 { margin-right: 1rem; } + +.mr4 { margin-right: 2rem; } + +.mr5 { margin-right: 4rem; } + +.mr6 { margin-right: 8rem; } + +.mr7 { margin-right: 16rem; } + +.mb0 { margin-bottom: 0; } + +.mb1 { margin-bottom: .25rem; } + +.mb2 { margin-bottom: .5rem; } + +.mb3 { margin-bottom: 1rem; } + +.mb4 { margin-bottom: 2rem; } + +.mb5 { margin-bottom: 4rem; } + +.mb6 { margin-bottom: 8rem; } + +.mb7 { margin-bottom: 16rem; } + +.mt0 { margin-top: 0; } + +.mt1 { margin-top: .25rem; } + +.mt2 { margin-top: .5rem; } + +.mt3 { margin-top: 1rem; } + +.mt4 { margin-top: 2rem; } + +.mt5 { margin-top: 4rem; } + +.mt6 { margin-top: 8rem; } + +.mt7 { margin-top: 16rem; } + +.mv0 { + margin-top: 0; + margin-bottom: 0; +} + +.mv1 { + margin-top: .25rem; + margin-bottom: .25rem; +} + +.mv2 { + margin-top: .5rem; + margin-bottom: .5rem; +} + +.mv3 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mv4 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.mv5 { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.mv6 { + margin-top: 8rem; + margin-bottom: 8rem; +} + +.mv7 { + margin-top: 16rem; + margin-bottom: 16rem; +} + +.mh0 { + margin-left: 0; + margin-right: 0; +} + +.mh1 { + margin-left: .25rem; + margin-right: .25rem; +} + +.mh2 { + margin-left: .5rem; + margin-right: .5rem; +} + +.mh3 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mh4 { + margin-left: 2rem; + margin-right: 2rem; +} + +.mh5 { + margin-left: 4rem; + margin-right: 4rem; +} + +.mh6 { + margin-left: 8rem; + margin-right: 8rem; +} + +.mh7 { + margin-left: 16rem; + margin-right: 16rem; +} + +@media screen and (min-width: 30em) { + .pa0-ns { padding: 0; } + .pa1-ns { padding: .25rem; } + .pa2-ns { padding: .5rem; } + .pa3-ns { padding: 1rem; } + .pa4-ns { padding: 2rem; } + .pa5-ns { padding: 4rem; } + .pa6-ns { padding: 8rem; } + .pa7-ns { padding: 16rem; } + + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: .25rem; } + .pl2-ns { padding-left: .5rem; } + .pl3-ns { padding-left: 1rem; } + .pl4-ns { padding-left: 2rem; } + .pl5-ns { padding-left: 4rem; } + .pl6-ns { padding-left: 8rem; } + .pl7-ns { padding-left: 16rem; } + + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: .25rem; } + .pr2-ns { padding-right: .5rem; } + .pr3-ns { padding-right: 1rem; } + .pr4-ns { padding-right: 2rem; } + .pr5-ns { padding-right: 4rem; } + .pr6-ns { padding-right: 8rem; } + .pr7-ns { padding-right: 16rem; } + + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: .25rem; } + .pb2-ns { padding-bottom: .5rem; } + .pb3-ns { padding-bottom: 1rem; } + .pb4-ns { padding-bottom: 2rem; } + .pb5-ns { padding-bottom: 4rem; } + .pb6-ns { padding-bottom: 8rem; } + .pb7-ns { padding-bottom: 16rem; } + + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: .25rem; } + .pt2-ns { padding-top: .5rem; } + .pt3-ns { padding-top: 1rem; } + .pt4-ns { padding-top: 2rem; } + .pt5-ns { padding-top: 4rem; } + .pt6-ns { padding-top: 8rem; } + .pt7-ns { padding-top: 16rem; } + + .pv0-ns { + padding-top: 0; + padding-bottom: 0; + } + .pv1-ns { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-ns { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-ns { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-ns { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-ns { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-ns { + padding-top: 16rem; + padding-bottom: 16rem; + } + .ph0-ns { + padding-left: 0; + padding-right: 0; + } + .ph1-ns { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-ns { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-ns { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-ns { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-ns { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-ns { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-ns { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-ns { margin: 0; } + .ma1-ns { margin: .25rem; } + .ma2-ns { margin: .5rem; } + .ma3-ns { margin: 1rem; } + .ma4-ns { margin: 2rem; } + .ma5-ns { margin: 4rem; } + .ma6-ns { margin: 8rem; } + .ma7-ns { margin: 16rem; } + + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: .25rem; } + .ml2-ns { margin-left: .5rem; } + .ml3-ns { margin-left: 1rem; } + .ml4-ns { margin-left: 2rem; } + .ml5-ns { margin-left: 4rem; } + .ml6-ns { margin-left: 8rem; } + .ml7-ns { margin-left: 16rem; } + + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: .25rem; } + .mr2-ns { margin-right: .5rem; } + .mr3-ns { margin-right: 1rem; } + .mr4-ns { margin-right: 2rem; } + .mr5-ns { margin-right: 4rem; } + .mr6-ns { margin-right: 8rem; } + .mr7-ns { margin-right: 16rem; } + + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: .25rem; } + .mb2-ns { margin-bottom: .5rem; } + .mb3-ns { margin-bottom: 1rem; } + .mb4-ns { margin-bottom: 2rem; } + .mb5-ns { margin-bottom: 4rem; } + .mb6-ns { margin-bottom: 8rem; } + .mb7-ns { margin-bottom: 16rem; } + + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: .25rem; } + .mt2-ns { margin-top: .5rem; } + .mt3-ns { margin-top: 1rem; } + .mt4-ns { margin-top: 2rem; } + .mt5-ns { margin-top: 4rem; } + .mt6-ns { margin-top: 8rem; } + .mt7-ns { margin-top: 16rem; } + + .mv0-ns { + margin-top: 0; + margin-bottom: 0; + } + .mv1-ns { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-ns { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-ns { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-ns { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-ns { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-ns { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-ns { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-ns { + margin-left: 0; + margin-right: 0; + } + .mh1-ns { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-ns { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-ns { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-ns { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-ns { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-ns { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-ns { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .pa0-m { padding: 0; } + .pa1-m { padding: .25rem; } + .pa2-m { padding: .5rem; } + .pa3-m { padding: 1rem; } + .pa4-m { padding: 2rem; } + .pa5-m { padding: 4rem; } + .pa6-m { padding: 8rem; } + .pa7-m { padding: 16rem; } + + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: .25rem; } + .pl2-m { padding-left: .5rem; } + .pl3-m { padding-left: 1rem; } + .pl4-m { padding-left: 2rem; } + .pl5-m { padding-left: 4rem; } + .pl6-m { padding-left: 8rem; } + .pl7-m { padding-left: 16rem; } + + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: .25rem; } + .pr2-m { padding-right: .5rem; } + .pr3-m { padding-right: 1rem; } + .pr4-m { padding-right: 2rem; } + .pr5-m { padding-right: 4rem; } + .pr6-m { padding-right: 8rem; } + .pr7-m { padding-right: 16rem; } + + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: .25rem; } + .pb2-m { padding-bottom: .5rem; } + .pb3-m { padding-bottom: 1rem; } + .pb4-m { padding-bottom: 2rem; } + .pb5-m { padding-bottom: 4rem; } + .pb6-m { padding-bottom: 8rem; } + .pb7-m { padding-bottom: 16rem; } + + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: .25rem; } + .pt2-m { padding-top: .5rem; } + .pt3-m { padding-top: 1rem; } + .pt4-m { padding-top: 2rem; } + .pt5-m { padding-top: 4rem; } + .pt6-m { padding-top: 8rem; } + .pt7-m { padding-top: 16rem; } + + .pv0-m { + padding-top: 0; + padding-bottom: 0; + } + .pv1-m { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-m { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-m { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-m { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-m { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-m { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-m { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-m { + padding-left: 0; + padding-right: 0; + } + .ph1-m { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-m { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-m { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-m { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-m { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-m { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-m { margin: 0; } + .ma1-m { margin: .25rem; } + .ma2-m { margin: .5rem; } + .ma3-m { margin: 1rem; } + .ma4-m { margin: 2rem; } + .ma5-m { margin: 4rem; } + .ma6-m { margin: 8rem; } + .ma7-m { margin: 16rem; } + + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: .25rem; } + .ml2-m { margin-left: .5rem; } + .ml3-m { margin-left: 1rem; } + .ml4-m { margin-left: 2rem; } + .ml5-m { margin-left: 4rem; } + .ml6-m { margin-left: 8rem; } + .ml7-m { margin-left: 16rem; } + + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: .25rem; } + .mr2-m { margin-right: .5rem; } + .mr3-m { margin-right: 1rem; } + .mr4-m { margin-right: 2rem; } + .mr5-m { margin-right: 4rem; } + .mr6-m { margin-right: 8rem; } + .mr7-m { margin-right: 16rem; } + + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: .25rem; } + .mb2-m { margin-bottom: .5rem; } + .mb3-m { margin-bottom: 1rem; } + .mb4-m { margin-bottom: 2rem; } + .mb5-m { margin-bottom: 4rem; } + .mb6-m { margin-bottom: 8rem; } + .mb7-m { margin-bottom: 16rem; } + + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: .25rem; } + .mt2-m { margin-top: .5rem; } + .mt3-m { margin-top: 1rem; } + .mt4-m { margin-top: 2rem; } + .mt5-m { margin-top: 4rem; } + .mt6-m { margin-top: 8rem; } + .mt7-m { margin-top: 16rem; } + + .mv0-m { + margin-top: 0; + margin-bottom: 0; + } + .mv1-m { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-m { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-m { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-m { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-m { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-m { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-m { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-m { + margin-left: 0; + margin-right: 0; + } + .mh1-m { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-m { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-m { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-m { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-m { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-m { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-m { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 60em) { + .pa0-l { padding: 0; } + .pa1-l { padding: .25rem; } + .pa2-l { padding: .5rem; } + .pa3-l { padding: 1rem; } + .pa4-l { padding: 2rem; } + .pa5-l { padding: 4rem; } + .pa6-l { padding: 8rem; } + .pa7-l { padding: 16rem; } + + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: .25rem; } + .pl2-l { padding-left: .5rem; } + .pl3-l { padding-left: 1rem; } + .pl4-l { padding-left: 2rem; } + .pl5-l { padding-left: 4rem; } + .pl6-l { padding-left: 8rem; } + .pl7-l { padding-left: 16rem; } + + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: .25rem; } + .pr2-l { padding-right: .5rem; } + .pr3-l { padding-right: 1rem; } + .pr4-l { padding-right: 2rem; } + .pr5-l { padding-right: 4rem; } + .pr6-l { padding-right: 8rem; } + .pr7-l { padding-right: 16rem; } + + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: .25rem; } + .pb2-l { padding-bottom: .5rem; } + .pb3-l { padding-bottom: 1rem; } + .pb4-l { padding-bottom: 2rem; } + .pb5-l { padding-bottom: 4rem; } + .pb6-l { padding-bottom: 8rem; } + .pb7-l { padding-bottom: 16rem; } + + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: .25rem; } + .pt2-l { padding-top: .5rem; } + .pt3-l { padding-top: 1rem; } + .pt4-l { padding-top: 2rem; } + .pt5-l { padding-top: 4rem; } + .pt6-l { padding-top: 8rem; } + .pt7-l { padding-top: 16rem; } + + .pv0-l { + padding-top: 0; + padding-bottom: 0; + } + .pv1-l { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-l { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-l { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-l { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-l { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-l { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-l { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-l { + padding-left: 0; + padding-right: 0; + } + .ph1-l { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-l { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-l { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-l { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-l { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-l { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-l { margin: 0; } + .ma1-l { margin: .25rem; } + .ma2-l { margin: .5rem; } + .ma3-l { margin: 1rem; } + .ma4-l { margin: 2rem; } + .ma5-l { margin: 4rem; } + .ma6-l { margin: 8rem; } + .ma7-l { margin: 16rem; } + + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: .25rem; } + .ml2-l { margin-left: .5rem; } + .ml3-l { margin-left: 1rem; } + .ml4-l { margin-left: 2rem; } + .ml5-l { margin-left: 4rem; } + .ml6-l { margin-left: 8rem; } + .ml7-l { margin-left: 16rem; } + + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: .25rem; } + .mr2-l { margin-right: .5rem; } + .mr3-l { margin-right: 1rem; } + .mr4-l { margin-right: 2rem; } + .mr5-l { margin-right: 4rem; } + .mr6-l { margin-right: 8rem; } + .mr7-l { margin-right: 16rem; } + + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: .25rem; } + .mb2-l { margin-bottom: .5rem; } + .mb3-l { margin-bottom: 1rem; } + .mb4-l { margin-bottom: 2rem; } + .mb5-l { margin-bottom: 4rem; } + .mb6-l { margin-bottom: 8rem; } + .mb7-l { margin-bottom: 16rem; } + + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: .25rem; } + .mt2-l { margin-top: .5rem; } + .mt3-l { margin-top: 1rem; } + .mt4-l { margin-top: 2rem; } + .mt5-l { margin-top: 4rem; } + .mt6-l { margin-top: 8rem; } + .mt7-l { margin-top: 16rem; } + + .mv0-l { + margin-top: 0; + margin-bottom: 0; + } + .mv1-l { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-l { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-l { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-l { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-l { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-l { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-l { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-l { + margin-left: 0; + margin-right: 0; + } + .mh1-l { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-l { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-l { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-l { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-l { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-l { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-l { + margin-left: 16rem; + margin-right: 16rem; + } +} + +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.na1 { margin: -0.25rem; } + +.na2 { margin: -0.5rem; } + +.na3 { margin: -1rem; } + +.na4 { margin: -2rem; } + +.na5 { margin: -4rem; } + +.na6 { margin: -8rem; } + +.na7 { margin: -16rem; } + +.nl1 { margin-left: -0.25rem; } + +.nl2 { margin-left: -0.5rem; } + +.nl3 { margin-left: -1rem; } + +.nl4 { margin-left: -2rem; } + +.nl5 { margin-left: -4rem; } + +.nl6 { margin-left: -8rem; } + +.nl7 { margin-left: -16rem; } + +.nr1 { margin-right: -0.25rem; } + +.nr2 { margin-right: -0.5rem; } + +.nr3 { margin-right: -1rem; } + +.nr4 { margin-right: -2rem; } + +.nr5 { margin-right: -4rem; } + +.nr6 { margin-right: -8rem; } + +.nr7 { margin-right: -16rem; } + +.nb1 { margin-bottom: -0.25rem; } + +.nb2 { margin-bottom: -0.5rem; } + +.nb3 { margin-bottom: -1rem; } + +.nb4 { margin-bottom: -2rem; } + +.nb5 { margin-bottom: -4rem; } + +.nb6 { margin-bottom: -8rem; } + +.nb7 { margin-bottom: -16rem; } + +.nt1 { margin-top: -0.25rem; } + +.nt2 { margin-top: -0.5rem; } + +.nt3 { margin-top: -1rem; } + +.nt4 { margin-top: -2rem; } + +.nt5 { margin-top: -4rem; } + +.nt6 { margin-top: -8rem; } + +.nt7 { margin-top: -16rem; } + +@media screen and (min-width: 30em) { + + .na1-ns { margin: -0.25rem; } + .na2-ns { margin: -0.5rem; } + .na3-ns { margin: -1rem; } + .na4-ns { margin: -2rem; } + .na5-ns { margin: -4rem; } + .na6-ns { margin: -8rem; } + .na7-ns { margin: -16rem; } + + .nl1-ns { margin-left: -0.25rem; } + .nl2-ns { margin-left: -0.5rem; } + .nl3-ns { margin-left: -1rem; } + .nl4-ns { margin-left: -2rem; } + .nl5-ns { margin-left: -4rem; } + .nl6-ns { margin-left: -8rem; } + .nl7-ns { margin-left: -16rem; } + + .nr1-ns { margin-right: -0.25rem; } + .nr2-ns { margin-right: -0.5rem; } + .nr3-ns { margin-right: -1rem; } + .nr4-ns { margin-right: -2rem; } + .nr5-ns { margin-right: -4rem; } + .nr6-ns { margin-right: -8rem; } + .nr7-ns { margin-right: -16rem; } + + .nb1-ns { margin-bottom: -0.25rem; } + .nb2-ns { margin-bottom: -0.5rem; } + .nb3-ns { margin-bottom: -1rem; } + .nb4-ns { margin-bottom: -2rem; } + .nb5-ns { margin-bottom: -4rem; } + .nb6-ns { margin-bottom: -8rem; } + .nb7-ns { margin-bottom: -16rem; } + + .nt1-ns { margin-top: -0.25rem; } + .nt2-ns { margin-top: -0.5rem; } + .nt3-ns { margin-top: -1rem; } + .nt4-ns { margin-top: -2rem; } + .nt5-ns { margin-top: -4rem; } + .nt6-ns { margin-top: -8rem; } + .nt7-ns { margin-top: -16rem; } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .na1-m { margin: -0.25rem; } + .na2-m { margin: -0.5rem; } + .na3-m { margin: -1rem; } + .na4-m { margin: -2rem; } + .na5-m { margin: -4rem; } + .na6-m { margin: -8rem; } + .na7-m { margin: -16rem; } + + .nl1-m { margin-left: -0.25rem; } + .nl2-m { margin-left: -0.5rem; } + .nl3-m { margin-left: -1rem; } + .nl4-m { margin-left: -2rem; } + .nl5-m { margin-left: -4rem; } + .nl6-m { margin-left: -8rem; } + .nl7-m { margin-left: -16rem; } + + .nr1-m { margin-right: -0.25rem; } + .nr2-m { margin-right: -0.5rem; } + .nr3-m { margin-right: -1rem; } + .nr4-m { margin-right: -2rem; } + .nr5-m { margin-right: -4rem; } + .nr6-m { margin-right: -8rem; } + .nr7-m { margin-right: -16rem; } + + .nb1-m { margin-bottom: -0.25rem; } + .nb2-m { margin-bottom: -0.5rem; } + .nb3-m { margin-bottom: -1rem; } + .nb4-m { margin-bottom: -2rem; } + .nb5-m { margin-bottom: -4rem; } + .nb6-m { margin-bottom: -8rem; } + .nb7-m { margin-bottom: -16rem; } + + .nt1-m { margin-top: -0.25rem; } + .nt2-m { margin-top: -0.5rem; } + .nt3-m { margin-top: -1rem; } + .nt4-m { margin-top: -2rem; } + .nt5-m { margin-top: -4rem; } + .nt6-m { margin-top: -8rem; } + .nt7-m { margin-top: -16rem; } + +} + +@media screen and (min-width: 60em) { + .na1-l { margin: -0.25rem; } + .na2-l { margin: -0.5rem; } + .na3-l { margin: -1rem; } + .na4-l { margin: -2rem; } + .na5-l { margin: -4rem; } + .na6-l { margin: -8rem; } + .na7-l { margin: -16rem; } + + .nl1-l { margin-left: -0.25rem; } + .nl2-l { margin-left: -0.5rem; } + .nl3-l { margin-left: -1rem; } + .nl4-l { margin-left: -2rem; } + .nl5-l { margin-left: -4rem; } + .nl6-l { margin-left: -8rem; } + .nl7-l { margin-left: -16rem; } + + .nr1-l { margin-right: -0.25rem; } + .nr2-l { margin-right: -0.5rem; } + .nr3-l { margin-right: -1rem; } + .nr4-l { margin-right: -2rem; } + .nr5-l { margin-right: -4rem; } + .nr6-l { margin-right: -8rem; } + .nr7-l { margin-right: -16rem; } + + .nb1-l { margin-bottom: -0.25rem; } + .nb2-l { margin-bottom: -0.5rem; } + .nb3-l { margin-bottom: -1rem; } + .nb4-l { margin-bottom: -2rem; } + .nb5-l { margin-bottom: -4rem; } + .nb6-l { margin-bottom: -8rem; } + .nb7-l { margin-bottom: -16rem; } + + .nt1-l { margin-top: -0.25rem; } + .nt2-l { margin-top: -0.5rem; } + .nt3-l { margin-top: -1rem; } + .nt4-l { margin-top: -2rem; } + .nt5-l { margin-top: -4rem; } + .nt6-l { margin-top: -8rem; } + .nt7-l { margin-top: -16rem; } +} + +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ + +.collapse { + border-collapse: collapse; + border-spacing: 0; +} + +.striped--light-silver:nth-child(odd) { + background-color: #aaa; +} + +.striped--moon-gray:nth-child(odd) { + background-color: #ccc; +} + +.striped--light-gray:nth-child(odd) { + background-color: #eee; +} + +.striped--near-white:nth-child(odd) { + background-color: #f4f4f4; +} + +.stripe-light:nth-child(odd) { + background-color: rgba(255, 255, 255, .1); +} + +.stripe-dark:nth-child(odd) { + background-color: rgba(0, 0, 0, .1); +} + +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.strike { text-decoration: line-through; } + +.underline { text-decoration: underline; } + +.no-underline { text-decoration: none; } + +@media screen and (min-width: 30em) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media screen and (min-width: 60em) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} + +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tl { text-align: left; } + +.tr { text-align: right; } + +.tc { text-align: center; } + +.tj { text-align: justify; } + +@media screen and (min-width: 30em) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} + +@media screen and (min-width: 60em) { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } +} + +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ttc { text-transform: capitalize; } + +.ttl { text-transform: lowercase; } + +.ttu { text-transform: uppercase; } + +.ttn { text-transform: none; } + +@media screen and (min-width: 30em) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} + +@media screen and (min-width: 60em) { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } +} + +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + 7 = 7th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ + +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ + +.f-6, +.f-headline { + font-size: 6rem; +} + +.f-5, +.f-subheadline { + font-size: 5rem; +} + +/* Type Scale */ + +.f1 { font-size: 3rem; } + +.f2 { font-size: 2.25rem; } + +.f3 { font-size: 1.5rem; } + +.f4 { font-size: 1.25rem; } + +.f5 { font-size: 1rem; } + +.f6 { font-size: .875rem; } + +.f7 { font-size: .75rem; } + +/* Small and hard to read for many people so use with extreme caution */ + +@media screen and (min-width: 30em){ + .f-6-ns, + .f-headline-ns { font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .f-6-m, + .f-headline-m { font-size: 6rem; } + .f-5-m, + .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } +} + +@media screen and (min-width: 60em) { + .f-6-l, + .f-headline-l { + font-size: 6rem; + } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; + } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } +} + +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Measure is limited to ~66 characters */ + +.measure { + max-width: 30em; +} + +/* Measure is limited to ~80 characters */ + +.measure-wide { + max-width: 34em; +} + +/* Measure is limited to ~45 characters */ + +.measure-narrow { + max-width: 20em; +} + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ + +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.small-caps { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; +} + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (min-width: 30em) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 60em) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Equivalent to .overflow-y-scroll */ + +.overflow-container { + overflow-y: scroll; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +.mr-auto { margin-right: auto; } + +.ml-auto { margin-left: auto; } + +@media screen and (min-width: 30em){ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} + +@media screen and (min-width: 60em){ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} + +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ + +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} + +@media screen and (min-width: 30em) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 60em) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ws-normal { white-space: normal; } + +.nowrap { white-space: nowrap; } + +.pre { white-space: pre; } + +@media screen and (min-width: 30em) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} + +@media screen and (min-width: 60em) { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} + +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.v-base { vertical-align: baseline; } + +.v-mid { vertical-align: middle; } + +.v-top { vertical-align: top; } + +.v-btm { vertical-align: bottom; } + +@media screen and (min-width: 30em) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} + +@media screen and (min-width: 60em) { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} + +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + +*/ + +/* + + Dim element on hover by adding the dim class. + +*/ + +.dim { + opacity: 1; + transition: opacity .15s ease-in; +} + +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity .15s ease-in; +} + +.dim:active { + opacity: .8; transition: opacity .15s ease-out; +} + +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ + +.glow { + transition: opacity .15s ease-in; +} + +.glow:hover, +.glow:focus { + opacity: 1; + transition: opacity .15s ease-in; +} + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ + +.hide-child .child { + opacity: 0; + transition: opacity .15s ease-in; +} + +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: opacity .15s ease-in; +} + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ + +.grow { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; +} + +.grow:hover, +.grow:focus { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +.grow:active { + -webkit-transform: scale(.90); + transform: scale(.90); +} + +.grow-large { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; + transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; +} + +.grow-large:hover, +.grow-large:focus { + -webkit-transform: scale(1.2); + transform: scale(1.2); +} + +.grow-large:active { + -webkit-transform: scale(.95); + transform: scale(.95); +} + +/* Add pointer on hover */ + +.pointer:hover { + cursor: pointer; +} + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ + +.shadow-hover { + cursor: pointer; + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover::after { + content: ''; + box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; +} + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ + +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; +} + +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ + +.z-0 { z-index: 0; } + +.z-1 { z-index: 1; } + +.z-2 { z-index: 2; } + +.z-3 { z-index: 3; } + +.z-4 { z-index: 4; } + +.z-5 { z-index: 5; } + +.z-999 { z-index: 999; } + +.z-9999 { z-index: 9999; } + +.z-max { + z-index: 2147483647; +} + +.z-inherit { z-index: inherit; } + +.z-initial { z-index: auto; z-index: initial; } + +.z-unset { z-index: unset; } + +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ + +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; +} + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; +} + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} + +.nested-copy-indent p+p { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.nested-copy-separator p+p { + margin-top: 1.5em; +} + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} + +.nested-links a { + color: #357edd; + transition: color .15s ease-in; +} + +.nested-links a:hover, +.nested-links a:focus { + color: #96ccff; + transition: color .15s ease-in; +} + +/* + + STYLES + + Add custom styles here. + +*/ + +/* Variables */ + +/* Importing here will allow you to override any variables in the modules */ + +/* + + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors + +*/ + +/* + + CUSTOM MEDIA QUERIES + + Media query values can be changed to fit your own content. + There are no magic bullets when it comes to media query width values. + They should be declared in em units - and they should be set to meet + the needs of your content. You can also add additional media queries, + or remove some of the existing ones. + + These media queries can be referenced like so: + + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } + + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } + + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } + +*/ + +/* Media Queries */ + +/* Debugging */ + +/* @import 'tachyons/src/_debug-children'; +@import 'tachyons/src/_debug-grid'; */ + +/* Uncomment out the line below to help debug layout issues */ + +/* @import 'tachyons/src/_debug'; */ + +pre, .pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +pre code { + display: block; + padding: 1.5em 1.5em; + white-space: pre; + font-size: .875rem; + line-height: 2; + +} + +pre { + background-color: #222; + color: #ddd; + white-space: pre; + + -webkit-hyphens: none; + + -ms-hyphens: none; + + hyphens: none; + position: relative; +} + +/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */ + +.pagination { + margin: 3rem 0; +} + +.pagination li { + display: inline-block; + margin-right: .375rem; + font-size: .875rem; + margin-bottom: 2.5em; +} + +.pagination li a { + padding: .5rem .625rem; + background-color: white; + color: #333; + border: 1px solid #ddd; + border-radius: 3px; + text-decoration: none; +} + +.pagination li.disabled { + display: none; +} + +.pagination li.active a:link, +.pagination li.active a:active, +.pagination li.active a:visited { + background-color: #ddd; +} + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow, .rss { + fill: #BABABA; +} + +.new-window { + opacity: 0; + display: inline-block; + vertical-align: top; +} + +.link-transition:hover .new-window{ + opacity: 1; +} + +.facebook:hover { + fill: #3b5998; +} + +.twitter:hover { + fill: #1da1f2; +} + +.instagram:hover { + fill: #e1306c; +} + +.youtube:hover { + fill: #cd201f; +} + +.github:hover { + fill: #6cc644; +} + +.gitlab:hover { + fill: #FC6D26; +} + +.keybase:hover { + fill: #3d76ff; +} + +.linkedin:hover { + fill: #0077b5 +} + +.medium:hover { + fill: #0077b5 +} + +.mastodon:hover { + fill: #3088d4; +} + +.slack:hover { + fill: #E01E5A; +} + +.stackoverflow:hover { + fill: #f48024; +} + +.rss:hover{ + fill: #ff6f1a; +} + +/* Put your custom styles here and run `npm start` from the "src" directory on */ + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.lh-copy blockquote { + display: block; + font-size: .875em; + margin-left: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; + border-left: 4px solid #ccc; + padding-left: 1rem; + +} + +.nested-links a{ + word-wrap: break-word; +} diff --git a/public/dist/css/app.7e7787cc1402d7de28bc90f7e65adf96.css b/public/dist/css/app.7e7787cc1402d7de28bc90f7e65adf96.css new file mode 100644 index 0000000..c6b3c06 --- /dev/null +++ b/public/dist/css/app.7e7787cc1402d7de28bc90f7e65adf96.css @@ -0,0 +1,5872 @@ +/*! TACHYONS v4.9.1 | http://tachyons.io */ + +/* + * + * ________ ______ + * ___ __/_____ _________ /______ ______________________ + * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ + * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) + * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ + * /____/ + * + * TABLE OF CONTENTS + * + * 1. External Library Includes + * - Normalize.css | http://normalize.css.github.io + * 2. Tachyons Modules + * 3. Variables + * - Media Queries + * - Colors + * 4. Debugging + * - Debug all + * - Debug children + * + */ + +/* External Library Includes */ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + +/* Modules */ + +/* + + BOX SIZING + +*/ + +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} + +/* + + ASPECT RATIOS + +*/ + +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} + +.aspect-ratio--16x9 { padding-bottom: 56.25%; } + +.aspect-ratio--9x16 { padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { padding-bottom: 75%; } + +.aspect-ratio--3x4 { padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { padding-bottom: 66.6%; } + +.aspect-ratio--4x6 { padding-bottom: 150%; } + +.aspect-ratio--8x5 { padding-bottom: 62.5%; } + +.aspect-ratio--5x8 { padding-bottom: 160%; } + +.aspect-ratio--7x5 { padding-bottom: 71.42%; } + +.aspect-ratio--5x7 { padding-bottom: 140%; } + +.aspect-ratio--1x1 { padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +@media screen and (min-width: 30em){ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 60em){ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ + +/* Responsive images! */ + +img { max-width: 100%; } + +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Often used in combination with background image set as an inline style + on an html element. +*/ + +.cover { background-size: cover!important; } + +.contain { background-size: contain!important; } + +@media screen and (min-width: 30em) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} + +@media screen and (min-width: 60em) { + .cover-l { background-size: cover!important; } + .contain-l { background-size: contain!important; } +} + +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media screen and (min-width: 30em) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 60em) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} + +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.outline { outline: 1px solid; } + +.outline-transparent { outline: 1px solid transparent; } + +.outline-0 { outline: 0; } + +@media screen and (min-width: 30em) { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } +} + +@media screen and (min-width: 60em) { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } +} + +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ba { border-style: solid; border-width: 1px; } + +.bt { border-top-style: solid; border-top-width: 1px; } + +.br { border-right-style: solid; border-right-width: 1px; } + +.bb { border-bottom-style: solid; border-bottom-width: 1px; } + +.bl { border-left-style: solid; border-left-width: 1px; } + +.bn { border-style: none; border-width: 0; } + +@media screen and (min-width: 30em) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 60em) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } +} + +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ + +.b--black { border-color: #000; } + +.b--near-black { border-color: #111; } + +.b--dark-gray { border-color: #333; } + +.b--mid-gray { border-color: #555; } + +.b--gray { border-color: #777; } + +.b--silver { border-color: #999; } + +.b--light-silver { border-color: #aaa; } + +.b--moon-gray { border-color: #ccc; } + +.b--light-gray { border-color: #eee; } + +.b--near-white { border-color: #f4f4f4; } + +.b--white { border-color: #fff; } + +.b--white-90 { border-color: rgba(255, 255, 255, .9); } + +.b--white-80 { border-color: rgba(255, 255, 255, .8); } + +.b--white-70 { border-color: rgba(255, 255, 255, .7); } + +.b--white-60 { border-color: rgba(255, 255, 255, .6); } + +.b--white-50 { border-color: rgba(255, 255, 255, .5); } + +.b--white-40 { border-color: rgba(255, 255, 255, .4); } + +.b--white-30 { border-color: rgba(255, 255, 255, .3); } + +.b--white-20 { border-color: rgba(255, 255, 255, .2); } + +.b--white-10 { border-color: rgba(255, 255, 255, .1); } + +.b--white-05 { border-color: rgba(255, 255, 255, .05); } + +.b--white-025 { border-color: rgba(255, 255, 255, .025); } + +.b--white-0125 { border-color: rgba(255, 255, 255, .0125); } + +.b--black-90 { border-color: rgba(0, 0, 0, .9); } + +.b--black-80 { border-color: rgba(0, 0, 0, .8); } + +.b--black-70 { border-color: rgba(0, 0, 0, .7); } + +.b--black-60 { border-color: rgba(0, 0, 0, .6); } + +.b--black-50 { border-color: rgba(0, 0, 0, .5); } + +.b--black-40 { border-color: rgba(0, 0, 0, .4); } + +.b--black-30 { border-color: rgba(0, 0, 0, .3); } + +.b--black-20 { border-color: rgba(0, 0, 0, .2); } + +.b--black-10 { border-color: rgba(0, 0, 0, .1); } + +.b--black-05 { border-color: rgba(0, 0, 0, .05); } + +.b--black-025 { border-color: rgba(0, 0, 0, .025); } + +.b--black-0125 { border-color: rgba(0, 0, 0, .0125); } + +.b--dark-red { border-color: #e7040f; } + +.b--red { border-color: #ff4136; } + +.b--light-red { border-color: #ff725c; } + +.b--orange { border-color: #ff6300; } + +.b--gold { border-color: #ffb700; } + +.b--yellow { border-color: #ffd700; } + +.b--light-yellow { border-color: #fbf1a9; } + +.b--purple { border-color: #5e2ca5; } + +.b--light-purple { border-color: #a463f2; } + +.b--dark-pink { border-color: #d5008f; } + +.b--hot-pink { border-color: #ff41b4; } + +.b--pink { border-color: #ff80cc; } + +.b--light-pink { border-color: #ffa3d7; } + +.b--dark-green { border-color: #137752; } + +.b--green { border-color: #19a974; } + +.b--light-green { border-color: #9eebcf; } + +.b--navy { border-color: #001b44; } + +.b--dark-blue { border-color: #00449e; } + +.b--blue { border-color: #357edd; } + +.b--light-blue { border-color: #96ccff; } + +.b--lightest-blue { border-color: #cdecff; } + +.b--washed-blue { border-color: #f6fffe; } + +.b--washed-green { border-color: #e8fdf5; } + +.b--washed-yellow { border-color: #fffceb; } + +.b--washed-red { border-color: #ffdfdf; } + +.b--transparent { border-color: transparent; } + +.b--inherit { border-color: inherit; } + +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.br0 { border-radius: 0; } + +.br1 { border-radius: .125rem; } + +.br2 { border-radius: .25rem; } + +.br3 { border-radius: .5rem; } + +.br4 { border-radius: 1rem; } + +.br-100 { border-radius: 100%; } + +.br-pill { border-radius: 9999px; } + +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + +@media screen and (min-width: 30em) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 60em) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.b--dotted { border-style: dotted; } + +.b--dashed { border-style: dashed; } + +.b--solid { border-style: solid; } + +.b--none { border-style: none; } + +@media screen and (min-width: 30em) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} + +@media screen and (min-width: 60em) { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } +} + +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.bw0 { border-width: 0; } + +.bw1 { border-width: .125rem; } + +.bw2 { border-width: .25rem; } + +.bw3 { border-width: .5rem; } + +.bw4 { border-width: 1rem; } + +.bw5 { border-width: 2rem; } + +/* Resets */ + +.bt-0 { border-top-width: 0; } + +.br-0 { border-right-width: 0; } + +.bb-0 { border-bottom-width: 0; } + +.bl-0 { border-left-width: 0; } + +@media screen and (min-width: 30em) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } +} + +@media screen and (min-width: 60em) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .bl-0-l { border-left-width: 0; } +} + +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-2 { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + +.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-4 { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + +.shadow-5 { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } + +@media screen and (min-width: 30em) { + .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 60em) { + .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +/* + + CODE + +*/ + +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.top-0 { top: 0; } + +.right-0 { right: 0; } + +.bottom-0 { bottom: 0; } + +.left-0 { left: 0; } + +.top-1 { top: 1rem; } + +.right-1 { right: 1rem; } + +.bottom-1 { bottom: 1rem; } + +.left-1 { left: 1rem; } + +.top-2 { top: 2rem; } + +.right-2 { right: 2rem; } + +.bottom-2 { bottom: 2rem; } + +.left-2 { left: 2rem; } + +.top--1 { top: -1rem; } + +.right--1 { right: -1rem; } + +.bottom--1 { bottom: -1rem; } + +.left--1 { left: -1rem; } + +.top--2 { top: -2rem; } + +.right--2 { right: -2rem; } + +.bottom--2 { bottom: -2rem; } + +.left--2 { left: -2rem; } + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media screen and (min-width: 30em) { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 60em) { + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ + +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { content: " "; display: table; } + +.cf:after { clear: both; } + +.cf { *zoom: 1; } + +.cl { clear: left; } + +.cr { clear: right; } + +.cb { clear: both; } + +.cn { clear: none; } + +@media screen and (min-width: 30em) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media screen and (min-width: 60em) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} + +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.dn { display: none; } + +.di { display: inline; } + +.db { display: block; } + +.dib { display: inline-block; } + +.dit { display: inline-table; } + +.dt { display: table; } + +.dtc { display: table-cell; } + +.dt-row { display: table-row; } + +.dt-row-group { display: table-row-group; } + +.dt-column { display: table-column; } + +.dt-column-group { display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ + +.dt--fixed { + table-layout: fixed; + width: 100%; +} + +@media screen and (min-width: 30em) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 60em) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} + +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } + +.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ + +.flex-auto { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + +.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + +.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + +.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } + +.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + +.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + +.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + +.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + +.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + +.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + +.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + +.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + +.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + +.self-start { -ms-flex-item-align: start; align-self: flex-start; } + +.self-end { -ms-flex-item-align: end; align-self: flex-end; } + +.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + +.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } + +.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + +.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + +.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + +.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + +.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + +.justify-around { -ms-flex-pack: distribute; justify-content: space-around; } + +.content-start { -ms-flex-line-pack: start; align-content: flex-start; } + +.content-end { -ms-flex-line-pack: end; align-content: flex-end; } + +.content-center { -ms-flex-line-pack: center; align-content: center; } + +.content-between { -ms-flex-line-pack: justify; align-content: space-between; } + +.content-around { -ms-flex-line-pack: distribute; align-content: space-around; } + +.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } + +.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + +.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + +.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + +.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + +.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + +.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + +.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + +.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + +.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + +.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + +.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + +.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + +.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } + +.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } + +@media screen and (min-width: 30em) { + .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-ns { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-ns { -ms-flex-line-pack: center; align-content: center; } + .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-m { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-m { -ms-flex-line-pack: center; align-content: center; } + .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 60em) { + .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-l { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + + .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-l { -ms-flex-line-pack: center; align-content: center; } + .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; } +} + +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.fl { float: left; _display: inline; } + +.fr { float: right; _display: inline; } + +.fn { float: none; } + +@media screen and (min-width: 30em) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} + +@media screen and (min-width: 60em) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} + +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + +*/ + +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, + 'avenir next', avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} + +.serif { + font-family: georgia, + times, + serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ + +code, .code { + font-family: Consolas, + monaco, + monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + +/* Sans-Serif Typefaces */ + +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} + +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} + +/* Serif Typefaces */ + +.athelas { + font-family: athelas, + georgia, + serif; +} + +.georgia { + font-family: georgia, + serif; +} + +.times { + font-family: times, + serif; +} + +.bodoni { + font-family: "Bodoni MT", + serif; +} + +.calisto { + font-family: "Calisto MT", + serif; +} + +.garamond { + font-family: garamond, + serif; +} + +.baskerville { + font-family: baskerville, + serif; +} + +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.i { font-style: italic; } + +.fs-normal { font-style: normal; } + +@media screen and (min-width: 30em) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media screen and (min-width: 60em) { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} + +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.normal { font-weight: normal; } + +.b { font-weight: bold; } + +.fw1 { font-weight: 100; } + +.fw2 { font-weight: 200; } + +.fw3 { font-weight: 300; } + +.fw4 { font-weight: 400; } + +.fw5 { font-weight: 500; } + +.fw6 { font-weight: 600; } + +.fw7 { font-weight: 700; } + +.fw8 { font-weight: 800; } + +.fw9 { font-weight: 900; } + +@media screen and (min-width: 30em) { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } +} + +@media screen and (min-width: 60em) { + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } +} + +/* + + FORMS + +*/ + +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Height Scale */ + +.h1 { height: 1rem; } + +.h2 { height: 2rem; } + +.h3 { height: 4rem; } + +.h4 { height: 8rem; } + +.h5 { height: 16rem; } + +/* Height Percentages - Based off of height of parent */ + +.h-25 { height: 25%; } + +.h-50 { height: 50%; } + +.h-75 { height: 75%; } + +.h-100 { height: 100%; } + +.min-h-100 { min-height: 100%; } + +/* Screen Height Percentage */ + +.vh-25 { height: 25vh; } + +.vh-50 { height: 50vh; } + +.vh-75 { height: 75vh; } + +.vh-100 { height: 100vh; } + +.min-vh-100 { min-height: 100vh; } + +/* String Properties */ + +.h-auto { height: auto; } + +.h-inherit { height: inherit; } + +@media screen and (min-width: 30em) { + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .h1-m { height: 1rem; } + .h2-m { height: 2rem; } + .h3-m { height: 4rem; } + .h4-m { height: 8rem; } + .h5-m { height: 16rem; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} + +@media screen and (min-width: 60em) { + .h1-l { height: 1rem; } + .h2-l { height: 2rem; } + .h3-l { height: 4rem; } + .h4-l { height: 8rem; } + .h5-l { height: 16rem; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} + +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tracked { letter-spacing: .1em; } + +.tracked-tight { letter-spacing: -.05em; } + +.tracked-mega { letter-spacing: .25em; } + +@media screen and (min-width: 30em) { + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } +} + +@media screen and (min-width: 60em) { + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } +} + +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.lh-solid { line-height: 1; } + +.lh-title { line-height: 1.25; } + +.lh-copy { line-height: 1.5; } + +@media screen and (min-width: 30em) { + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } +} + +@media screen and (min-width: 60em) { + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } +} + +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ + +.link { + text-decoration: none; + transition: color .15s ease-in; +} + +.link:link, +.link:visited { + transition: color .15s ease-in; +} + +.link:hover { + transition: color .15s ease-in; +} + +.link:active { + transition: color .15s ease-in; +} + +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} + +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + +*/ + +.list { list-style-type: none; } + +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Max Width Percentages */ + +.mw-100 { max-width: 100%; } + +/* Max Width Scale */ + +.mw1 { max-width: 1rem; } + +.mw2 { max-width: 2rem; } + +.mw3 { max-width: 4rem; } + +.mw4 { max-width: 8rem; } + +.mw5 { max-width: 16rem; } + +.mw6 { max-width: 32rem; } + +.mw7 { max-width: 48rem; } + +.mw8 { max-width: 64rem; } + +.mw9 { max-width: 96rem; } + +/* Max Width String Properties */ + +.mw-none { max-width: none; } + +@media screen and (min-width: 30em) { + .mw-100-ns { max-width: 100%; } + + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } + + .mw-none-ns { max-width: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .mw-100-m { max-width: 100%; } + + .mw1-m { max-width: 1rem; } + .mw2-m { max-width: 2rem; } + .mw3-m { max-width: 4rem; } + .mw4-m { max-width: 8rem; } + .mw5-m { max-width: 16rem; } + .mw6-m { max-width: 32rem; } + .mw7-m { max-width: 48rem; } + .mw8-m { max-width: 64rem; } + .mw9-m { max-width: 96rem; } + + .mw-none-m { max-width: none; } +} + +@media screen and (min-width: 60em) { + .mw-100-l { max-width: 100%; } + + .mw1-l { max-width: 1rem; } + .mw2-l { max-width: 2rem; } + .mw3-l { max-width: 4rem; } + .mw4-l { max-width: 8rem; } + .mw5-l { max-width: 16rem; } + .mw6-l { max-width: 32rem; } + .mw7-l { max-width: 48rem; } + .mw8-l { max-width: 64rem; } + .mw9-l { max-width: 96rem; } + + .mw-none-l { max-width: none; } +} + +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Width Scale */ + +.w1 { width: 1rem; } + +.w2 { width: 2rem; } + +.w3 { width: 4rem; } + +.w4 { width: 8rem; } + +.w5 { width: 16rem; } + +.w-10 { width: 10%; } + +.w-20 { width: 20%; } + +.w-25 { width: 25%; } + +.w-30 { width: 30%; } + +.w-33 { width: 33%; } + +.w-34 { width: 34%; } + +.w-40 { width: 40%; } + +.w-50 { width: 50%; } + +.w-60 { width: 60%; } + +.w-70 { width: 70%; } + +.w-75 { width: 75%; } + +.w-80 { width: 80%; } + +.w-90 { width: 90%; } + +.w-100 { width: 100%; } + +.w-third { width: 33.33333%; } + +.w-two-thirds { width: 66.66667%; } + +.w-auto { width: auto; } + +@media screen and (min-width: 30em) { + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: 33.33333%; } + .w-two-thirds-ns { width: 66.66667%; } + .w-auto-ns { width: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: 33.33333%; } + .w-two-thirds-m { width: 66.66667%; } + .w-auto-m { width: auto; } +} + +@media screen and (min-width: 60em) { + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: 33.33333%; } + .w-two-thirds-l { width: 66.66667%; } + .w-auto-l { width: auto; } +} + +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.overflow-visible { overflow: visible; } + +.overflow-hidden { overflow: hidden; } + +.overflow-scroll { overflow: scroll; } + +.overflow-auto { overflow: auto; } + +.overflow-x-visible { overflow-x: visible; } + +.overflow-x-hidden { overflow-x: hidden; } + +.overflow-x-scroll { overflow-x: scroll; } + +.overflow-x-auto { overflow-x: auto; } + +.overflow-y-visible { overflow-y: visible; } + +.overflow-y-hidden { overflow-y: hidden; } + +.overflow-y-scroll { overflow-y: scroll; } + +.overflow-y-auto { overflow-y: auto; } + +@media screen and (min-width: 30em) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} + +@media screen and (min-width: 60em) { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } +} + +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.static { position: static; } + +.relative { position: relative; } + +.absolute { position: absolute; } + +.fixed { position: fixed; } + +@media screen and (min-width: 30em) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } +} + +@media screen and (min-width: 60em) { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } +} + +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ + +.o-100 { opacity: 1; } + +.o-90 { opacity: .9; } + +.o-80 { opacity: .8; } + +.o-70 { opacity: .7; } + +.o-60 { opacity: .6; } + +.o-50 { opacity: .5; } + +.o-40 { opacity: .4; } + +.o-30 { opacity: .3; } + +.o-20 { opacity: .2; } + +.o-10 { opacity: .1; } + +.o-05 { opacity: .05; } + +.o-025 { opacity: .025; } + +.o-0 { opacity: 0; } + +/* + + ROTATIONS + +*/ + +.rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + +.rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + +.rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + +.rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + +.rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + +.rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + +.rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } + +@media screen and (min-width: 30em){ + .rotate-45-ns { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-ns { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-ns { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-ns { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-ns { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-ns { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-ns { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .rotate-45-m { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-m { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-m { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-m { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-m { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-m { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-m { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 60em){ + .rotate-45-l { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-l { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-l { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-l { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-l { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-l { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-l { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + +*/ + +/* Text colors */ + +.black-90 { color: rgba(0, 0, 0, .9); } + +.black-80 { color: rgba(0, 0, 0, .8); } + +.black-70 { color: rgba(0, 0, 0, .7); } + +.black-60 { color: rgba(0, 0, 0, .6); } + +.black-50 { color: rgba(0, 0, 0, .5); } + +.black-40 { color: rgba(0, 0, 0, .4); } + +.black-30 { color: rgba(0, 0, 0, .3); } + +.black-20 { color: rgba(0, 0, 0, .2); } + +.black-10 { color: rgba(0, 0, 0, .1); } + +.black-05 { color: rgba(0, 0, 0, .05); } + +.white-90 { color: rgba(255, 255, 255, .9); } + +.white-80 { color: rgba(255, 255, 255, .8); } + +.white-70 { color: rgba(255, 255, 255, .7); } + +.white-60 { color: rgba(255, 255, 255, .6); } + +.white-50 { color: rgba(255, 255, 255, .5); } + +.white-40 { color: rgba(255, 255, 255, .4); } + +.white-30 { color: rgba(255, 255, 255, .3); } + +.white-20 { color: rgba(255, 255, 255, .2); } + +.white-10 { color: rgba(255, 255, 255, .1); } + +.black { color: #000; } + +.near-black { color: #111; } + +.dark-gray { color: #333; } + +.mid-gray { color: #555; } + +.gray { color: #777; } + +.silver { color: #999; } + +.light-silver { color: #aaa; } + +.moon-gray { color: #ccc; } + +.light-gray { color: #eee; } + +.near-white { color: #f4f4f4; } + +.white { color: #fff; } + +.dark-red { color: #e7040f; } + +.red { color: #ff4136; } + +.light-red { color: #ff725c; } + +.orange { color: #ff6300; } + +.gold { color: #ffb700; } + +.yellow { color: #ffd700; } + +.light-yellow { color: #fbf1a9; } + +.purple { color: #5e2ca5; } + +.light-purple { color: #a463f2; } + +.dark-pink { color: #d5008f; } + +.hot-pink { color: #ff41b4; } + +.pink { color: #ff80cc; } + +.light-pink { color: #ffa3d7; } + +.dark-green { color: #137752; } + +.green { color: #19a974; } + +.light-green { color: #9eebcf; } + +.navy { color: #001b44; } + +.dark-blue { color: #00449e; } + +.blue { color: #357edd; } + +.light-blue { color: #96ccff; } + +.lightest-blue { color: #cdecff; } + +.washed-blue { color: #f6fffe; } + +.washed-green { color: #e8fdf5; } + +.washed-yellow { color: #fffceb; } + +.washed-red { color: #ffdfdf; } + +.color-inherit { color: inherit; } + +.bg-black-90 { background-color: rgba(0, 0, 0, .9); } + +.bg-black-80 { background-color: rgba(0, 0, 0, .8); } + +.bg-black-70 { background-color: rgba(0, 0, 0, .7); } + +.bg-black-60 { background-color: rgba(0, 0, 0, .6); } + +.bg-black-50 { background-color: rgba(0, 0, 0, .5); } + +.bg-black-40 { background-color: rgba(0, 0, 0, .4); } + +.bg-black-30 { background-color: rgba(0, 0, 0, .3); } + +.bg-black-20 { background-color: rgba(0, 0, 0, .2); } + +.bg-black-10 { background-color: rgba(0, 0, 0, .1); } + +.bg-black-05 { background-color: rgba(0, 0, 0, .05); } + +.bg-white-90 { background-color: rgba(255, 255, 255, .9); } + +.bg-white-80 { background-color: rgba(255, 255, 255, .8); } + +.bg-white-70 { background-color: rgba(255, 255, 255, .7); } + +.bg-white-60 { background-color: rgba(255, 255, 255, .6); } + +.bg-white-50 { background-color: rgba(255, 255, 255, .5); } + +.bg-white-40 { background-color: rgba(255, 255, 255, .4); } + +.bg-white-30 { background-color: rgba(255, 255, 255, .3); } + +.bg-white-20 { background-color: rgba(255, 255, 255, .2); } + +.bg-white-10 { background-color: rgba(255, 255, 255, .1); } + +/* Background colors */ + +.bg-black { background-color: #000; } + +.bg-near-black { background-color: #111; } + +.bg-dark-gray { background-color: #333; } + +.bg-mid-gray { background-color: #555; } + +.bg-gray { background-color: #777; } + +.bg-silver { background-color: #999; } + +.bg-light-silver { background-color: #aaa; } + +.bg-moon-gray { background-color: #ccc; } + +.bg-light-gray { background-color: #eee; } + +.bg-near-white { background-color: #f4f4f4; } + +.bg-white { background-color: #fff; } + +.bg-transparent { background-color: transparent; } + +.bg-dark-red { background-color: #e7040f; } + +.bg-red { background-color: #ff4136; } + +.bg-light-red { background-color: #ff725c; } + +.bg-orange { background-color: #ff6300; } + +.bg-gold { background-color: #ffb700; } + +.bg-yellow { background-color: #ffd700; } + +.bg-light-yellow { background-color: #fbf1a9; } + +.bg-purple { background-color: #5e2ca5; } + +.bg-light-purple { background-color: #a463f2; } + +.bg-dark-pink { background-color: #d5008f; } + +.bg-hot-pink { background-color: #ff41b4; } + +.bg-pink { background-color: #ff80cc; } + +.bg-light-pink { background-color: #ffa3d7; } + +.bg-dark-green { background-color: #137752; } + +.bg-green { background-color: #19a974; } + +.bg-light-green { background-color: #9eebcf; } + +.bg-navy { background-color: #001b44; } + +.bg-dark-blue { background-color: #00449e; } + +.bg-blue { background-color: #357edd; } + +.bg-light-blue { background-color: #96ccff; } + +.bg-lightest-blue { background-color: #cdecff; } + +.bg-washed-blue { background-color: #f6fffe; } + +.bg-washed-green { background-color: #e8fdf5; } + +.bg-washed-yellow { background-color: #fffceb; } + +.bg-washed-red { background-color: #ffdfdf; } + +.bg-inherit { background-color: inherit; } + +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ + +.hover-black:hover, +.hover-black:focus { color: #000; } + +.hover-near-black:hover, +.hover-near-black:focus { color: #111; } + +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: #333; } + +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: #555; } + +.hover-gray:hover, +.hover-gray:focus { color: #777; } + +.hover-silver:hover, +.hover-silver:focus { color: #999; } + +.hover-light-silver:hover, +.hover-light-silver:focus { color: #aaa; } + +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: #ccc; } + +.hover-light-gray:hover, +.hover-light-gray:focus { color: #eee; } + +.hover-near-white:hover, +.hover-near-white:focus { color: #f4f4f4; } + +.hover-white:hover, +.hover-white:focus { color: #fff; } + +.hover-black-90:hover, +.hover-black-90:focus { color: rgba(0, 0, 0, .9); } + +.hover-black-80:hover, +.hover-black-80:focus { color: rgba(0, 0, 0, .8); } + +.hover-black-70:hover, +.hover-black-70:focus { color: rgba(0, 0, 0, .7); } + +.hover-black-60:hover, +.hover-black-60:focus { color: rgba(0, 0, 0, .6); } + +.hover-black-50:hover, +.hover-black-50:focus { color: rgba(0, 0, 0, .5); } + +.hover-black-40:hover, +.hover-black-40:focus { color: rgba(0, 0, 0, .4); } + +.hover-black-30:hover, +.hover-black-30:focus { color: rgba(0, 0, 0, .3); } + +.hover-black-20:hover, +.hover-black-20:focus { color: rgba(0, 0, 0, .2); } + +.hover-black-10:hover, +.hover-black-10:focus { color: rgba(0, 0, 0, .1); } + +.hover-white-90:hover, +.hover-white-90:focus { color: rgba(255, 255, 255, .9); } + +.hover-white-80:hover, +.hover-white-80:focus { color: rgba(255, 255, 255, .8); } + +.hover-white-70:hover, +.hover-white-70:focus { color: rgba(255, 255, 255, .7); } + +.hover-white-60:hover, +.hover-white-60:focus { color: rgba(255, 255, 255, .6); } + +.hover-white-50:hover, +.hover-white-50:focus { color: rgba(255, 255, 255, .5); } + +.hover-white-40:hover, +.hover-white-40:focus { color: rgba(255, 255, 255, .4); } + +.hover-white-30:hover, +.hover-white-30:focus { color: rgba(255, 255, 255, .3); } + +.hover-white-20:hover, +.hover-white-20:focus { color: rgba(255, 255, 255, .2); } + +.hover-white-10:hover, +.hover-white-10:focus { color: rgba(255, 255, 255, .1); } + +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } + +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: #000; } + +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: #111; } + +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: #333; } + +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: #555; } + +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: #777; } + +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: #999; } + +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: #aaa; } + +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: #ccc; } + +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: #eee; } + +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: #f4f4f4; } + +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: #fff; } + +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: transparent; } + +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); } + +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); } + +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); } + +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); } + +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); } + +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); } + +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); } + +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); } + +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); } + +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); } + +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); } + +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); } + +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); } + +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); } + +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); } + +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); } + +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); } + +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); } + +.hover-dark-red:hover, +.hover-dark-red:focus { color: #e7040f; } + +.hover-red:hover, +.hover-red:focus { color: #ff4136; } + +.hover-light-red:hover, +.hover-light-red:focus { color: #ff725c; } + +.hover-orange:hover, +.hover-orange:focus { color: #ff6300; } + +.hover-gold:hover, +.hover-gold:focus { color: #ffb700; } + +.hover-yellow:hover, +.hover-yellow:focus { color: #ffd700; } + +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: #fbf1a9; } + +.hover-purple:hover, +.hover-purple:focus { color: #5e2ca5; } + +.hover-light-purple:hover, +.hover-light-purple:focus { color: #a463f2; } + +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: #d5008f; } + +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: #ff41b4; } + +.hover-pink:hover, +.hover-pink:focus { color: #ff80cc; } + +.hover-light-pink:hover, +.hover-light-pink:focus { color: #ffa3d7; } + +.hover-dark-green:hover, +.hover-dark-green:focus { color: #137752; } + +.hover-green:hover, +.hover-green:focus { color: #19a974; } + +.hover-light-green:hover, +.hover-light-green:focus { color: #9eebcf; } + +.hover-navy:hover, +.hover-navy:focus { color: #001b44; } + +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: #00449e; } + +.hover-blue:hover, +.hover-blue:focus { color: #357edd; } + +.hover-light-blue:hover, +.hover-light-blue:focus { color: #96ccff; } + +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: #cdecff; } + +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: #f6fffe; } + +.hover-washed-green:hover, +.hover-washed-green:focus { color: #e8fdf5; } + +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: #fffceb; } + +.hover-washed-red:hover, +.hover-washed-red:focus { color: #ffdfdf; } + +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: #e7040f; } + +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: #ff4136; } + +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: #ff725c; } + +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: #ff6300; } + +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: #ffb700; } + +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: #ffd700; } + +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: #fbf1a9; } + +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: #5e2ca5; } + +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: #a463f2; } + +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: #d5008f; } + +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: #ff41b4; } + +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: #ff80cc; } + +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: #ffa3d7; } + +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: #137752; } + +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: #19a974; } + +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: #9eebcf; } + +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: #001b44; } + +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: #00449e; } + +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: #357edd; } + +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: #96ccff; } + +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: #cdecff; } + +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: #f6fffe; } + +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: #e8fdf5; } + +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: #fffceb; } + +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: #ffdfdf; } + +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { background-color: inherit; } + +/* Variables */ + +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.pa0 { padding: 0; } + +.pa1 { padding: .25rem; } + +.pa2 { padding: .5rem; } + +.pa3 { padding: 1rem; } + +.pa4 { padding: 2rem; } + +.pa5 { padding: 4rem; } + +.pa6 { padding: 8rem; } + +.pa7 { padding: 16rem; } + +.pl0 { padding-left: 0; } + +.pl1 { padding-left: .25rem; } + +.pl2 { padding-left: .5rem; } + +.pl3 { padding-left: 1rem; } + +.pl4 { padding-left: 2rem; } + +.pl5 { padding-left: 4rem; } + +.pl6 { padding-left: 8rem; } + +.pl7 { padding-left: 16rem; } + +.pr0 { padding-right: 0; } + +.pr1 { padding-right: .25rem; } + +.pr2 { padding-right: .5rem; } + +.pr3 { padding-right: 1rem; } + +.pr4 { padding-right: 2rem; } + +.pr5 { padding-right: 4rem; } + +.pr6 { padding-right: 8rem; } + +.pr7 { padding-right: 16rem; } + +.pb0 { padding-bottom: 0; } + +.pb1 { padding-bottom: .25rem; } + +.pb2 { padding-bottom: .5rem; } + +.pb3 { padding-bottom: 1rem; } + +.pb4 { padding-bottom: 2rem; } + +.pb5 { padding-bottom: 4rem; } + +.pb6 { padding-bottom: 8rem; } + +.pb7 { padding-bottom: 16rem; } + +.pt0 { padding-top: 0; } + +.pt1 { padding-top: .25rem; } + +.pt2 { padding-top: .5rem; } + +.pt3 { padding-top: 1rem; } + +.pt4 { padding-top: 2rem; } + +.pt5 { padding-top: 4rem; } + +.pt6 { padding-top: 8rem; } + +.pt7 { padding-top: 16rem; } + +.pv0 { + padding-top: 0; + padding-bottom: 0; +} + +.pv1 { + padding-top: .25rem; + padding-bottom: .25rem; +} + +.pv2 { + padding-top: .5rem; + padding-bottom: .5rem; +} + +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.pv4 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pv5 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.pv6 { + padding-top: 8rem; + padding-bottom: 8rem; +} + +.pv7 { + padding-top: 16rem; + padding-bottom: 16rem; +} + +.ph0 { + padding-left: 0; + padding-right: 0; +} + +.ph1 { + padding-left: .25rem; + padding-right: .25rem; +} + +.ph2 { + padding-left: .5rem; + padding-right: .5rem; +} + +.ph3 { + padding-left: 1rem; + padding-right: 1rem; +} + +.ph4 { + padding-left: 2rem; + padding-right: 2rem; +} + +.ph5 { + padding-left: 4rem; + padding-right: 4rem; +} + +.ph6 { + padding-left: 8rem; + padding-right: 8rem; +} + +.ph7 { + padding-left: 16rem; + padding-right: 16rem; +} + +.ma0 { margin: 0; } + +.ma1 { margin: .25rem; } + +.ma2 { margin: .5rem; } + +.ma3 { margin: 1rem; } + +.ma4 { margin: 2rem; } + +.ma5 { margin: 4rem; } + +.ma6 { margin: 8rem; } + +.ma7 { margin: 16rem; } + +.ml0 { margin-left: 0; } + +.ml1 { margin-left: .25rem; } + +.ml2 { margin-left: .5rem; } + +.ml3 { margin-left: 1rem; } + +.ml4 { margin-left: 2rem; } + +.ml5 { margin-left: 4rem; } + +.ml6 { margin-left: 8rem; } + +.ml7 { margin-left: 16rem; } + +.mr0 { margin-right: 0; } + +.mr1 { margin-right: .25rem; } + +.mr2 { margin-right: .5rem; } + +.mr3 { margin-right: 1rem; } + +.mr4 { margin-right: 2rem; } + +.mr5 { margin-right: 4rem; } + +.mr6 { margin-right: 8rem; } + +.mr7 { margin-right: 16rem; } + +.mb0 { margin-bottom: 0; } + +.mb1 { margin-bottom: .25rem; } + +.mb2 { margin-bottom: .5rem; } + +.mb3 { margin-bottom: 1rem; } + +.mb4 { margin-bottom: 2rem; } + +.mb5 { margin-bottom: 4rem; } + +.mb6 { margin-bottom: 8rem; } + +.mb7 { margin-bottom: 16rem; } + +.mt0 { margin-top: 0; } + +.mt1 { margin-top: .25rem; } + +.mt2 { margin-top: .5rem; } + +.mt3 { margin-top: 1rem; } + +.mt4 { margin-top: 2rem; } + +.mt5 { margin-top: 4rem; } + +.mt6 { margin-top: 8rem; } + +.mt7 { margin-top: 16rem; } + +.mv0 { + margin-top: 0; + margin-bottom: 0; +} + +.mv1 { + margin-top: .25rem; + margin-bottom: .25rem; +} + +.mv2 { + margin-top: .5rem; + margin-bottom: .5rem; +} + +.mv3 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mv4 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.mv5 { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.mv6 { + margin-top: 8rem; + margin-bottom: 8rem; +} + +.mv7 { + margin-top: 16rem; + margin-bottom: 16rem; +} + +.mh0 { + margin-left: 0; + margin-right: 0; +} + +.mh1 { + margin-left: .25rem; + margin-right: .25rem; +} + +.mh2 { + margin-left: .5rem; + margin-right: .5rem; +} + +.mh3 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mh4 { + margin-left: 2rem; + margin-right: 2rem; +} + +.mh5 { + margin-left: 4rem; + margin-right: 4rem; +} + +.mh6 { + margin-left: 8rem; + margin-right: 8rem; +} + +.mh7 { + margin-left: 16rem; + margin-right: 16rem; +} + +@media screen and (min-width: 30em) { + .pa0-ns { padding: 0; } + .pa1-ns { padding: .25rem; } + .pa2-ns { padding: .5rem; } + .pa3-ns { padding: 1rem; } + .pa4-ns { padding: 2rem; } + .pa5-ns { padding: 4rem; } + .pa6-ns { padding: 8rem; } + .pa7-ns { padding: 16rem; } + + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: .25rem; } + .pl2-ns { padding-left: .5rem; } + .pl3-ns { padding-left: 1rem; } + .pl4-ns { padding-left: 2rem; } + .pl5-ns { padding-left: 4rem; } + .pl6-ns { padding-left: 8rem; } + .pl7-ns { padding-left: 16rem; } + + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: .25rem; } + .pr2-ns { padding-right: .5rem; } + .pr3-ns { padding-right: 1rem; } + .pr4-ns { padding-right: 2rem; } + .pr5-ns { padding-right: 4rem; } + .pr6-ns { padding-right: 8rem; } + .pr7-ns { padding-right: 16rem; } + + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: .25rem; } + .pb2-ns { padding-bottom: .5rem; } + .pb3-ns { padding-bottom: 1rem; } + .pb4-ns { padding-bottom: 2rem; } + .pb5-ns { padding-bottom: 4rem; } + .pb6-ns { padding-bottom: 8rem; } + .pb7-ns { padding-bottom: 16rem; } + + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: .25rem; } + .pt2-ns { padding-top: .5rem; } + .pt3-ns { padding-top: 1rem; } + .pt4-ns { padding-top: 2rem; } + .pt5-ns { padding-top: 4rem; } + .pt6-ns { padding-top: 8rem; } + .pt7-ns { padding-top: 16rem; } + + .pv0-ns { + padding-top: 0; + padding-bottom: 0; + } + .pv1-ns { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-ns { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-ns { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-ns { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-ns { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-ns { + padding-top: 16rem; + padding-bottom: 16rem; + } + .ph0-ns { + padding-left: 0; + padding-right: 0; + } + .ph1-ns { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-ns { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-ns { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-ns { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-ns { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-ns { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-ns { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-ns { margin: 0; } + .ma1-ns { margin: .25rem; } + .ma2-ns { margin: .5rem; } + .ma3-ns { margin: 1rem; } + .ma4-ns { margin: 2rem; } + .ma5-ns { margin: 4rem; } + .ma6-ns { margin: 8rem; } + .ma7-ns { margin: 16rem; } + + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: .25rem; } + .ml2-ns { margin-left: .5rem; } + .ml3-ns { margin-left: 1rem; } + .ml4-ns { margin-left: 2rem; } + .ml5-ns { margin-left: 4rem; } + .ml6-ns { margin-left: 8rem; } + .ml7-ns { margin-left: 16rem; } + + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: .25rem; } + .mr2-ns { margin-right: .5rem; } + .mr3-ns { margin-right: 1rem; } + .mr4-ns { margin-right: 2rem; } + .mr5-ns { margin-right: 4rem; } + .mr6-ns { margin-right: 8rem; } + .mr7-ns { margin-right: 16rem; } + + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: .25rem; } + .mb2-ns { margin-bottom: .5rem; } + .mb3-ns { margin-bottom: 1rem; } + .mb4-ns { margin-bottom: 2rem; } + .mb5-ns { margin-bottom: 4rem; } + .mb6-ns { margin-bottom: 8rem; } + .mb7-ns { margin-bottom: 16rem; } + + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: .25rem; } + .mt2-ns { margin-top: .5rem; } + .mt3-ns { margin-top: 1rem; } + .mt4-ns { margin-top: 2rem; } + .mt5-ns { margin-top: 4rem; } + .mt6-ns { margin-top: 8rem; } + .mt7-ns { margin-top: 16rem; } + + .mv0-ns { + margin-top: 0; + margin-bottom: 0; + } + .mv1-ns { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-ns { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-ns { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-ns { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-ns { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-ns { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-ns { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-ns { + margin-left: 0; + margin-right: 0; + } + .mh1-ns { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-ns { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-ns { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-ns { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-ns { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-ns { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-ns { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .pa0-m { padding: 0; } + .pa1-m { padding: .25rem; } + .pa2-m { padding: .5rem; } + .pa3-m { padding: 1rem; } + .pa4-m { padding: 2rem; } + .pa5-m { padding: 4rem; } + .pa6-m { padding: 8rem; } + .pa7-m { padding: 16rem; } + + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: .25rem; } + .pl2-m { padding-left: .5rem; } + .pl3-m { padding-left: 1rem; } + .pl4-m { padding-left: 2rem; } + .pl5-m { padding-left: 4rem; } + .pl6-m { padding-left: 8rem; } + .pl7-m { padding-left: 16rem; } + + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: .25rem; } + .pr2-m { padding-right: .5rem; } + .pr3-m { padding-right: 1rem; } + .pr4-m { padding-right: 2rem; } + .pr5-m { padding-right: 4rem; } + .pr6-m { padding-right: 8rem; } + .pr7-m { padding-right: 16rem; } + + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: .25rem; } + .pb2-m { padding-bottom: .5rem; } + .pb3-m { padding-bottom: 1rem; } + .pb4-m { padding-bottom: 2rem; } + .pb5-m { padding-bottom: 4rem; } + .pb6-m { padding-bottom: 8rem; } + .pb7-m { padding-bottom: 16rem; } + + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: .25rem; } + .pt2-m { padding-top: .5rem; } + .pt3-m { padding-top: 1rem; } + .pt4-m { padding-top: 2rem; } + .pt5-m { padding-top: 4rem; } + .pt6-m { padding-top: 8rem; } + .pt7-m { padding-top: 16rem; } + + .pv0-m { + padding-top: 0; + padding-bottom: 0; + } + .pv1-m { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-m { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-m { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-m { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-m { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-m { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-m { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-m { + padding-left: 0; + padding-right: 0; + } + .ph1-m { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-m { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-m { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-m { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-m { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-m { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-m { margin: 0; } + .ma1-m { margin: .25rem; } + .ma2-m { margin: .5rem; } + .ma3-m { margin: 1rem; } + .ma4-m { margin: 2rem; } + .ma5-m { margin: 4rem; } + .ma6-m { margin: 8rem; } + .ma7-m { margin: 16rem; } + + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: .25rem; } + .ml2-m { margin-left: .5rem; } + .ml3-m { margin-left: 1rem; } + .ml4-m { margin-left: 2rem; } + .ml5-m { margin-left: 4rem; } + .ml6-m { margin-left: 8rem; } + .ml7-m { margin-left: 16rem; } + + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: .25rem; } + .mr2-m { margin-right: .5rem; } + .mr3-m { margin-right: 1rem; } + .mr4-m { margin-right: 2rem; } + .mr5-m { margin-right: 4rem; } + .mr6-m { margin-right: 8rem; } + .mr7-m { margin-right: 16rem; } + + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: .25rem; } + .mb2-m { margin-bottom: .5rem; } + .mb3-m { margin-bottom: 1rem; } + .mb4-m { margin-bottom: 2rem; } + .mb5-m { margin-bottom: 4rem; } + .mb6-m { margin-bottom: 8rem; } + .mb7-m { margin-bottom: 16rem; } + + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: .25rem; } + .mt2-m { margin-top: .5rem; } + .mt3-m { margin-top: 1rem; } + .mt4-m { margin-top: 2rem; } + .mt5-m { margin-top: 4rem; } + .mt6-m { margin-top: 8rem; } + .mt7-m { margin-top: 16rem; } + + .mv0-m { + margin-top: 0; + margin-bottom: 0; + } + .mv1-m { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-m { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-m { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-m { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-m { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-m { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-m { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-m { + margin-left: 0; + margin-right: 0; + } + .mh1-m { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-m { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-m { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-m { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-m { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-m { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-m { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 60em) { + .pa0-l { padding: 0; } + .pa1-l { padding: .25rem; } + .pa2-l { padding: .5rem; } + .pa3-l { padding: 1rem; } + .pa4-l { padding: 2rem; } + .pa5-l { padding: 4rem; } + .pa6-l { padding: 8rem; } + .pa7-l { padding: 16rem; } + + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: .25rem; } + .pl2-l { padding-left: .5rem; } + .pl3-l { padding-left: 1rem; } + .pl4-l { padding-left: 2rem; } + .pl5-l { padding-left: 4rem; } + .pl6-l { padding-left: 8rem; } + .pl7-l { padding-left: 16rem; } + + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: .25rem; } + .pr2-l { padding-right: .5rem; } + .pr3-l { padding-right: 1rem; } + .pr4-l { padding-right: 2rem; } + .pr5-l { padding-right: 4rem; } + .pr6-l { padding-right: 8rem; } + .pr7-l { padding-right: 16rem; } + + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: .25rem; } + .pb2-l { padding-bottom: .5rem; } + .pb3-l { padding-bottom: 1rem; } + .pb4-l { padding-bottom: 2rem; } + .pb5-l { padding-bottom: 4rem; } + .pb6-l { padding-bottom: 8rem; } + .pb7-l { padding-bottom: 16rem; } + + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: .25rem; } + .pt2-l { padding-top: .5rem; } + .pt3-l { padding-top: 1rem; } + .pt4-l { padding-top: 2rem; } + .pt5-l { padding-top: 4rem; } + .pt6-l { padding-top: 8rem; } + .pt7-l { padding-top: 16rem; } + + .pv0-l { + padding-top: 0; + padding-bottom: 0; + } + .pv1-l { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-l { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-l { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-l { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-l { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-l { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-l { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-l { + padding-left: 0; + padding-right: 0; + } + .ph1-l { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-l { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-l { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-l { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-l { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-l { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-l { margin: 0; } + .ma1-l { margin: .25rem; } + .ma2-l { margin: .5rem; } + .ma3-l { margin: 1rem; } + .ma4-l { margin: 2rem; } + .ma5-l { margin: 4rem; } + .ma6-l { margin: 8rem; } + .ma7-l { margin: 16rem; } + + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: .25rem; } + .ml2-l { margin-left: .5rem; } + .ml3-l { margin-left: 1rem; } + .ml4-l { margin-left: 2rem; } + .ml5-l { margin-left: 4rem; } + .ml6-l { margin-left: 8rem; } + .ml7-l { margin-left: 16rem; } + + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: .25rem; } + .mr2-l { margin-right: .5rem; } + .mr3-l { margin-right: 1rem; } + .mr4-l { margin-right: 2rem; } + .mr5-l { margin-right: 4rem; } + .mr6-l { margin-right: 8rem; } + .mr7-l { margin-right: 16rem; } + + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: .25rem; } + .mb2-l { margin-bottom: .5rem; } + .mb3-l { margin-bottom: 1rem; } + .mb4-l { margin-bottom: 2rem; } + .mb5-l { margin-bottom: 4rem; } + .mb6-l { margin-bottom: 8rem; } + .mb7-l { margin-bottom: 16rem; } + + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: .25rem; } + .mt2-l { margin-top: .5rem; } + .mt3-l { margin-top: 1rem; } + .mt4-l { margin-top: 2rem; } + .mt5-l { margin-top: 4rem; } + .mt6-l { margin-top: 8rem; } + .mt7-l { margin-top: 16rem; } + + .mv0-l { + margin-top: 0; + margin-bottom: 0; + } + .mv1-l { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-l { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-l { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-l { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-l { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-l { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-l { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-l { + margin-left: 0; + margin-right: 0; + } + .mh1-l { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-l { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-l { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-l { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-l { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-l { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-l { + margin-left: 16rem; + margin-right: 16rem; + } +} + +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.na1 { margin: -0.25rem; } + +.na2 { margin: -0.5rem; } + +.na3 { margin: -1rem; } + +.na4 { margin: -2rem; } + +.na5 { margin: -4rem; } + +.na6 { margin: -8rem; } + +.na7 { margin: -16rem; } + +.nl1 { margin-left: -0.25rem; } + +.nl2 { margin-left: -0.5rem; } + +.nl3 { margin-left: -1rem; } + +.nl4 { margin-left: -2rem; } + +.nl5 { margin-left: -4rem; } + +.nl6 { margin-left: -8rem; } + +.nl7 { margin-left: -16rem; } + +.nr1 { margin-right: -0.25rem; } + +.nr2 { margin-right: -0.5rem; } + +.nr3 { margin-right: -1rem; } + +.nr4 { margin-right: -2rem; } + +.nr5 { margin-right: -4rem; } + +.nr6 { margin-right: -8rem; } + +.nr7 { margin-right: -16rem; } + +.nb1 { margin-bottom: -0.25rem; } + +.nb2 { margin-bottom: -0.5rem; } + +.nb3 { margin-bottom: -1rem; } + +.nb4 { margin-bottom: -2rem; } + +.nb5 { margin-bottom: -4rem; } + +.nb6 { margin-bottom: -8rem; } + +.nb7 { margin-bottom: -16rem; } + +.nt1 { margin-top: -0.25rem; } + +.nt2 { margin-top: -0.5rem; } + +.nt3 { margin-top: -1rem; } + +.nt4 { margin-top: -2rem; } + +.nt5 { margin-top: -4rem; } + +.nt6 { margin-top: -8rem; } + +.nt7 { margin-top: -16rem; } + +@media screen and (min-width: 30em) { + + .na1-ns { margin: -0.25rem; } + .na2-ns { margin: -0.5rem; } + .na3-ns { margin: -1rem; } + .na4-ns { margin: -2rem; } + .na5-ns { margin: -4rem; } + .na6-ns { margin: -8rem; } + .na7-ns { margin: -16rem; } + + .nl1-ns { margin-left: -0.25rem; } + .nl2-ns { margin-left: -0.5rem; } + .nl3-ns { margin-left: -1rem; } + .nl4-ns { margin-left: -2rem; } + .nl5-ns { margin-left: -4rem; } + .nl6-ns { margin-left: -8rem; } + .nl7-ns { margin-left: -16rem; } + + .nr1-ns { margin-right: -0.25rem; } + .nr2-ns { margin-right: -0.5rem; } + .nr3-ns { margin-right: -1rem; } + .nr4-ns { margin-right: -2rem; } + .nr5-ns { margin-right: -4rem; } + .nr6-ns { margin-right: -8rem; } + .nr7-ns { margin-right: -16rem; } + + .nb1-ns { margin-bottom: -0.25rem; } + .nb2-ns { margin-bottom: -0.5rem; } + .nb3-ns { margin-bottom: -1rem; } + .nb4-ns { margin-bottom: -2rem; } + .nb5-ns { margin-bottom: -4rem; } + .nb6-ns { margin-bottom: -8rem; } + .nb7-ns { margin-bottom: -16rem; } + + .nt1-ns { margin-top: -0.25rem; } + .nt2-ns { margin-top: -0.5rem; } + .nt3-ns { margin-top: -1rem; } + .nt4-ns { margin-top: -2rem; } + .nt5-ns { margin-top: -4rem; } + .nt6-ns { margin-top: -8rem; } + .nt7-ns { margin-top: -16rem; } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .na1-m { margin: -0.25rem; } + .na2-m { margin: -0.5rem; } + .na3-m { margin: -1rem; } + .na4-m { margin: -2rem; } + .na5-m { margin: -4rem; } + .na6-m { margin: -8rem; } + .na7-m { margin: -16rem; } + + .nl1-m { margin-left: -0.25rem; } + .nl2-m { margin-left: -0.5rem; } + .nl3-m { margin-left: -1rem; } + .nl4-m { margin-left: -2rem; } + .nl5-m { margin-left: -4rem; } + .nl6-m { margin-left: -8rem; } + .nl7-m { margin-left: -16rem; } + + .nr1-m { margin-right: -0.25rem; } + .nr2-m { margin-right: -0.5rem; } + .nr3-m { margin-right: -1rem; } + .nr4-m { margin-right: -2rem; } + .nr5-m { margin-right: -4rem; } + .nr6-m { margin-right: -8rem; } + .nr7-m { margin-right: -16rem; } + + .nb1-m { margin-bottom: -0.25rem; } + .nb2-m { margin-bottom: -0.5rem; } + .nb3-m { margin-bottom: -1rem; } + .nb4-m { margin-bottom: -2rem; } + .nb5-m { margin-bottom: -4rem; } + .nb6-m { margin-bottom: -8rem; } + .nb7-m { margin-bottom: -16rem; } + + .nt1-m { margin-top: -0.25rem; } + .nt2-m { margin-top: -0.5rem; } + .nt3-m { margin-top: -1rem; } + .nt4-m { margin-top: -2rem; } + .nt5-m { margin-top: -4rem; } + .nt6-m { margin-top: -8rem; } + .nt7-m { margin-top: -16rem; } + +} + +@media screen and (min-width: 60em) { + .na1-l { margin: -0.25rem; } + .na2-l { margin: -0.5rem; } + .na3-l { margin: -1rem; } + .na4-l { margin: -2rem; } + .na5-l { margin: -4rem; } + .na6-l { margin: -8rem; } + .na7-l { margin: -16rem; } + + .nl1-l { margin-left: -0.25rem; } + .nl2-l { margin-left: -0.5rem; } + .nl3-l { margin-left: -1rem; } + .nl4-l { margin-left: -2rem; } + .nl5-l { margin-left: -4rem; } + .nl6-l { margin-left: -8rem; } + .nl7-l { margin-left: -16rem; } + + .nr1-l { margin-right: -0.25rem; } + .nr2-l { margin-right: -0.5rem; } + .nr3-l { margin-right: -1rem; } + .nr4-l { margin-right: -2rem; } + .nr5-l { margin-right: -4rem; } + .nr6-l { margin-right: -8rem; } + .nr7-l { margin-right: -16rem; } + + .nb1-l { margin-bottom: -0.25rem; } + .nb2-l { margin-bottom: -0.5rem; } + .nb3-l { margin-bottom: -1rem; } + .nb4-l { margin-bottom: -2rem; } + .nb5-l { margin-bottom: -4rem; } + .nb6-l { margin-bottom: -8rem; } + .nb7-l { margin-bottom: -16rem; } + + .nt1-l { margin-top: -0.25rem; } + .nt2-l { margin-top: -0.5rem; } + .nt3-l { margin-top: -1rem; } + .nt4-l { margin-top: -2rem; } + .nt5-l { margin-top: -4rem; } + .nt6-l { margin-top: -8rem; } + .nt7-l { margin-top: -16rem; } +} + +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ + +.collapse { + border-collapse: collapse; + border-spacing: 0; +} + +.striped--light-silver:nth-child(odd) { + background-color: #aaa; +} + +.striped--moon-gray:nth-child(odd) { + background-color: #ccc; +} + +.striped--light-gray:nth-child(odd) { + background-color: #eee; +} + +.striped--near-white:nth-child(odd) { + background-color: #f4f4f4; +} + +.stripe-light:nth-child(odd) { + background-color: rgba(255, 255, 255, .1); +} + +.stripe-dark:nth-child(odd) { + background-color: rgba(0, 0, 0, .1); +} + +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.strike { text-decoration: line-through; } + +.underline { text-decoration: underline; } + +.no-underline { text-decoration: none; } + +@media screen and (min-width: 30em) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media screen and (min-width: 60em) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} + +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tl { text-align: left; } + +.tr { text-align: right; } + +.tc { text-align: center; } + +.tj { text-align: justify; } + +@media screen and (min-width: 30em) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} + +@media screen and (min-width: 60em) { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } +} + +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ttc { text-transform: capitalize; } + +.ttl { text-transform: lowercase; } + +.ttu { text-transform: uppercase; } + +.ttn { text-transform: none; } + +@media screen and (min-width: 30em) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} + +@media screen and (min-width: 60em) { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } +} + +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + 7 = 7th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ + +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ + +.f-6, +.f-headline { + font-size: 6rem; +} + +.f-5, +.f-subheadline { + font-size: 5rem; +} + +/* Type Scale */ + +.f1 { font-size: 3rem; } + +.f2 { font-size: 2.25rem; } + +.f3 { font-size: 1.5rem; } + +.f4 { font-size: 1.25rem; } + +.f5 { font-size: 1rem; } + +.f6 { font-size: .875rem; } + +.f7 { font-size: .75rem; } + +/* Small and hard to read for many people so use with extreme caution */ + +@media screen and (min-width: 30em){ + .f-6-ns, + .f-headline-ns { font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .f-6-m, + .f-headline-m { font-size: 6rem; } + .f-5-m, + .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } +} + +@media screen and (min-width: 60em) { + .f-6-l, + .f-headline-l { + font-size: 6rem; + } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; + } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } +} + +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Measure is limited to ~66 characters */ + +.measure { + max-width: 30em; +} + +/* Measure is limited to ~80 characters */ + +.measure-wide { + max-width: 34em; +} + +/* Measure is limited to ~45 characters */ + +.measure-narrow { + max-width: 20em; +} + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ + +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.small-caps { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; +} + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (min-width: 30em) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 60em) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Equivalent to .overflow-y-scroll */ + +.overflow-container { + overflow-y: scroll; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +.mr-auto { margin-right: auto; } + +.ml-auto { margin-left: auto; } + +@media screen and (min-width: 30em){ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} + +@media screen and (min-width: 60em){ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} + +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ + +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} + +@media screen and (min-width: 30em) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 60em) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ws-normal { white-space: normal; } + +.nowrap { white-space: nowrap; } + +.pre { white-space: pre; } + +@media screen and (min-width: 30em) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} + +@media screen and (min-width: 60em) { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} + +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.v-base { vertical-align: baseline; } + +.v-mid { vertical-align: middle; } + +.v-top { vertical-align: top; } + +.v-btm { vertical-align: bottom; } + +@media screen and (min-width: 30em) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} + +@media screen and (min-width: 60em) { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} + +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + +*/ + +/* + + Dim element on hover by adding the dim class. + +*/ + +.dim { + opacity: 1; + transition: opacity .15s ease-in; +} + +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity .15s ease-in; +} + +.dim:active { + opacity: .8; transition: opacity .15s ease-out; +} + +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ + +.glow { + transition: opacity .15s ease-in; +} + +.glow:hover, +.glow:focus { + opacity: 1; + transition: opacity .15s ease-in; +} + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ + +.hide-child .child { + opacity: 0; + transition: opacity .15s ease-in; +} + +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: opacity .15s ease-in; +} + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ + +.grow { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; +} + +.grow:hover, +.grow:focus { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +.grow:active { + -webkit-transform: scale(.90); + transform: scale(.90); +} + +.grow-large { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; + transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; +} + +.grow-large:hover, +.grow-large:focus { + -webkit-transform: scale(1.2); + transform: scale(1.2); +} + +.grow-large:active { + -webkit-transform: scale(.95); + transform: scale(.95); +} + +/* Add pointer on hover */ + +.pointer:hover { + cursor: pointer; +} + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ + +.shadow-hover { + cursor: pointer; + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover::after { + content: ''; + box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; +} + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ + +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; +} + +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ + +.z-0 { z-index: 0; } + +.z-1 { z-index: 1; } + +.z-2 { z-index: 2; } + +.z-3 { z-index: 3; } + +.z-4 { z-index: 4; } + +.z-5 { z-index: 5; } + +.z-999 { z-index: 999; } + +.z-9999 { z-index: 9999; } + +.z-max { + z-index: 2147483647; +} + +.z-inherit { z-index: inherit; } + +.z-initial { z-index: auto; z-index: initial; } + +.z-unset { z-index: unset; } + +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ + +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; +} + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; +} + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} + +.nested-copy-indent p+p { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.nested-copy-separator p+p { + margin-top: 1.5em; +} + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} + +.nested-links a { + color: #357edd; + transition: color .15s ease-in; +} + +.nested-links a:hover, +.nested-links a:focus { + color: #96ccff; + transition: color .15s ease-in; +} + +/* + + STYLES + + Add custom styles here. + +*/ + +/* Variables */ + +/* Importing here will allow you to override any variables in the modules */ + +/* + + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors + +*/ + +/* + + CUSTOM MEDIA QUERIES + + Media query values can be changed to fit your own content. + There are no magic bullets when it comes to media query width values. + They should be declared in em units - and they should be set to meet + the needs of your content. You can also add additional media queries, + or remove some of the existing ones. + + These media queries can be referenced like so: + + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } + + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } + + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } + +*/ + +/* Media Queries */ + +/* Debugging */ + +/* @import 'tachyons/src/_debug-children'; +@import 'tachyons/src/_debug-grid'; */ + +/* Uncomment out the line below to help debug layout issues */ + +/* @import 'tachyons/src/_debug'; */ + +pre, .pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +pre code { + display: block; + padding: 1.5em 1.5em; + white-space: pre; + font-size: .875rem; + line-height: 2; + +} + +pre { + background-color: #222; + color: #ddd; + white-space: pre; + + -webkit-hyphens: none; + + -ms-hyphens: none; + + hyphens: none; + position: relative; +} + +/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */ + +.pagination { + margin: 3rem 0; +} + +.pagination li { + display: inline-block; + margin-right: .375rem; + font-size: .875rem; + margin-bottom: 2.5em; +} + +.pagination li a { + padding: .5rem .625rem; + background-color: white; + color: #333; + border: 1px solid #ddd; + border-radius: 3px; + text-decoration: none; +} + +.pagination li.disabled { + display: none; +} + +.pagination li.active a:link, +.pagination li.active a:active, +.pagination li.active a:visited { + background-color: #ddd; +} + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow { + fill: #BABABA; +} + +.new-window { + opacity: 0; + display: inline-block; + vertical-align: top; +} + +.link-transition:hover .new-window{ + opacity: 1; +} + +.facebook:hover { + fill: #3b5998; +} + +.twitter:hover { + fill: #1da1f2; +} + +.instagram:hover { + fill: #e1306c; +} + +.youtube:hover { + fill: #cd201f; +} + +.github:hover { + fill: #6cc644; +} + +.gitlab:hover { + fill: #FC6D26; +} + +.keybase:hover { + fill: #3d76ff; +} + +.linkedin:hover { + fill: #0077b5 +} + +.medium:hover { + fill: #0077b5 +} + +.mastodon:hover { + fill: #3088d4; +} + +.slack:hover { + fill: #E01E5A; +} + +.stackoverflow:hover { + fill: #f48024; +} + +/* Put your custom styles here and run `npm start` from the "src" directory on */ + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.lh-copy blockquote { + display: block; + font-size: .875em; + margin-left: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; + border-left: 4px solid #ccc; + padding-left: 1rem; + +} + +a{ + word-wrap: break-word; +} diff --git a/public/dist/css/app.e6e75cdafe2e909dacfabeb26857f994.css b/public/dist/css/app.e6e75cdafe2e909dacfabeb26857f994.css new file mode 100644 index 0000000..51a05bc --- /dev/null +++ b/public/dist/css/app.e6e75cdafe2e909dacfabeb26857f994.css @@ -0,0 +1,5872 @@ +/*! TACHYONS v4.9.1 | http://tachyons.io */ + +/* + * + * ________ ______ + * ___ __/_____ _________ /______ ______________________ + * __ / _ __ `/ ___/_ __ \_ / / / __ \_ __ \_ ___/ + * _ / / /_/ // /__ _ / / / /_/ // /_/ / / / /(__ ) + * /_/ \__,_/ \___/ /_/ /_/_\__, / \____//_/ /_//____/ + * /____/ + * + * TABLE OF CONTENTS + * + * 1. External Library Includes + * - Normalize.css | http://normalize.css.github.io + * 2. Tachyons Modules + * 3. Variables + * - Media Queries + * - Colors + * 4. Debugging + * - Debug all + * - Debug children + * + */ + +/* External Library Includes */ + +/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} + +/* Modules */ + +/* + + BOX SIZING + +*/ + +html, +body, +div, +article, +aside, +section, +main, +nav, +footer, +header, +form, +fieldset, +legend, +pre, +code, +a, +h1,h2,h3,h4,h5,h6, +p, +ul, +ol, +li, +dl, +dt, +dd, +blockquote, +figcaption, +figure, +textarea, +table, +td, +th, +tr, +input[type="email"], +input[type="number"], +input[type="password"], +input[type="tel"], +input[type="text"], +input[type="url"], +.border-box { + box-sizing: border-box; +} + +/* + + ASPECT RATIOS + +*/ + +/* This is for fluid media that is embedded from third party sites like youtube, vimeo etc. + * Wrap the outer element in aspect-ratio and then extend it with the desired ratio i.e + * Make sure there are no height and width attributes on the embedded media. + * Adapted from: https://github.com/suitcss/components-flex-embed + * + * Example: + * + *
+ * + *
+ * + * */ + +.aspect-ratio { + height: 0; + position: relative; +} + +.aspect-ratio--16x9 { padding-bottom: 56.25%; } + +.aspect-ratio--9x16 { padding-bottom: 177.77%; } + +.aspect-ratio--4x3 { padding-bottom: 75%; } + +.aspect-ratio--3x4 { padding-bottom: 133.33%; } + +.aspect-ratio--6x4 { padding-bottom: 66.6%; } + +.aspect-ratio--4x6 { padding-bottom: 150%; } + +.aspect-ratio--8x5 { padding-bottom: 62.5%; } + +.aspect-ratio--5x8 { padding-bottom: 160%; } + +.aspect-ratio--7x5 { padding-bottom: 71.42%; } + +.aspect-ratio--5x7 { padding-bottom: 140%; } + +.aspect-ratio--1x1 { padding-bottom: 100%; } + +.aspect-ratio--object { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; +} + +@media screen and (min-width: 30em){ + .aspect-ratio-ns { + height: 0; + position: relative; + } + .aspect-ratio--16x9-ns { padding-bottom: 56.25%; } + .aspect-ratio--9x16-ns { padding-bottom: 177.77%; } + .aspect-ratio--4x3-ns { padding-bottom: 75%; } + .aspect-ratio--3x4-ns { padding-bottom: 133.33%; } + .aspect-ratio--6x4-ns { padding-bottom: 66.6%; } + .aspect-ratio--4x6-ns { padding-bottom: 150%; } + .aspect-ratio--8x5-ns { padding-bottom: 62.5%; } + .aspect-ratio--5x8-ns { padding-bottom: 160%; } + .aspect-ratio--7x5-ns { padding-bottom: 71.42%; } + .aspect-ratio--5x7-ns { padding-bottom: 140%; } + .aspect-ratio--1x1-ns { padding-bottom: 100%; } + .aspect-ratio--object-ns { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .aspect-ratio-m { + height: 0; + position: relative; + } + .aspect-ratio--16x9-m { padding-bottom: 56.25%; } + .aspect-ratio--9x16-m { padding-bottom: 177.77%; } + .aspect-ratio--4x3-m { padding-bottom: 75%; } + .aspect-ratio--3x4-m { padding-bottom: 133.33%; } + .aspect-ratio--6x4-m { padding-bottom: 66.6%; } + .aspect-ratio--4x6-m { padding-bottom: 150%; } + .aspect-ratio--8x5-m { padding-bottom: 62.5%; } + .aspect-ratio--5x8-m { padding-bottom: 160%; } + .aspect-ratio--7x5-m { padding-bottom: 71.42%; } + .aspect-ratio--5x7-m { padding-bottom: 140%; } + .aspect-ratio--1x1-m { padding-bottom: 100%; } + .aspect-ratio--object-m { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +@media screen and (min-width: 60em){ + .aspect-ratio-l { + height: 0; + position: relative; + } + .aspect-ratio--16x9-l { padding-bottom: 56.25%; } + .aspect-ratio--9x16-l { padding-bottom: 177.77%; } + .aspect-ratio--4x3-l { padding-bottom: 75%; } + .aspect-ratio--3x4-l { padding-bottom: 133.33%; } + .aspect-ratio--6x4-l { padding-bottom: 66.6%; } + .aspect-ratio--4x6-l { padding-bottom: 150%; } + .aspect-ratio--8x5-l { padding-bottom: 62.5%; } + .aspect-ratio--5x8-l { padding-bottom: 160%; } + .aspect-ratio--7x5-l { padding-bottom: 71.42%; } + .aspect-ratio--5x7-l { padding-bottom: 140%; } + .aspect-ratio--1x1-l { padding-bottom: 100%; } + .aspect-ratio--object-l { + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 100; + } +} + +/* + + IMAGES + Docs: http://tachyons.io/docs/elements/images/ + +*/ + +/* Responsive images! */ + +img { max-width: 100%; } + +/* + + BACKGROUND SIZE + Docs: http://tachyons.io/docs/themes/background-size/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Often used in combination with background image set as an inline style + on an html element. +*/ + +.cover { background-size: cover!important; } + +.contain { background-size: contain!important; } + +@media screen and (min-width: 30em) { + .cover-ns { background-size: cover!important; } + .contain-ns { background-size: contain!important; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cover-m { background-size: cover!important; } + .contain-m { background-size: contain!important; } +} + +@media screen and (min-width: 60em) { + .cover-l { background-size: cover!important; } + .contain-l { background-size: contain!important; } +} + +/* + + BACKGROUND POSITION + + Base: + bg = background + + Modifiers: + -center = center center + -top = top center + -right = center right + -bottom = bottom center + -left = center left + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.bg-center { + background-repeat: no-repeat; + background-position: center center; +} + +.bg-top { + background-repeat: no-repeat; + background-position: top center; +} + +.bg-right { + background-repeat: no-repeat; + background-position: center right; +} + +.bg-bottom { + background-repeat: no-repeat; + background-position: bottom center; +} + +.bg-left { + background-repeat: no-repeat; + background-position: center left; +} + +@media screen and (min-width: 30em) { + .bg-center-ns { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-ns { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-ns { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-ns { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-ns { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bg-center-m { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-m { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-m { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-m { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-m { + background-repeat: no-repeat; + background-position: center left; + } +} + +@media screen and (min-width: 60em) { + .bg-center-l { + background-repeat: no-repeat; + background-position: center center; + } + + .bg-top-l { + background-repeat: no-repeat; + background-position: top center; + } + + .bg-right-l { + background-repeat: no-repeat; + background-position: center right; + } + + .bg-bottom-l { + background-repeat: no-repeat; + background-position: bottom center; + } + + .bg-left-l { + background-repeat: no-repeat; + background-position: center left; + } +} + +/* + + OUTLINES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.outline { outline: 1px solid; } + +.outline-transparent { outline: 1px solid transparent; } + +.outline-0 { outline: 0; } + +@media screen and (min-width: 30em) { + .outline-ns { outline: 1px solid; } + .outline-transparent-ns { outline: 1px solid transparent; } + .outline-0-ns { outline: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .outline-m { outline: 1px solid; } + .outline-transparent-m { outline: 1px solid transparent; } + .outline-0-m { outline: 0; } +} + +@media screen and (min-width: 60em) { + .outline-l { outline: 1px solid; } + .outline-transparent-l { outline: 1px solid transparent; } + .outline-0-l { outline: 0; } +} + +/* + + BORDERS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + b = border + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ba { border-style: solid; border-width: 1px; } + +.bt { border-top-style: solid; border-top-width: 1px; } + +.br { border-right-style: solid; border-right-width: 1px; } + +.bb { border-bottom-style: solid; border-bottom-width: 1px; } + +.bl { border-left-style: solid; border-left-width: 1px; } + +.bn { border-style: none; border-width: 0; } + +@media screen and (min-width: 30em) { + .ba-ns { border-style: solid; border-width: 1px; } + .bt-ns { border-top-style: solid; border-top-width: 1px; } + .br-ns { border-right-style: solid; border-right-width: 1px; } + .bb-ns { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-ns { border-left-style: solid; border-left-width: 1px; } + .bn-ns { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ba-m { border-style: solid; border-width: 1px; } + .bt-m { border-top-style: solid; border-top-width: 1px; } + .br-m { border-right-style: solid; border-right-width: 1px; } + .bb-m { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-m { border-left-style: solid; border-left-width: 1px; } + .bn-m { border-style: none; border-width: 0; } +} + +@media screen and (min-width: 60em) { + .ba-l { border-style: solid; border-width: 1px; } + .bt-l { border-top-style: solid; border-top-width: 1px; } + .br-l { border-right-style: solid; border-right-width: 1px; } + .bb-l { border-bottom-style: solid; border-bottom-width: 1px; } + .bl-l { border-left-style: solid; border-left-width: 1px; } + .bn-l { border-style: none; border-width: 0; } +} + +/* + + BORDER COLORS + Docs: http://tachyons.io/docs/themes/borders/ + + Border colors can be used to extend the base + border classes ba,bt,bb,br,bl found in the _borders.css file. + + The base border class by default will set the color of the border + to that of the current text color. These classes are for the cases + where you desire for the text and border colors to be different. + + Base: + b = border + + Modifiers: + --color-name = each color variable name is also a border color name + +*/ + +.b--black { border-color: #000; } + +.b--near-black { border-color: #111; } + +.b--dark-gray { border-color: #333; } + +.b--mid-gray { border-color: #555; } + +.b--gray { border-color: #777; } + +.b--silver { border-color: #999; } + +.b--light-silver { border-color: #aaa; } + +.b--moon-gray { border-color: #ccc; } + +.b--light-gray { border-color: #eee; } + +.b--near-white { border-color: #f4f4f4; } + +.b--white { border-color: #fff; } + +.b--white-90 { border-color: rgba(255, 255, 255, .9); } + +.b--white-80 { border-color: rgba(255, 255, 255, .8); } + +.b--white-70 { border-color: rgba(255, 255, 255, .7); } + +.b--white-60 { border-color: rgba(255, 255, 255, .6); } + +.b--white-50 { border-color: rgba(255, 255, 255, .5); } + +.b--white-40 { border-color: rgba(255, 255, 255, .4); } + +.b--white-30 { border-color: rgba(255, 255, 255, .3); } + +.b--white-20 { border-color: rgba(255, 255, 255, .2); } + +.b--white-10 { border-color: rgba(255, 255, 255, .1); } + +.b--white-05 { border-color: rgba(255, 255, 255, .05); } + +.b--white-025 { border-color: rgba(255, 255, 255, .025); } + +.b--white-0125 { border-color: rgba(255, 255, 255, .0125); } + +.b--black-90 { border-color: rgba(0, 0, 0, .9); } + +.b--black-80 { border-color: rgba(0, 0, 0, .8); } + +.b--black-70 { border-color: rgba(0, 0, 0, .7); } + +.b--black-60 { border-color: rgba(0, 0, 0, .6); } + +.b--black-50 { border-color: rgba(0, 0, 0, .5); } + +.b--black-40 { border-color: rgba(0, 0, 0, .4); } + +.b--black-30 { border-color: rgba(0, 0, 0, .3); } + +.b--black-20 { border-color: rgba(0, 0, 0, .2); } + +.b--black-10 { border-color: rgba(0, 0, 0, .1); } + +.b--black-05 { border-color: rgba(0, 0, 0, .05); } + +.b--black-025 { border-color: rgba(0, 0, 0, .025); } + +.b--black-0125 { border-color: rgba(0, 0, 0, .0125); } + +.b--dark-red { border-color: #e7040f; } + +.b--red { border-color: #ff4136; } + +.b--light-red { border-color: #ff725c; } + +.b--orange { border-color: #ff6300; } + +.b--gold { border-color: #ffb700; } + +.b--yellow { border-color: #ffd700; } + +.b--light-yellow { border-color: #fbf1a9; } + +.b--purple { border-color: #5e2ca5; } + +.b--light-purple { border-color: #a463f2; } + +.b--dark-pink { border-color: #d5008f; } + +.b--hot-pink { border-color: #ff41b4; } + +.b--pink { border-color: #ff80cc; } + +.b--light-pink { border-color: #ffa3d7; } + +.b--dark-green { border-color: #137752; } + +.b--green { border-color: #19a974; } + +.b--light-green { border-color: #9eebcf; } + +.b--navy { border-color: #001b44; } + +.b--dark-blue { border-color: #00449e; } + +.b--blue { border-color: #357edd; } + +.b--light-blue { border-color: #96ccff; } + +.b--lightest-blue { border-color: #cdecff; } + +.b--washed-blue { border-color: #f6fffe; } + +.b--washed-green { border-color: #e8fdf5; } + +.b--washed-yellow { border-color: #fffceb; } + +.b--washed-red { border-color: #ffdfdf; } + +.b--transparent { border-color: transparent; } + +.b--inherit { border-color: inherit; } + +/* + + BORDER RADIUS + Docs: http://tachyons.io/docs/themes/border-radius/ + + Base: + br = border-radius + + Modifiers: + 0 = 0/none + 1 = 1st step in scale + 2 = 2nd step in scale + 3 = 3rd step in scale + 4 = 4th step in scale + + Literal values: + -100 = 100% + -pill = 9999px + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.br0 { border-radius: 0; } + +.br1 { border-radius: .125rem; } + +.br2 { border-radius: .25rem; } + +.br3 { border-radius: .5rem; } + +.br4 { border-radius: 1rem; } + +.br-100 { border-radius: 100%; } + +.br-pill { border-radius: 9999px; } + +.br--bottom { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + +.br--top { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + +.br--right { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + +.br--left { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + +@media screen and (min-width: 30em) { + .br0-ns { border-radius: 0; } + .br1-ns { border-radius: .125rem; } + .br2-ns { border-radius: .25rem; } + .br3-ns { border-radius: .5rem; } + .br4-ns { border-radius: 1rem; } + .br-100-ns { border-radius: 100%; } + .br-pill-ns { border-radius: 9999px; } + .br--bottom-ns { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-ns { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-ns { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-ns { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .br0-m { border-radius: 0; } + .br1-m { border-radius: .125rem; } + .br2-m { border-radius: .25rem; } + .br3-m { border-radius: .5rem; } + .br4-m { border-radius: 1rem; } + .br-100-m { border-radius: 100%; } + .br-pill-m { border-radius: 9999px; } + .br--bottom-m { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-m { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-m { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-m { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +@media screen and (min-width: 60em) { + .br0-l { border-radius: 0; } + .br1-l { border-radius: .125rem; } + .br2-l { border-radius: .25rem; } + .br3-l { border-radius: .5rem; } + .br4-l { border-radius: 1rem; } + .br-100-l { border-radius: 100%; } + .br-pill-l { border-radius: 9999px; } + .br--bottom-l { + border-top-left-radius: 0; + border-top-right-radius: 0; + } + .br--top-l { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + } + .br--right-l { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + .br--left-l { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } +} + +/* + + BORDER STYLES + Docs: http://tachyons.io/docs/themes/borders/ + + Depends on base border module in _borders.css + + Base: + b = border-style + + Modifiers: + --none = none + --dotted = dotted + --dashed = dashed + --solid = solid + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.b--dotted { border-style: dotted; } + +.b--dashed { border-style: dashed; } + +.b--solid { border-style: solid; } + +.b--none { border-style: none; } + +@media screen and (min-width: 30em) { + .b--dotted-ns { border-style: dotted; } + .b--dashed-ns { border-style: dashed; } + .b--solid-ns { border-style: solid; } + .b--none-ns { border-style: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .b--dotted-m { border-style: dotted; } + .b--dashed-m { border-style: dashed; } + .b--solid-m { border-style: solid; } + .b--none-m { border-style: none; } +} + +@media screen and (min-width: 60em) { + .b--dotted-l { border-style: dotted; } + .b--dashed-l { border-style: dashed; } + .b--solid-l { border-style: solid; } + .b--none-l { border-style: none; } +} + +/* + + BORDER WIDTHS + Docs: http://tachyons.io/docs/themes/borders/ + + Base: + bw = border-width + + Modifiers: + 0 = 0 width border + 1 = 1st step in border-width scale + 2 = 2nd step in border-width scale + 3 = 3rd step in border-width scale + 4 = 4th step in border-width scale + 5 = 5th step in border-width scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.bw0 { border-width: 0; } + +.bw1 { border-width: .125rem; } + +.bw2 { border-width: .25rem; } + +.bw3 { border-width: .5rem; } + +.bw4 { border-width: 1rem; } + +.bw5 { border-width: 2rem; } + +/* Resets */ + +.bt-0 { border-top-width: 0; } + +.br-0 { border-right-width: 0; } + +.bb-0 { border-bottom-width: 0; } + +.bl-0 { border-left-width: 0; } + +@media screen and (min-width: 30em) { + .bw0-ns { border-width: 0; } + .bw1-ns { border-width: .125rem; } + .bw2-ns { border-width: .25rem; } + .bw3-ns { border-width: .5rem; } + .bw4-ns { border-width: 1rem; } + .bw5-ns { border-width: 2rem; } + .bt-0-ns { border-top-width: 0; } + .br-0-ns { border-right-width: 0; } + .bb-0-ns { border-bottom-width: 0; } + .bl-0-ns { border-left-width: 0; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .bw0-m { border-width: 0; } + .bw1-m { border-width: .125rem; } + .bw2-m { border-width: .25rem; } + .bw3-m { border-width: .5rem; } + .bw4-m { border-width: 1rem; } + .bw5-m { border-width: 2rem; } + .bt-0-m { border-top-width: 0; } + .br-0-m { border-right-width: 0; } + .bb-0-m { border-bottom-width: 0; } + .bl-0-m { border-left-width: 0; } +} + +@media screen and (min-width: 60em) { + .bw0-l { border-width: 0; } + .bw1-l { border-width: .125rem; } + .bw2-l { border-width: .25rem; } + .bw3-l { border-width: .5rem; } + .bw4-l { border-width: 1rem; } + .bw5-l { border-width: 2rem; } + .bt-0-l { border-top-width: 0; } + .br-0-l { border-right-width: 0; } + .bb-0-l { border-bottom-width: 0; } + .bl-0-l { border-left-width: 0; } +} + +/* + + BOX-SHADOW + Docs: http://tachyons.io/docs/themes/box-shadow/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.shadow-1 { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-2 { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + +.shadow-3 { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + +.shadow-4 { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + +.shadow-5 { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } + +@media screen and (min-width: 30em) { + .shadow-1-ns { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-ns { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-ns { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-ns { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-ns { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .shadow-1-m { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-m { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-m { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-m { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-m { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +@media screen and (min-width: 60em) { + .shadow-1-l { box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, .2); } + .shadow-2-l { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, .2); } + .shadow-3-l { box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2); } + .shadow-4-l { box-shadow: 2px 2px 8px 0px rgba(0, 0, 0, .2); } + .shadow-5-l { box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, .2); } +} + +/* + + CODE + +*/ + +.pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +/* + + COORDINATES + Docs: http://tachyons.io/docs/layout/position/ + + Use in combination with the position module. + + Base: + top + bottom + right + left + + Modifiers: + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + --1 = literal value -1 + --2 = literal value -2 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.top-0 { top: 0; } + +.right-0 { right: 0; } + +.bottom-0 { bottom: 0; } + +.left-0 { left: 0; } + +.top-1 { top: 1rem; } + +.right-1 { right: 1rem; } + +.bottom-1 { bottom: 1rem; } + +.left-1 { left: 1rem; } + +.top-2 { top: 2rem; } + +.right-2 { right: 2rem; } + +.bottom-2 { bottom: 2rem; } + +.left-2 { left: 2rem; } + +.top--1 { top: -1rem; } + +.right--1 { right: -1rem; } + +.bottom--1 { bottom: -1rem; } + +.left--1 { left: -1rem; } + +.top--2 { top: -2rem; } + +.right--2 { right: -2rem; } + +.bottom--2 { bottom: -2rem; } + +.left--2 { left: -2rem; } + +.absolute--fill { + top: 0; + right: 0; + bottom: 0; + left: 0; +} + +@media screen and (min-width: 30em) { + .top-0-ns { top: 0; } + .left-0-ns { left: 0; } + .right-0-ns { right: 0; } + .bottom-0-ns { bottom: 0; } + .top-1-ns { top: 1rem; } + .left-1-ns { left: 1rem; } + .right-1-ns { right: 1rem; } + .bottom-1-ns { bottom: 1rem; } + .top-2-ns { top: 2rem; } + .left-2-ns { left: 2rem; } + .right-2-ns { right: 2rem; } + .bottom-2-ns { bottom: 2rem; } + .top--1-ns { top: -1rem; } + .right--1-ns { right: -1rem; } + .bottom--1-ns { bottom: -1rem; } + .left--1-ns { left: -1rem; } + .top--2-ns { top: -2rem; } + .right--2-ns { right: -2rem; } + .bottom--2-ns { bottom: -2rem; } + .left--2-ns { left: -2rem; } + .absolute--fill-ns { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .top-0-m { top: 0; } + .left-0-m { left: 0; } + .right-0-m { right: 0; } + .bottom-0-m { bottom: 0; } + .top-1-m { top: 1rem; } + .left-1-m { left: 1rem; } + .right-1-m { right: 1rem; } + .bottom-1-m { bottom: 1rem; } + .top-2-m { top: 2rem; } + .left-2-m { left: 2rem; } + .right-2-m { right: 2rem; } + .bottom-2-m { bottom: 2rem; } + .top--1-m { top: -1rem; } + .right--1-m { right: -1rem; } + .bottom--1-m { bottom: -1rem; } + .left--1-m { left: -1rem; } + .top--2-m { top: -2rem; } + .right--2-m { right: -2rem; } + .bottom--2-m { bottom: -2rem; } + .left--2-m { left: -2rem; } + .absolute--fill-m { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +@media screen and (min-width: 60em) { + .top-0-l { top: 0; } + .left-0-l { left: 0; } + .right-0-l { right: 0; } + .bottom-0-l { bottom: 0; } + .top-1-l { top: 1rem; } + .left-1-l { left: 1rem; } + .right-1-l { right: 1rem; } + .bottom-1-l { bottom: 1rem; } + .top-2-l { top: 2rem; } + .left-2-l { left: 2rem; } + .right-2-l { right: 2rem; } + .bottom-2-l { bottom: 2rem; } + .top--1-l { top: -1rem; } + .right--1-l { right: -1rem; } + .bottom--1-l { bottom: -1rem; } + .left--1-l { left: -1rem; } + .top--2-l { top: -2rem; } + .right--2-l { right: -2rem; } + .bottom--2-l { bottom: -2rem; } + .left--2-l { left: -2rem; } + .absolute--fill-l { + top: 0; + right: 0; + bottom: 0; + left: 0; + } +} + +/* + + CLEARFIX + http://tachyons.io/docs/layout/clearfix/ + +*/ + +/* Nicolas Gallaghers Clearfix solution + Ref: http://nicolasgallagher.com/micro-clearfix-hack/ */ + +.cf:before, +.cf:after { content: " "; display: table; } + +.cf:after { clear: both; } + +.cf { *zoom: 1; } + +.cl { clear: left; } + +.cr { clear: right; } + +.cb { clear: both; } + +.cn { clear: none; } + +@media screen and (min-width: 30em) { + .cl-ns { clear: left; } + .cr-ns { clear: right; } + .cb-ns { clear: both; } + .cn-ns { clear: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .cl-m { clear: left; } + .cr-m { clear: right; } + .cb-m { clear: both; } + .cn-m { clear: none; } +} + +@media screen and (min-width: 60em) { + .cl-l { clear: left; } + .cr-l { clear: right; } + .cb-l { clear: both; } + .cn-l { clear: none; } +} + +/* + + DISPLAY + Docs: http://tachyons.io/docs/layout/display + + Base: + d = display + + Modifiers: + n = none + b = block + ib = inline-block + it = inline-table + t = table + tc = table-cell + t-row = table-row + t-columm = table-column + t-column-group = table-column-group + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.dn { display: none; } + +.di { display: inline; } + +.db { display: block; } + +.dib { display: inline-block; } + +.dit { display: inline-table; } + +.dt { display: table; } + +.dtc { display: table-cell; } + +.dt-row { display: table-row; } + +.dt-row-group { display: table-row-group; } + +.dt-column { display: table-column; } + +.dt-column-group { display: table-column-group; } + +/* + This will set table to full width and then + all cells will be equal width +*/ + +.dt--fixed { + table-layout: fixed; + width: 100%; +} + +@media screen and (min-width: 30em) { + .dn-ns { display: none; } + .di-ns { display: inline; } + .db-ns { display: block; } + .dib-ns { display: inline-block; } + .dit-ns { display: inline-table; } + .dt-ns { display: table; } + .dtc-ns { display: table-cell; } + .dt-row-ns { display: table-row; } + .dt-row-group-ns { display: table-row-group; } + .dt-column-ns { display: table-column; } + .dt-column-group-ns { display: table-column-group; } + + .dt--fixed-ns { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .dn-m { display: none; } + .di-m { display: inline; } + .db-m { display: block; } + .dib-m { display: inline-block; } + .dit-m { display: inline-table; } + .dt-m { display: table; } + .dtc-m { display: table-cell; } + .dt-row-m { display: table-row; } + .dt-row-group-m { display: table-row-group; } + .dt-column-m { display: table-column; } + .dt-column-group-m { display: table-column-group; } + + .dt--fixed-m { + table-layout: fixed; + width: 100%; + } +} + +@media screen and (min-width: 60em) { + .dn-l { display: none; } + .di-l { display: inline; } + .db-l { display: block; } + .dib-l { display: inline-block; } + .dit-l { display: inline-table; } + .dt-l { display: table; } + .dtc-l { display: table-cell; } + .dt-row-l { display: table-row; } + .dt-row-group-l { display: table-row-group; } + .dt-column-l { display: table-column; } + .dt-column-group-l { display: table-column-group; } + + .dt--fixed-l { + table-layout: fixed; + width: 100%; + } +} + +/* + + FLEXBOX + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.flex { display: -webkit-box; display: -ms-flexbox; display: flex; } + +.inline-flex { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + +/* 1. Fix for Chrome 44 bug. + * https://code.google.com/p/chromium/issues/detail?id=506893 */ + +.flex-auto { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ +} + +.flex-none { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + +.flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + +.flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + +.flex-wrap { -ms-flex-wrap: wrap; flex-wrap: wrap; } + +.flex-nowrap { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + +.flex-wrap-reverse { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + +.flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + +.flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + +.items-start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + +.items-end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + +.items-center { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + +.items-baseline { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + +.items-stretch { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + +.self-start { -ms-flex-item-align: start; align-self: flex-start; } + +.self-end { -ms-flex-item-align: end; align-self: flex-end; } + +.self-center { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + +.self-baseline { -ms-flex-item-align: baseline; align-self: baseline; } + +.self-stretch { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + +.justify-start { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + +.justify-end { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + +.justify-center { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + +.justify-between { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + +.justify-around { -ms-flex-pack: distribute; justify-content: space-around; } + +.content-start { -ms-flex-line-pack: start; align-content: flex-start; } + +.content-end { -ms-flex-line-pack: end; align-content: flex-end; } + +.content-center { -ms-flex-line-pack: center; align-content: center; } + +.content-between { -ms-flex-line-pack: justify; align-content: space-between; } + +.content-around { -ms-flex-line-pack: distribute; align-content: space-around; } + +.content-stretch { -ms-flex-line-pack: stretch; align-content: stretch; } + +.order-0 { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + +.order-1 { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + +.order-2 { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + +.order-3 { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + +.order-4 { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + +.order-5 { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + +.order-6 { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + +.order-7 { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + +.order-8 { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + +.order-last { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + +.flex-grow-0 { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + +.flex-grow-1 { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + +.flex-shrink-0 { -ms-flex-negative: 0; flex-shrink: 0; } + +.flex-shrink-1 { -ms-flex-negative: 1; flex-shrink: 1; } + +@media screen and (min-width: 30em) { + .flex-ns { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-ns { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-ns { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-ns { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-ns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-ns { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-ns { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-ns { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-ns { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-ns { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-ns { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-ns { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-ns { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-ns { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-ns { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-ns { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-ns { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-ns { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-ns { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-ns { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-ns { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-ns { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-ns { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-ns { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-ns { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-ns { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-ns { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-ns { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-ns { -ms-flex-line-pack: center; align-content: center; } + .content-between-ns { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-ns { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-ns { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-ns { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-ns { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-ns { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-ns { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-ns { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-ns { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-ns { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-ns { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-ns { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-ns { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-ns { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-ns { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-ns { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-ns { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .flex-m { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-m { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-m { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-m { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-m { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-m { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-m { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-m { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-m { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-m { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-m { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + .items-start-m { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-m { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-m { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-m { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-m { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-m { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-m { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-m { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-m { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-m { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-m { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-m { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-m { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-m { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-m { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-m { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-m { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-m { -ms-flex-line-pack: center; align-content: center; } + .content-between-m { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-m { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-m { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-m { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-m { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-m { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-m { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-m { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-m { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-m { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-m { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-m { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-m { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-m { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-m { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-m { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-m { -ms-flex-negative: 1; flex-shrink: 1; } +} + +@media screen and (min-width: 60em) { + .flex-l { display: -webkit-box; display: -ms-flexbox; display: flex; } + .inline-flex-l { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } + .flex-auto-l { + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + min-width: 0; /* 1 */ + min-height: 0; /* 1 */ + } + .flex-none-l { -webkit-box-flex: 0; -ms-flex: none; flex: none; } + .flex-column-l { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } + .flex-row-l { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } + .flex-wrap-l { -ms-flex-wrap: wrap; flex-wrap: wrap; } + .flex-nowrap-l { -ms-flex-wrap: nowrap; flex-wrap: nowrap; } + .flex-wrap-reverse-l { -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } + .flex-column-reverse-l { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } + .flex-row-reverse-l { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; } + + .items-start-l { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } + .items-end-l { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } + .items-center-l { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } + .items-baseline-l { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } + .items-stretch-l { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } + + .self-start-l { -ms-flex-item-align: start; align-self: flex-start; } + .self-end-l { -ms-flex-item-align: end; align-self: flex-end; } + .self-center-l { -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } + .self-baseline-l { -ms-flex-item-align: baseline; align-self: baseline; } + .self-stretch-l { -ms-flex-item-align: stretch; -ms-grid-row-align: stretch; align-self: stretch; } + + .justify-start-l { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } + .justify-end-l { -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } + .justify-center-l { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } + .justify-between-l { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } + .justify-around-l { -ms-flex-pack: distribute; justify-content: space-around; } + + .content-start-l { -ms-flex-line-pack: start; align-content: flex-start; } + .content-end-l { -ms-flex-line-pack: end; align-content: flex-end; } + .content-center-l { -ms-flex-line-pack: center; align-content: center; } + .content-between-l { -ms-flex-line-pack: justify; align-content: space-between; } + .content-around-l { -ms-flex-line-pack: distribute; align-content: space-around; } + .content-stretch-l { -ms-flex-line-pack: stretch; align-content: stretch; } + + .order-0-l { -webkit-box-ordinal-group: 1; -ms-flex-order: 0; order: 0; } + .order-1-l { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } + .order-2-l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } + .order-3-l { -webkit-box-ordinal-group: 4; -ms-flex-order: 3; order: 3; } + .order-4-l { -webkit-box-ordinal-group: 5; -ms-flex-order: 4; order: 4; } + .order-5-l { -webkit-box-ordinal-group: 6; -ms-flex-order: 5; order: 5; } + .order-6-l { -webkit-box-ordinal-group: 7; -ms-flex-order: 6; order: 6; } + .order-7-l { -webkit-box-ordinal-group: 8; -ms-flex-order: 7; order: 7; } + .order-8-l { -webkit-box-ordinal-group: 9; -ms-flex-order: 8; order: 8; } + .order-last-l { -webkit-box-ordinal-group: 100000; -ms-flex-order: 99999; order: 99999; } + + .flex-grow-0-l { -webkit-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } + .flex-grow-1-l { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } + + .flex-shrink-0-l { -ms-flex-negative: 0; flex-shrink: 0; } + .flex-shrink-1-l { -ms-flex-negative: 1; flex-shrink: 1; } +} + +/* + + FLOATS + http://tachyons.io/docs/layout/floats/ + + 1. Floated elements are automatically rendered as block level elements. + Setting floats to display inline will fix the double margin bug in + ie6. You know... just in case. + + 2. Don't forget to clearfix your floats with .cf + + Base: + f = float + + Modifiers: + l = left + r = right + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.fl { float: left; _display: inline; } + +.fr { float: right; _display: inline; } + +.fn { float: none; } + +@media screen and (min-width: 30em) { + .fl-ns { float: left; _display: inline; } + .fr-ns { float: right; _display: inline; } + .fn-ns { float: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .fl-m { float: left; _display: inline; } + .fr-m { float: right; _display: inline; } + .fn-m { float: none; } +} + +@media screen and (min-width: 60em) { + .fl-l { float: left; _display: inline; } + .fr-l { float: right; _display: inline; } + .fn-l { float: none; } +} + +/* + + FONT FAMILY GROUPS + Docs: http://tachyons.io/docs/typography/font-family/ + +*/ + +.sans-serif { + font-family: -apple-system, BlinkMacSystemFont, + 'avenir next', avenir, + 'helvetica neue', helvetica, + ubuntu, + roboto, noto, + 'segoe ui', arial, + sans-serif; +} + +.serif { + font-family: georgia, + times, + serif; +} + +.system-sans-serif { + font-family: sans-serif; +} + +.system-serif { + font-family: serif; +} + +/* Monospaced Typefaces (for code) */ + +/* From http://cssfontstack.com */ + +code, .code { + font-family: Consolas, + monaco, + monospace; +} + +.courier { + font-family: 'Courier Next', + courier, + monospace; +} + +/* Sans-Serif Typefaces */ + +.helvetica { + font-family: 'helvetica neue', helvetica, + sans-serif; +} + +.avenir { + font-family: 'avenir next', avenir, + sans-serif; +} + +/* Serif Typefaces */ + +.athelas { + font-family: athelas, + georgia, + serif; +} + +.georgia { + font-family: georgia, + serif; +} + +.times { + font-family: times, + serif; +} + +.bodoni { + font-family: "Bodoni MT", + serif; +} + +.calisto { + font-family: "Calisto MT", + serif; +} + +.garamond { + font-family: garamond, + serif; +} + +.baskerville { + font-family: baskerville, + serif; +} + +/* + + FONT STYLE + Docs: http://tachyons.io/docs/typography/font-style/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.i { font-style: italic; } + +.fs-normal { font-style: normal; } + +@media screen and (min-width: 30em) { + .i-ns { font-style: italic; } + .fs-normal-ns { font-style: normal; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .i-m { font-style: italic; } + .fs-normal-m { font-style: normal; } +} + +@media screen and (min-width: 60em) { + .i-l { font-style: italic; } + .fs-normal-l { font-style: normal; } +} + +/* + + FONT WEIGHT + Docs: http://tachyons.io/docs/typography/font-weight/ + + Base + fw = font-weight + + Modifiers: + 1 = literal value 100 + 2 = literal value 200 + 3 = literal value 300 + 4 = literal value 400 + 5 = literal value 500 + 6 = literal value 600 + 7 = literal value 700 + 8 = literal value 800 + 9 = literal value 900 + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.normal { font-weight: normal; } + +.b { font-weight: bold; } + +.fw1 { font-weight: 100; } + +.fw2 { font-weight: 200; } + +.fw3 { font-weight: 300; } + +.fw4 { font-weight: 400; } + +.fw5 { font-weight: 500; } + +.fw6 { font-weight: 600; } + +.fw7 { font-weight: 700; } + +.fw8 { font-weight: 800; } + +.fw9 { font-weight: 900; } + +@media screen and (min-width: 30em) { + .normal-ns { font-weight: normal; } + .b-ns { font-weight: bold; } + .fw1-ns { font-weight: 100; } + .fw2-ns { font-weight: 200; } + .fw3-ns { font-weight: 300; } + .fw4-ns { font-weight: 400; } + .fw5-ns { font-weight: 500; } + .fw6-ns { font-weight: 600; } + .fw7-ns { font-weight: 700; } + .fw8-ns { font-weight: 800; } + .fw9-ns { font-weight: 900; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .normal-m { font-weight: normal; } + .b-m { font-weight: bold; } + .fw1-m { font-weight: 100; } + .fw2-m { font-weight: 200; } + .fw3-m { font-weight: 300; } + .fw4-m { font-weight: 400; } + .fw5-m { font-weight: 500; } + .fw6-m { font-weight: 600; } + .fw7-m { font-weight: 700; } + .fw8-m { font-weight: 800; } + .fw9-m { font-weight: 900; } +} + +@media screen and (min-width: 60em) { + .normal-l { font-weight: normal; } + .b-l { font-weight: bold; } + .fw1-l { font-weight: 100; } + .fw2-l { font-weight: 200; } + .fw3-l { font-weight: 300; } + .fw4-l { font-weight: 400; } + .fw5-l { font-weight: 500; } + .fw6-l { font-weight: 600; } + .fw7-l { font-weight: 700; } + .fw8-l { font-weight: 800; } + .fw9-l { font-weight: 900; } +} + +/* + + FORMS + +*/ + +.input-reset { + -webkit-appearance: none; + -moz-appearance: none; +} + +.button-reset::-moz-focus-inner, +.input-reset::-moz-focus-inner { + border: 0; + padding: 0; +} + +/* + + HEIGHTS + Docs: http://tachyons.io/docs/layout/heights/ + + Base: + h = height + min-h = min-height + min-vh = min-height vertical screen height + vh = vertical screen height + + Modifiers + 1 = 1st step in height scale + 2 = 2nd step in height scale + 3 = 3rd step in height scale + 4 = 4th step in height scale + 5 = 5th step in height scale + + -25 = literal value 25% + -50 = literal value 50% + -75 = literal value 75% + -100 = literal value 100% + + -auto = string value of auto + -inherit = string value of inherit + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Height Scale */ + +.h1 { height: 1rem; } + +.h2 { height: 2rem; } + +.h3 { height: 4rem; } + +.h4 { height: 8rem; } + +.h5 { height: 16rem; } + +/* Height Percentages - Based off of height of parent */ + +.h-25 { height: 25%; } + +.h-50 { height: 50%; } + +.h-75 { height: 75%; } + +.h-100 { height: 100%; } + +.min-h-100 { min-height: 100%; } + +/* Screen Height Percentage */ + +.vh-25 { height: 25vh; } + +.vh-50 { height: 50vh; } + +.vh-75 { height: 75vh; } + +.vh-100 { height: 100vh; } + +.min-vh-100 { min-height: 100vh; } + +/* String Properties */ + +.h-auto { height: auto; } + +.h-inherit { height: inherit; } + +@media screen and (min-width: 30em) { + .h1-ns { height: 1rem; } + .h2-ns { height: 2rem; } + .h3-ns { height: 4rem; } + .h4-ns { height: 8rem; } + .h5-ns { height: 16rem; } + .h-25-ns { height: 25%; } + .h-50-ns { height: 50%; } + .h-75-ns { height: 75%; } + .h-100-ns { height: 100%; } + .min-h-100-ns { min-height: 100%; } + .vh-25-ns { height: 25vh; } + .vh-50-ns { height: 50vh; } + .vh-75-ns { height: 75vh; } + .vh-100-ns { height: 100vh; } + .min-vh-100-ns { min-height: 100vh; } + .h-auto-ns { height: auto; } + .h-inherit-ns { height: inherit; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .h1-m { height: 1rem; } + .h2-m { height: 2rem; } + .h3-m { height: 4rem; } + .h4-m { height: 8rem; } + .h5-m { height: 16rem; } + .h-25-m { height: 25%; } + .h-50-m { height: 50%; } + .h-75-m { height: 75%; } + .h-100-m { height: 100%; } + .min-h-100-m { min-height: 100%; } + .vh-25-m { height: 25vh; } + .vh-50-m { height: 50vh; } + .vh-75-m { height: 75vh; } + .vh-100-m { height: 100vh; } + .min-vh-100-m { min-height: 100vh; } + .h-auto-m { height: auto; } + .h-inherit-m { height: inherit; } +} + +@media screen and (min-width: 60em) { + .h1-l { height: 1rem; } + .h2-l { height: 2rem; } + .h3-l { height: 4rem; } + .h4-l { height: 8rem; } + .h5-l { height: 16rem; } + .h-25-l { height: 25%; } + .h-50-l { height: 50%; } + .h-75-l { height: 75%; } + .h-100-l { height: 100%; } + .min-h-100-l { min-height: 100%; } + .vh-25-l { height: 25vh; } + .vh-50-l { height: 50vh; } + .vh-75-l { height: 75vh; } + .vh-100-l { height: 100vh; } + .min-vh-100-l { min-height: 100vh; } + .h-auto-l { height: auto; } + .h-inherit-l { height: inherit; } +} + +/* + + LETTER SPACING + Docs: http://tachyons.io/docs/typography/tracking/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tracked { letter-spacing: .1em; } + +.tracked-tight { letter-spacing: -.05em; } + +.tracked-mega { letter-spacing: .25em; } + +@media screen and (min-width: 30em) { + .tracked-ns { letter-spacing: .1em; } + .tracked-tight-ns { letter-spacing: -.05em; } + .tracked-mega-ns { letter-spacing: .25em; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tracked-m { letter-spacing: .1em; } + .tracked-tight-m { letter-spacing: -.05em; } + .tracked-mega-m { letter-spacing: .25em; } +} + +@media screen and (min-width: 60em) { + .tracked-l { letter-spacing: .1em; } + .tracked-tight-l { letter-spacing: -.05em; } + .tracked-mega-l { letter-spacing: .25em; } +} + +/* + + LINE HEIGHT / LEADING + Docs: http://tachyons.io/docs/typography/line-height + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.lh-solid { line-height: 1; } + +.lh-title { line-height: 1.25; } + +.lh-copy { line-height: 1.5; } + +@media screen and (min-width: 30em) { + .lh-solid-ns { line-height: 1; } + .lh-title-ns { line-height: 1.25; } + .lh-copy-ns { line-height: 1.5; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .lh-solid-m { line-height: 1; } + .lh-title-m { line-height: 1.25; } + .lh-copy-m { line-height: 1.5; } +} + +@media screen and (min-width: 60em) { + .lh-solid-l { line-height: 1; } + .lh-title-l { line-height: 1.25; } + .lh-copy-l { line-height: 1.5; } +} + +/* + + LINKS + Docs: http://tachyons.io/docs/elements/links/ + +*/ + +.link { + text-decoration: none; + transition: color .15s ease-in; +} + +.link:link, +.link:visited { + transition: color .15s ease-in; +} + +.link:hover { + transition: color .15s ease-in; +} + +.link:active { + transition: color .15s ease-in; +} + +.link:focus { + transition: color .15s ease-in; + outline: 1px dotted currentColor; +} + +/* + + LISTS + http://tachyons.io/docs/elements/lists/ + +*/ + +.list { list-style-type: none; } + +/* + + MAX WIDTHS + Docs: http://tachyons.io/docs/layout/max-widths/ + + Base: + mw = max-width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + 6 = 6st step in width scale + 7 = 7nd step in width scale + 8 = 8rd step in width scale + 9 = 9th step in width scale + + -100 = literal value 100% + + -none = string value none + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Max Width Percentages */ + +.mw-100 { max-width: 100%; } + +/* Max Width Scale */ + +.mw1 { max-width: 1rem; } + +.mw2 { max-width: 2rem; } + +.mw3 { max-width: 4rem; } + +.mw4 { max-width: 8rem; } + +.mw5 { max-width: 16rem; } + +.mw6 { max-width: 32rem; } + +.mw7 { max-width: 48rem; } + +.mw8 { max-width: 64rem; } + +.mw9 { max-width: 96rem; } + +/* Max Width String Properties */ + +.mw-none { max-width: none; } + +@media screen and (min-width: 30em) { + .mw-100-ns { max-width: 100%; } + + .mw1-ns { max-width: 1rem; } + .mw2-ns { max-width: 2rem; } + .mw3-ns { max-width: 4rem; } + .mw4-ns { max-width: 8rem; } + .mw5-ns { max-width: 16rem; } + .mw6-ns { max-width: 32rem; } + .mw7-ns { max-width: 48rem; } + .mw8-ns { max-width: 64rem; } + .mw9-ns { max-width: 96rem; } + + .mw-none-ns { max-width: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .mw-100-m { max-width: 100%; } + + .mw1-m { max-width: 1rem; } + .mw2-m { max-width: 2rem; } + .mw3-m { max-width: 4rem; } + .mw4-m { max-width: 8rem; } + .mw5-m { max-width: 16rem; } + .mw6-m { max-width: 32rem; } + .mw7-m { max-width: 48rem; } + .mw8-m { max-width: 64rem; } + .mw9-m { max-width: 96rem; } + + .mw-none-m { max-width: none; } +} + +@media screen and (min-width: 60em) { + .mw-100-l { max-width: 100%; } + + .mw1-l { max-width: 1rem; } + .mw2-l { max-width: 2rem; } + .mw3-l { max-width: 4rem; } + .mw4-l { max-width: 8rem; } + .mw5-l { max-width: 16rem; } + .mw6-l { max-width: 32rem; } + .mw7-l { max-width: 48rem; } + .mw8-l { max-width: 64rem; } + .mw9-l { max-width: 96rem; } + + .mw-none-l { max-width: none; } +} + +/* + + WIDTHS + Docs: http://tachyons.io/docs/layout/widths/ + + Base: + w = width + + Modifiers + 1 = 1st step in width scale + 2 = 2nd step in width scale + 3 = 3rd step in width scale + 4 = 4th step in width scale + 5 = 5th step in width scale + + -10 = literal value 10% + -20 = literal value 20% + -25 = literal value 25% + -30 = literal value 30% + -33 = literal value 33% + -34 = literal value 34% + -40 = literal value 40% + -50 = literal value 50% + -60 = literal value 60% + -70 = literal value 70% + -75 = literal value 75% + -80 = literal value 80% + -90 = literal value 90% + -100 = literal value 100% + + -third = 100% / 3 (Not supported in opera mini or IE8) + -two-thirds = 100% / 1.5 (Not supported in opera mini or IE8) + -auto = string value auto + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Width Scale */ + +.w1 { width: 1rem; } + +.w2 { width: 2rem; } + +.w3 { width: 4rem; } + +.w4 { width: 8rem; } + +.w5 { width: 16rem; } + +.w-10 { width: 10%; } + +.w-20 { width: 20%; } + +.w-25 { width: 25%; } + +.w-30 { width: 30%; } + +.w-33 { width: 33%; } + +.w-34 { width: 34%; } + +.w-40 { width: 40%; } + +.w-50 { width: 50%; } + +.w-60 { width: 60%; } + +.w-70 { width: 70%; } + +.w-75 { width: 75%; } + +.w-80 { width: 80%; } + +.w-90 { width: 90%; } + +.w-100 { width: 100%; } + +.w-third { width: 33.33333%; } + +.w-two-thirds { width: 66.66667%; } + +.w-auto { width: auto; } + +@media screen and (min-width: 30em) { + .w1-ns { width: 1rem; } + .w2-ns { width: 2rem; } + .w3-ns { width: 4rem; } + .w4-ns { width: 8rem; } + .w5-ns { width: 16rem; } + .w-10-ns { width: 10%; } + .w-20-ns { width: 20%; } + .w-25-ns { width: 25%; } + .w-30-ns { width: 30%; } + .w-33-ns { width: 33%; } + .w-34-ns { width: 34%; } + .w-40-ns { width: 40%; } + .w-50-ns { width: 50%; } + .w-60-ns { width: 60%; } + .w-70-ns { width: 70%; } + .w-75-ns { width: 75%; } + .w-80-ns { width: 80%; } + .w-90-ns { width: 90%; } + .w-100-ns { width: 100%; } + .w-third-ns { width: 33.33333%; } + .w-two-thirds-ns { width: 66.66667%; } + .w-auto-ns { width: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .w1-m { width: 1rem; } + .w2-m { width: 2rem; } + .w3-m { width: 4rem; } + .w4-m { width: 8rem; } + .w5-m { width: 16rem; } + .w-10-m { width: 10%; } + .w-20-m { width: 20%; } + .w-25-m { width: 25%; } + .w-30-m { width: 30%; } + .w-33-m { width: 33%; } + .w-34-m { width: 34%; } + .w-40-m { width: 40%; } + .w-50-m { width: 50%; } + .w-60-m { width: 60%; } + .w-70-m { width: 70%; } + .w-75-m { width: 75%; } + .w-80-m { width: 80%; } + .w-90-m { width: 90%; } + .w-100-m { width: 100%; } + .w-third-m { width: 33.33333%; } + .w-two-thirds-m { width: 66.66667%; } + .w-auto-m { width: auto; } +} + +@media screen and (min-width: 60em) { + .w1-l { width: 1rem; } + .w2-l { width: 2rem; } + .w3-l { width: 4rem; } + .w4-l { width: 8rem; } + .w5-l { width: 16rem; } + .w-10-l { width: 10%; } + .w-20-l { width: 20%; } + .w-25-l { width: 25%; } + .w-30-l { width: 30%; } + .w-33-l { width: 33%; } + .w-34-l { width: 34%; } + .w-40-l { width: 40%; } + .w-50-l { width: 50%; } + .w-60-l { width: 60%; } + .w-70-l { width: 70%; } + .w-75-l { width: 75%; } + .w-80-l { width: 80%; } + .w-90-l { width: 90%; } + .w-100-l { width: 100%; } + .w-third-l { width: 33.33333%; } + .w-two-thirds-l { width: 66.66667%; } + .w-auto-l { width: auto; } +} + +/* + + OVERFLOW + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + + */ + +.overflow-visible { overflow: visible; } + +.overflow-hidden { overflow: hidden; } + +.overflow-scroll { overflow: scroll; } + +.overflow-auto { overflow: auto; } + +.overflow-x-visible { overflow-x: visible; } + +.overflow-x-hidden { overflow-x: hidden; } + +.overflow-x-scroll { overflow-x: scroll; } + +.overflow-x-auto { overflow-x: auto; } + +.overflow-y-visible { overflow-y: visible; } + +.overflow-y-hidden { overflow-y: hidden; } + +.overflow-y-scroll { overflow-y: scroll; } + +.overflow-y-auto { overflow-y: auto; } + +@media screen and (min-width: 30em) { + .overflow-visible-ns { overflow: visible; } + .overflow-hidden-ns { overflow: hidden; } + .overflow-scroll-ns { overflow: scroll; } + .overflow-auto-ns { overflow: auto; } + .overflow-x-visible-ns { overflow-x: visible; } + .overflow-x-hidden-ns { overflow-x: hidden; } + .overflow-x-scroll-ns { overflow-x: scroll; } + .overflow-x-auto-ns { overflow-x: auto; } + + .overflow-y-visible-ns { overflow-y: visible; } + .overflow-y-hidden-ns { overflow-y: hidden; } + .overflow-y-scroll-ns { overflow-y: scroll; } + .overflow-y-auto-ns { overflow-y: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .overflow-visible-m { overflow: visible; } + .overflow-hidden-m { overflow: hidden; } + .overflow-scroll-m { overflow: scroll; } + .overflow-auto-m { overflow: auto; } + + .overflow-x-visible-m { overflow-x: visible; } + .overflow-x-hidden-m { overflow-x: hidden; } + .overflow-x-scroll-m { overflow-x: scroll; } + .overflow-x-auto-m { overflow-x: auto; } + + .overflow-y-visible-m { overflow-y: visible; } + .overflow-y-hidden-m { overflow-y: hidden; } + .overflow-y-scroll-m { overflow-y: scroll; } + .overflow-y-auto-m { overflow-y: auto; } +} + +@media screen and (min-width: 60em) { + .overflow-visible-l { overflow: visible; } + .overflow-hidden-l { overflow: hidden; } + .overflow-scroll-l { overflow: scroll; } + .overflow-auto-l { overflow: auto; } + + .overflow-x-visible-l { overflow-x: visible; } + .overflow-x-hidden-l { overflow-x: hidden; } + .overflow-x-scroll-l { overflow-x: scroll; } + .overflow-x-auto-l { overflow-x: auto; } + + .overflow-y-visible-l { overflow-y: visible; } + .overflow-y-hidden-l { overflow-y: hidden; } + .overflow-y-scroll-l { overflow-y: scroll; } + .overflow-y-auto-l { overflow-y: auto; } +} + +/* + + POSITIONING + Docs: http://tachyons.io/docs/layout/position/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.static { position: static; } + +.relative { position: relative; } + +.absolute { position: absolute; } + +.fixed { position: fixed; } + +@media screen and (min-width: 30em) { + .static-ns { position: static; } + .relative-ns { position: relative; } + .absolute-ns { position: absolute; } + .fixed-ns { position: fixed; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .static-m { position: static; } + .relative-m { position: relative; } + .absolute-m { position: absolute; } + .fixed-m { position: fixed; } +} + +@media screen and (min-width: 60em) { + .static-l { position: static; } + .relative-l { position: relative; } + .absolute-l { position: absolute; } + .fixed-l { position: fixed; } +} + +/* + + OPACITY + Docs: http://tachyons.io/docs/themes/opacity/ + +*/ + +.o-100 { opacity: 1; } + +.o-90 { opacity: .9; } + +.o-80 { opacity: .8; } + +.o-70 { opacity: .7; } + +.o-60 { opacity: .6; } + +.o-50 { opacity: .5; } + +.o-40 { opacity: .4; } + +.o-30 { opacity: .3; } + +.o-20 { opacity: .2; } + +.o-10 { opacity: .1; } + +.o-05 { opacity: .05; } + +.o-025 { opacity: .025; } + +.o-0 { opacity: 0; } + +/* + + ROTATIONS + +*/ + +.rotate-45 { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + +.rotate-90 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + +.rotate-135 { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + +.rotate-180 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + +.rotate-225 { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + +.rotate-270 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + +.rotate-315 { -webkit-transform: rotate(315deg); transform: rotate(315deg); } + +@media screen and (min-width: 30em){ + .rotate-45-ns { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-ns { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-ns { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-ns { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-ns { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-ns { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-ns { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .rotate-45-m { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-m { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-m { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-m { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-m { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-m { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-m { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +@media screen and (min-width: 60em){ + .rotate-45-l { -webkit-transform: rotate(45deg); transform: rotate(45deg); } + .rotate-90-l { -webkit-transform: rotate(90deg); transform: rotate(90deg); } + .rotate-135-l { -webkit-transform: rotate(135deg); transform: rotate(135deg); } + .rotate-180-l { -webkit-transform: rotate(180deg); transform: rotate(180deg); } + .rotate-225-l { -webkit-transform: rotate(225deg); transform: rotate(225deg); } + .rotate-270-l { -webkit-transform: rotate(270deg); transform: rotate(270deg); } + .rotate-315-l { -webkit-transform: rotate(315deg); transform: rotate(315deg); } +} + +/* + + SKINS + Docs: http://tachyons.io/docs/themes/skins/ + + Classes for setting foreground and background colors on elements. + If you haven't declared a border color, but set border on an element, it will + be set to the current text color. + +*/ + +/* Text colors */ + +.black-90 { color: rgba(0, 0, 0, .9); } + +.black-80 { color: rgba(0, 0, 0, .8); } + +.black-70 { color: rgba(0, 0, 0, .7); } + +.black-60 { color: rgba(0, 0, 0, .6); } + +.black-50 { color: rgba(0, 0, 0, .5); } + +.black-40 { color: rgba(0, 0, 0, .4); } + +.black-30 { color: rgba(0, 0, 0, .3); } + +.black-20 { color: rgba(0, 0, 0, .2); } + +.black-10 { color: rgba(0, 0, 0, .1); } + +.black-05 { color: rgba(0, 0, 0, .05); } + +.white-90 { color: rgba(255, 255, 255, .9); } + +.white-80 { color: rgba(255, 255, 255, .8); } + +.white-70 { color: rgba(255, 255, 255, .7); } + +.white-60 { color: rgba(255, 255, 255, .6); } + +.white-50 { color: rgba(255, 255, 255, .5); } + +.white-40 { color: rgba(255, 255, 255, .4); } + +.white-30 { color: rgba(255, 255, 255, .3); } + +.white-20 { color: rgba(255, 255, 255, .2); } + +.white-10 { color: rgba(255, 255, 255, .1); } + +.black { color: #000; } + +.near-black { color: #111; } + +.dark-gray { color: #333; } + +.mid-gray { color: #555; } + +.gray { color: #777; } + +.silver { color: #999; } + +.light-silver { color: #aaa; } + +.moon-gray { color: #ccc; } + +.light-gray { color: #eee; } + +.near-white { color: #f4f4f4; } + +.white { color: #fff; } + +.dark-red { color: #e7040f; } + +.red { color: #ff4136; } + +.light-red { color: #ff725c; } + +.orange { color: #ff6300; } + +.gold { color: #ffb700; } + +.yellow { color: #ffd700; } + +.light-yellow { color: #fbf1a9; } + +.purple { color: #5e2ca5; } + +.light-purple { color: #a463f2; } + +.dark-pink { color: #d5008f; } + +.hot-pink { color: #ff41b4; } + +.pink { color: #ff80cc; } + +.light-pink { color: #ffa3d7; } + +.dark-green { color: #137752; } + +.green { color: #19a974; } + +.light-green { color: #9eebcf; } + +.navy { color: #001b44; } + +.dark-blue { color: #00449e; } + +.blue { color: #357edd; } + +.light-blue { color: #96ccff; } + +.lightest-blue { color: #cdecff; } + +.washed-blue { color: #f6fffe; } + +.washed-green { color: #e8fdf5; } + +.washed-yellow { color: #fffceb; } + +.washed-red { color: #ffdfdf; } + +.color-inherit { color: inherit; } + +.bg-black-90 { background-color: rgba(0, 0, 0, .9); } + +.bg-black-80 { background-color: rgba(0, 0, 0, .8); } + +.bg-black-70 { background-color: rgba(0, 0, 0, .7); } + +.bg-black-60 { background-color: rgba(0, 0, 0, .6); } + +.bg-black-50 { background-color: rgba(0, 0, 0, .5); } + +.bg-black-40 { background-color: rgba(0, 0, 0, .4); } + +.bg-black-30 { background-color: rgba(0, 0, 0, .3); } + +.bg-black-20 { background-color: rgba(0, 0, 0, .2); } + +.bg-black-10 { background-color: rgba(0, 0, 0, .1); } + +.bg-black-05 { background-color: rgba(0, 0, 0, .05); } + +.bg-white-90 { background-color: rgba(255, 255, 255, .9); } + +.bg-white-80 { background-color: rgba(255, 255, 255, .8); } + +.bg-white-70 { background-color: rgba(255, 255, 255, .7); } + +.bg-white-60 { background-color: rgba(255, 255, 255, .6); } + +.bg-white-50 { background-color: rgba(255, 255, 255, .5); } + +.bg-white-40 { background-color: rgba(255, 255, 255, .4); } + +.bg-white-30 { background-color: rgba(255, 255, 255, .3); } + +.bg-white-20 { background-color: rgba(255, 255, 255, .2); } + +.bg-white-10 { background-color: rgba(255, 255, 255, .1); } + +/* Background colors */ + +.bg-black { background-color: #000; } + +.bg-near-black { background-color: #111; } + +.bg-dark-gray { background-color: #333; } + +.bg-mid-gray { background-color: #555; } + +.bg-gray { background-color: #777; } + +.bg-silver { background-color: #999; } + +.bg-light-silver { background-color: #aaa; } + +.bg-moon-gray { background-color: #ccc; } + +.bg-light-gray { background-color: #eee; } + +.bg-near-white { background-color: #f4f4f4; } + +.bg-white { background-color: #fff; } + +.bg-transparent { background-color: transparent; } + +.bg-dark-red { background-color: #e7040f; } + +.bg-red { background-color: #ff4136; } + +.bg-light-red { background-color: #ff725c; } + +.bg-orange { background-color: #ff6300; } + +.bg-gold { background-color: #ffb700; } + +.bg-yellow { background-color: #ffd700; } + +.bg-light-yellow { background-color: #fbf1a9; } + +.bg-purple { background-color: #5e2ca5; } + +.bg-light-purple { background-color: #a463f2; } + +.bg-dark-pink { background-color: #d5008f; } + +.bg-hot-pink { background-color: #ff41b4; } + +.bg-pink { background-color: #ff80cc; } + +.bg-light-pink { background-color: #ffa3d7; } + +.bg-dark-green { background-color: #137752; } + +.bg-green { background-color: #19a974; } + +.bg-light-green { background-color: #9eebcf; } + +.bg-navy { background-color: #001b44; } + +.bg-dark-blue { background-color: #00449e; } + +.bg-blue { background-color: #357edd; } + +.bg-light-blue { background-color: #96ccff; } + +.bg-lightest-blue { background-color: #cdecff; } + +.bg-washed-blue { background-color: #f6fffe; } + +.bg-washed-green { background-color: #e8fdf5; } + +.bg-washed-yellow { background-color: #fffceb; } + +.bg-washed-red { background-color: #ffdfdf; } + +.bg-inherit { background-color: inherit; } + +/* + + SKINS:PSEUDO + + Customize the color of an element when + it is focused or hovered over. + + */ + +.hover-black:hover, +.hover-black:focus { color: #000; } + +.hover-near-black:hover, +.hover-near-black:focus { color: #111; } + +.hover-dark-gray:hover, +.hover-dark-gray:focus { color: #333; } + +.hover-mid-gray:hover, +.hover-mid-gray:focus { color: #555; } + +.hover-gray:hover, +.hover-gray:focus { color: #777; } + +.hover-silver:hover, +.hover-silver:focus { color: #999; } + +.hover-light-silver:hover, +.hover-light-silver:focus { color: #aaa; } + +.hover-moon-gray:hover, +.hover-moon-gray:focus { color: #ccc; } + +.hover-light-gray:hover, +.hover-light-gray:focus { color: #eee; } + +.hover-near-white:hover, +.hover-near-white:focus { color: #f4f4f4; } + +.hover-white:hover, +.hover-white:focus { color: #fff; } + +.hover-black-90:hover, +.hover-black-90:focus { color: rgba(0, 0, 0, .9); } + +.hover-black-80:hover, +.hover-black-80:focus { color: rgba(0, 0, 0, .8); } + +.hover-black-70:hover, +.hover-black-70:focus { color: rgba(0, 0, 0, .7); } + +.hover-black-60:hover, +.hover-black-60:focus { color: rgba(0, 0, 0, .6); } + +.hover-black-50:hover, +.hover-black-50:focus { color: rgba(0, 0, 0, .5); } + +.hover-black-40:hover, +.hover-black-40:focus { color: rgba(0, 0, 0, .4); } + +.hover-black-30:hover, +.hover-black-30:focus { color: rgba(0, 0, 0, .3); } + +.hover-black-20:hover, +.hover-black-20:focus { color: rgba(0, 0, 0, .2); } + +.hover-black-10:hover, +.hover-black-10:focus { color: rgba(0, 0, 0, .1); } + +.hover-white-90:hover, +.hover-white-90:focus { color: rgba(255, 255, 255, .9); } + +.hover-white-80:hover, +.hover-white-80:focus { color: rgba(255, 255, 255, .8); } + +.hover-white-70:hover, +.hover-white-70:focus { color: rgba(255, 255, 255, .7); } + +.hover-white-60:hover, +.hover-white-60:focus { color: rgba(255, 255, 255, .6); } + +.hover-white-50:hover, +.hover-white-50:focus { color: rgba(255, 255, 255, .5); } + +.hover-white-40:hover, +.hover-white-40:focus { color: rgba(255, 255, 255, .4); } + +.hover-white-30:hover, +.hover-white-30:focus { color: rgba(255, 255, 255, .3); } + +.hover-white-20:hover, +.hover-white-20:focus { color: rgba(255, 255, 255, .2); } + +.hover-white-10:hover, +.hover-white-10:focus { color: rgba(255, 255, 255, .1); } + +.hover-inherit:hover, +.hover-inherit:focus { color: inherit; } + +.hover-bg-black:hover, +.hover-bg-black:focus { background-color: #000; } + +.hover-bg-near-black:hover, +.hover-bg-near-black:focus { background-color: #111; } + +.hover-bg-dark-gray:hover, +.hover-bg-dark-gray:focus { background-color: #333; } + +.hover-bg-mid-gray:hover, +.hover-bg-mid-gray:focus { background-color: #555; } + +.hover-bg-gray:hover, +.hover-bg-gray:focus { background-color: #777; } + +.hover-bg-silver:hover, +.hover-bg-silver:focus { background-color: #999; } + +.hover-bg-light-silver:hover, +.hover-bg-light-silver:focus { background-color: #aaa; } + +.hover-bg-moon-gray:hover, +.hover-bg-moon-gray:focus { background-color: #ccc; } + +.hover-bg-light-gray:hover, +.hover-bg-light-gray:focus { background-color: #eee; } + +.hover-bg-near-white:hover, +.hover-bg-near-white:focus { background-color: #f4f4f4; } + +.hover-bg-white:hover, +.hover-bg-white:focus { background-color: #fff; } + +.hover-bg-transparent:hover, +.hover-bg-transparent:focus { background-color: transparent; } + +.hover-bg-black-90:hover, +.hover-bg-black-90:focus { background-color: rgba(0, 0, 0, .9); } + +.hover-bg-black-80:hover, +.hover-bg-black-80:focus { background-color: rgba(0, 0, 0, .8); } + +.hover-bg-black-70:hover, +.hover-bg-black-70:focus { background-color: rgba(0, 0, 0, .7); } + +.hover-bg-black-60:hover, +.hover-bg-black-60:focus { background-color: rgba(0, 0, 0, .6); } + +.hover-bg-black-50:hover, +.hover-bg-black-50:focus { background-color: rgba(0, 0, 0, .5); } + +.hover-bg-black-40:hover, +.hover-bg-black-40:focus { background-color: rgba(0, 0, 0, .4); } + +.hover-bg-black-30:hover, +.hover-bg-black-30:focus { background-color: rgba(0, 0, 0, .3); } + +.hover-bg-black-20:hover, +.hover-bg-black-20:focus { background-color: rgba(0, 0, 0, .2); } + +.hover-bg-black-10:hover, +.hover-bg-black-10:focus { background-color: rgba(0, 0, 0, .1); } + +.hover-bg-white-90:hover, +.hover-bg-white-90:focus { background-color: rgba(255, 255, 255, .9); } + +.hover-bg-white-80:hover, +.hover-bg-white-80:focus { background-color: rgba(255, 255, 255, .8); } + +.hover-bg-white-70:hover, +.hover-bg-white-70:focus { background-color: rgba(255, 255, 255, .7); } + +.hover-bg-white-60:hover, +.hover-bg-white-60:focus { background-color: rgba(255, 255, 255, .6); } + +.hover-bg-white-50:hover, +.hover-bg-white-50:focus { background-color: rgba(255, 255, 255, .5); } + +.hover-bg-white-40:hover, +.hover-bg-white-40:focus { background-color: rgba(255, 255, 255, .4); } + +.hover-bg-white-30:hover, +.hover-bg-white-30:focus { background-color: rgba(255, 255, 255, .3); } + +.hover-bg-white-20:hover, +.hover-bg-white-20:focus { background-color: rgba(255, 255, 255, .2); } + +.hover-bg-white-10:hover, +.hover-bg-white-10:focus { background-color: rgba(255, 255, 255, .1); } + +.hover-dark-red:hover, +.hover-dark-red:focus { color: #e7040f; } + +.hover-red:hover, +.hover-red:focus { color: #ff4136; } + +.hover-light-red:hover, +.hover-light-red:focus { color: #ff725c; } + +.hover-orange:hover, +.hover-orange:focus { color: #ff6300; } + +.hover-gold:hover, +.hover-gold:focus { color: #ffb700; } + +.hover-yellow:hover, +.hover-yellow:focus { color: #ffd700; } + +.hover-light-yellow:hover, +.hover-light-yellow:focus { color: #fbf1a9; } + +.hover-purple:hover, +.hover-purple:focus { color: #5e2ca5; } + +.hover-light-purple:hover, +.hover-light-purple:focus { color: #a463f2; } + +.hover-dark-pink:hover, +.hover-dark-pink:focus { color: #d5008f; } + +.hover-hot-pink:hover, +.hover-hot-pink:focus { color: #ff41b4; } + +.hover-pink:hover, +.hover-pink:focus { color: #ff80cc; } + +.hover-light-pink:hover, +.hover-light-pink:focus { color: #ffa3d7; } + +.hover-dark-green:hover, +.hover-dark-green:focus { color: #137752; } + +.hover-green:hover, +.hover-green:focus { color: #19a974; } + +.hover-light-green:hover, +.hover-light-green:focus { color: #9eebcf; } + +.hover-navy:hover, +.hover-navy:focus { color: #001b44; } + +.hover-dark-blue:hover, +.hover-dark-blue:focus { color: #00449e; } + +.hover-blue:hover, +.hover-blue:focus { color: #357edd; } + +.hover-light-blue:hover, +.hover-light-blue:focus { color: #96ccff; } + +.hover-lightest-blue:hover, +.hover-lightest-blue:focus { color: #cdecff; } + +.hover-washed-blue:hover, +.hover-washed-blue:focus { color: #f6fffe; } + +.hover-washed-green:hover, +.hover-washed-green:focus { color: #e8fdf5; } + +.hover-washed-yellow:hover, +.hover-washed-yellow:focus { color: #fffceb; } + +.hover-washed-red:hover, +.hover-washed-red:focus { color: #ffdfdf; } + +.hover-bg-dark-red:hover, +.hover-bg-dark-red:focus { background-color: #e7040f; } + +.hover-bg-red:hover, +.hover-bg-red:focus { background-color: #ff4136; } + +.hover-bg-light-red:hover, +.hover-bg-light-red:focus { background-color: #ff725c; } + +.hover-bg-orange:hover, +.hover-bg-orange:focus { background-color: #ff6300; } + +.hover-bg-gold:hover, +.hover-bg-gold:focus { background-color: #ffb700; } + +.hover-bg-yellow:hover, +.hover-bg-yellow:focus { background-color: #ffd700; } + +.hover-bg-light-yellow:hover, +.hover-bg-light-yellow:focus { background-color: #fbf1a9; } + +.hover-bg-purple:hover, +.hover-bg-purple:focus { background-color: #5e2ca5; } + +.hover-bg-light-purple:hover, +.hover-bg-light-purple:focus { background-color: #a463f2; } + +.hover-bg-dark-pink:hover, +.hover-bg-dark-pink:focus { background-color: #d5008f; } + +.hover-bg-hot-pink:hover, +.hover-bg-hot-pink:focus { background-color: #ff41b4; } + +.hover-bg-pink:hover, +.hover-bg-pink:focus { background-color: #ff80cc; } + +.hover-bg-light-pink:hover, +.hover-bg-light-pink:focus { background-color: #ffa3d7; } + +.hover-bg-dark-green:hover, +.hover-bg-dark-green:focus { background-color: #137752; } + +.hover-bg-green:hover, +.hover-bg-green:focus { background-color: #19a974; } + +.hover-bg-light-green:hover, +.hover-bg-light-green:focus { background-color: #9eebcf; } + +.hover-bg-navy:hover, +.hover-bg-navy:focus { background-color: #001b44; } + +.hover-bg-dark-blue:hover, +.hover-bg-dark-blue:focus { background-color: #00449e; } + +.hover-bg-blue:hover, +.hover-bg-blue:focus { background-color: #357edd; } + +.hover-bg-light-blue:hover, +.hover-bg-light-blue:focus { background-color: #96ccff; } + +.hover-bg-lightest-blue:hover, +.hover-bg-lightest-blue:focus { background-color: #cdecff; } + +.hover-bg-washed-blue:hover, +.hover-bg-washed-blue:focus { background-color: #f6fffe; } + +.hover-bg-washed-green:hover, +.hover-bg-washed-green:focus { background-color: #e8fdf5; } + +.hover-bg-washed-yellow:hover, +.hover-bg-washed-yellow:focus { background-color: #fffceb; } + +.hover-bg-washed-red:hover, +.hover-bg-washed-red:focus { background-color: #ffdfdf; } + +.hover-bg-inherit:hover, +.hover-bg-inherit:focus { background-color: inherit; } + +/* Variables */ + +/* + SPACING + Docs: http://tachyons.io/docs/layout/spacing/ + + An eight step powers of two scale ranging from 0 to 16rem. + + Base: + p = padding + m = margin + + Modifiers: + a = all + h = horizontal + v = vertical + t = top + r = right + b = bottom + l = left + + 0 = none + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.pa0 { padding: 0; } + +.pa1 { padding: .25rem; } + +.pa2 { padding: .5rem; } + +.pa3 { padding: 1rem; } + +.pa4 { padding: 2rem; } + +.pa5 { padding: 4rem; } + +.pa6 { padding: 8rem; } + +.pa7 { padding: 16rem; } + +.pl0 { padding-left: 0; } + +.pl1 { padding-left: .25rem; } + +.pl2 { padding-left: .5rem; } + +.pl3 { padding-left: 1rem; } + +.pl4 { padding-left: 2rem; } + +.pl5 { padding-left: 4rem; } + +.pl6 { padding-left: 8rem; } + +.pl7 { padding-left: 16rem; } + +.pr0 { padding-right: 0; } + +.pr1 { padding-right: .25rem; } + +.pr2 { padding-right: .5rem; } + +.pr3 { padding-right: 1rem; } + +.pr4 { padding-right: 2rem; } + +.pr5 { padding-right: 4rem; } + +.pr6 { padding-right: 8rem; } + +.pr7 { padding-right: 16rem; } + +.pb0 { padding-bottom: 0; } + +.pb1 { padding-bottom: .25rem; } + +.pb2 { padding-bottom: .5rem; } + +.pb3 { padding-bottom: 1rem; } + +.pb4 { padding-bottom: 2rem; } + +.pb5 { padding-bottom: 4rem; } + +.pb6 { padding-bottom: 8rem; } + +.pb7 { padding-bottom: 16rem; } + +.pt0 { padding-top: 0; } + +.pt1 { padding-top: .25rem; } + +.pt2 { padding-top: .5rem; } + +.pt3 { padding-top: 1rem; } + +.pt4 { padding-top: 2rem; } + +.pt5 { padding-top: 4rem; } + +.pt6 { padding-top: 8rem; } + +.pt7 { padding-top: 16rem; } + +.pv0 { + padding-top: 0; + padding-bottom: 0; +} + +.pv1 { + padding-top: .25rem; + padding-bottom: .25rem; +} + +.pv2 { + padding-top: .5rem; + padding-bottom: .5rem; +} + +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.pv4 { + padding-top: 2rem; + padding-bottom: 2rem; +} + +.pv5 { + padding-top: 4rem; + padding-bottom: 4rem; +} + +.pv6 { + padding-top: 8rem; + padding-bottom: 8rem; +} + +.pv7 { + padding-top: 16rem; + padding-bottom: 16rem; +} + +.ph0 { + padding-left: 0; + padding-right: 0; +} + +.ph1 { + padding-left: .25rem; + padding-right: .25rem; +} + +.ph2 { + padding-left: .5rem; + padding-right: .5rem; +} + +.ph3 { + padding-left: 1rem; + padding-right: 1rem; +} + +.ph4 { + padding-left: 2rem; + padding-right: 2rem; +} + +.ph5 { + padding-left: 4rem; + padding-right: 4rem; +} + +.ph6 { + padding-left: 8rem; + padding-right: 8rem; +} + +.ph7 { + padding-left: 16rem; + padding-right: 16rem; +} + +.ma0 { margin: 0; } + +.ma1 { margin: .25rem; } + +.ma2 { margin: .5rem; } + +.ma3 { margin: 1rem; } + +.ma4 { margin: 2rem; } + +.ma5 { margin: 4rem; } + +.ma6 { margin: 8rem; } + +.ma7 { margin: 16rem; } + +.ml0 { margin-left: 0; } + +.ml1 { margin-left: .25rem; } + +.ml2 { margin-left: .5rem; } + +.ml3 { margin-left: 1rem; } + +.ml4 { margin-left: 2rem; } + +.ml5 { margin-left: 4rem; } + +.ml6 { margin-left: 8rem; } + +.ml7 { margin-left: 16rem; } + +.mr0 { margin-right: 0; } + +.mr1 { margin-right: .25rem; } + +.mr2 { margin-right: .5rem; } + +.mr3 { margin-right: 1rem; } + +.mr4 { margin-right: 2rem; } + +.mr5 { margin-right: 4rem; } + +.mr6 { margin-right: 8rem; } + +.mr7 { margin-right: 16rem; } + +.mb0 { margin-bottom: 0; } + +.mb1 { margin-bottom: .25rem; } + +.mb2 { margin-bottom: .5rem; } + +.mb3 { margin-bottom: 1rem; } + +.mb4 { margin-bottom: 2rem; } + +.mb5 { margin-bottom: 4rem; } + +.mb6 { margin-bottom: 8rem; } + +.mb7 { margin-bottom: 16rem; } + +.mt0 { margin-top: 0; } + +.mt1 { margin-top: .25rem; } + +.mt2 { margin-top: .5rem; } + +.mt3 { margin-top: 1rem; } + +.mt4 { margin-top: 2rem; } + +.mt5 { margin-top: 4rem; } + +.mt6 { margin-top: 8rem; } + +.mt7 { margin-top: 16rem; } + +.mv0 { + margin-top: 0; + margin-bottom: 0; +} + +.mv1 { + margin-top: .25rem; + margin-bottom: .25rem; +} + +.mv2 { + margin-top: .5rem; + margin-bottom: .5rem; +} + +.mv3 { + margin-top: 1rem; + margin-bottom: 1rem; +} + +.mv4 { + margin-top: 2rem; + margin-bottom: 2rem; +} + +.mv5 { + margin-top: 4rem; + margin-bottom: 4rem; +} + +.mv6 { + margin-top: 8rem; + margin-bottom: 8rem; +} + +.mv7 { + margin-top: 16rem; + margin-bottom: 16rem; +} + +.mh0 { + margin-left: 0; + margin-right: 0; +} + +.mh1 { + margin-left: .25rem; + margin-right: .25rem; +} + +.mh2 { + margin-left: .5rem; + margin-right: .5rem; +} + +.mh3 { + margin-left: 1rem; + margin-right: 1rem; +} + +.mh4 { + margin-left: 2rem; + margin-right: 2rem; +} + +.mh5 { + margin-left: 4rem; + margin-right: 4rem; +} + +.mh6 { + margin-left: 8rem; + margin-right: 8rem; +} + +.mh7 { + margin-left: 16rem; + margin-right: 16rem; +} + +@media screen and (min-width: 30em) { + .pa0-ns { padding: 0; } + .pa1-ns { padding: .25rem; } + .pa2-ns { padding: .5rem; } + .pa3-ns { padding: 1rem; } + .pa4-ns { padding: 2rem; } + .pa5-ns { padding: 4rem; } + .pa6-ns { padding: 8rem; } + .pa7-ns { padding: 16rem; } + + .pl0-ns { padding-left: 0; } + .pl1-ns { padding-left: .25rem; } + .pl2-ns { padding-left: .5rem; } + .pl3-ns { padding-left: 1rem; } + .pl4-ns { padding-left: 2rem; } + .pl5-ns { padding-left: 4rem; } + .pl6-ns { padding-left: 8rem; } + .pl7-ns { padding-left: 16rem; } + + .pr0-ns { padding-right: 0; } + .pr1-ns { padding-right: .25rem; } + .pr2-ns { padding-right: .5rem; } + .pr3-ns { padding-right: 1rem; } + .pr4-ns { padding-right: 2rem; } + .pr5-ns { padding-right: 4rem; } + .pr6-ns { padding-right: 8rem; } + .pr7-ns { padding-right: 16rem; } + + .pb0-ns { padding-bottom: 0; } + .pb1-ns { padding-bottom: .25rem; } + .pb2-ns { padding-bottom: .5rem; } + .pb3-ns { padding-bottom: 1rem; } + .pb4-ns { padding-bottom: 2rem; } + .pb5-ns { padding-bottom: 4rem; } + .pb6-ns { padding-bottom: 8rem; } + .pb7-ns { padding-bottom: 16rem; } + + .pt0-ns { padding-top: 0; } + .pt1-ns { padding-top: .25rem; } + .pt2-ns { padding-top: .5rem; } + .pt3-ns { padding-top: 1rem; } + .pt4-ns { padding-top: 2rem; } + .pt5-ns { padding-top: 4rem; } + .pt6-ns { padding-top: 8rem; } + .pt7-ns { padding-top: 16rem; } + + .pv0-ns { + padding-top: 0; + padding-bottom: 0; + } + .pv1-ns { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-ns { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-ns { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-ns { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-ns { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-ns { + padding-top: 16rem; + padding-bottom: 16rem; + } + .ph0-ns { + padding-left: 0; + padding-right: 0; + } + .ph1-ns { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-ns { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-ns { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-ns { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-ns { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-ns { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-ns { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-ns { margin: 0; } + .ma1-ns { margin: .25rem; } + .ma2-ns { margin: .5rem; } + .ma3-ns { margin: 1rem; } + .ma4-ns { margin: 2rem; } + .ma5-ns { margin: 4rem; } + .ma6-ns { margin: 8rem; } + .ma7-ns { margin: 16rem; } + + .ml0-ns { margin-left: 0; } + .ml1-ns { margin-left: .25rem; } + .ml2-ns { margin-left: .5rem; } + .ml3-ns { margin-left: 1rem; } + .ml4-ns { margin-left: 2rem; } + .ml5-ns { margin-left: 4rem; } + .ml6-ns { margin-left: 8rem; } + .ml7-ns { margin-left: 16rem; } + + .mr0-ns { margin-right: 0; } + .mr1-ns { margin-right: .25rem; } + .mr2-ns { margin-right: .5rem; } + .mr3-ns { margin-right: 1rem; } + .mr4-ns { margin-right: 2rem; } + .mr5-ns { margin-right: 4rem; } + .mr6-ns { margin-right: 8rem; } + .mr7-ns { margin-right: 16rem; } + + .mb0-ns { margin-bottom: 0; } + .mb1-ns { margin-bottom: .25rem; } + .mb2-ns { margin-bottom: .5rem; } + .mb3-ns { margin-bottom: 1rem; } + .mb4-ns { margin-bottom: 2rem; } + .mb5-ns { margin-bottom: 4rem; } + .mb6-ns { margin-bottom: 8rem; } + .mb7-ns { margin-bottom: 16rem; } + + .mt0-ns { margin-top: 0; } + .mt1-ns { margin-top: .25rem; } + .mt2-ns { margin-top: .5rem; } + .mt3-ns { margin-top: 1rem; } + .mt4-ns { margin-top: 2rem; } + .mt5-ns { margin-top: 4rem; } + .mt6-ns { margin-top: 8rem; } + .mt7-ns { margin-top: 16rem; } + + .mv0-ns { + margin-top: 0; + margin-bottom: 0; + } + .mv1-ns { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-ns { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-ns { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-ns { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-ns { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-ns { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-ns { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-ns { + margin-left: 0; + margin-right: 0; + } + .mh1-ns { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-ns { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-ns { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-ns { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-ns { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-ns { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-ns { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .pa0-m { padding: 0; } + .pa1-m { padding: .25rem; } + .pa2-m { padding: .5rem; } + .pa3-m { padding: 1rem; } + .pa4-m { padding: 2rem; } + .pa5-m { padding: 4rem; } + .pa6-m { padding: 8rem; } + .pa7-m { padding: 16rem; } + + .pl0-m { padding-left: 0; } + .pl1-m { padding-left: .25rem; } + .pl2-m { padding-left: .5rem; } + .pl3-m { padding-left: 1rem; } + .pl4-m { padding-left: 2rem; } + .pl5-m { padding-left: 4rem; } + .pl6-m { padding-left: 8rem; } + .pl7-m { padding-left: 16rem; } + + .pr0-m { padding-right: 0; } + .pr1-m { padding-right: .25rem; } + .pr2-m { padding-right: .5rem; } + .pr3-m { padding-right: 1rem; } + .pr4-m { padding-right: 2rem; } + .pr5-m { padding-right: 4rem; } + .pr6-m { padding-right: 8rem; } + .pr7-m { padding-right: 16rem; } + + .pb0-m { padding-bottom: 0; } + .pb1-m { padding-bottom: .25rem; } + .pb2-m { padding-bottom: .5rem; } + .pb3-m { padding-bottom: 1rem; } + .pb4-m { padding-bottom: 2rem; } + .pb5-m { padding-bottom: 4rem; } + .pb6-m { padding-bottom: 8rem; } + .pb7-m { padding-bottom: 16rem; } + + .pt0-m { padding-top: 0; } + .pt1-m { padding-top: .25rem; } + .pt2-m { padding-top: .5rem; } + .pt3-m { padding-top: 1rem; } + .pt4-m { padding-top: 2rem; } + .pt5-m { padding-top: 4rem; } + .pt6-m { padding-top: 8rem; } + .pt7-m { padding-top: 16rem; } + + .pv0-m { + padding-top: 0; + padding-bottom: 0; + } + .pv1-m { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-m { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-m { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-m { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-m { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-m { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-m { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-m { + padding-left: 0; + padding-right: 0; + } + .ph1-m { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-m { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-m { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-m { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-m { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-m { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-m { margin: 0; } + .ma1-m { margin: .25rem; } + .ma2-m { margin: .5rem; } + .ma3-m { margin: 1rem; } + .ma4-m { margin: 2rem; } + .ma5-m { margin: 4rem; } + .ma6-m { margin: 8rem; } + .ma7-m { margin: 16rem; } + + .ml0-m { margin-left: 0; } + .ml1-m { margin-left: .25rem; } + .ml2-m { margin-left: .5rem; } + .ml3-m { margin-left: 1rem; } + .ml4-m { margin-left: 2rem; } + .ml5-m { margin-left: 4rem; } + .ml6-m { margin-left: 8rem; } + .ml7-m { margin-left: 16rem; } + + .mr0-m { margin-right: 0; } + .mr1-m { margin-right: .25rem; } + .mr2-m { margin-right: .5rem; } + .mr3-m { margin-right: 1rem; } + .mr4-m { margin-right: 2rem; } + .mr5-m { margin-right: 4rem; } + .mr6-m { margin-right: 8rem; } + .mr7-m { margin-right: 16rem; } + + .mb0-m { margin-bottom: 0; } + .mb1-m { margin-bottom: .25rem; } + .mb2-m { margin-bottom: .5rem; } + .mb3-m { margin-bottom: 1rem; } + .mb4-m { margin-bottom: 2rem; } + .mb5-m { margin-bottom: 4rem; } + .mb6-m { margin-bottom: 8rem; } + .mb7-m { margin-bottom: 16rem; } + + .mt0-m { margin-top: 0; } + .mt1-m { margin-top: .25rem; } + .mt2-m { margin-top: .5rem; } + .mt3-m { margin-top: 1rem; } + .mt4-m { margin-top: 2rem; } + .mt5-m { margin-top: 4rem; } + .mt6-m { margin-top: 8rem; } + .mt7-m { margin-top: 16rem; } + + .mv0-m { + margin-top: 0; + margin-bottom: 0; + } + .mv1-m { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-m { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-m { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-m { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-m { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-m { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-m { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-m { + margin-left: 0; + margin-right: 0; + } + .mh1-m { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-m { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-m { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-m { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-m { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-m { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-m { + margin-left: 16rem; + margin-right: 16rem; + } + +} + +@media screen and (min-width: 60em) { + .pa0-l { padding: 0; } + .pa1-l { padding: .25rem; } + .pa2-l { padding: .5rem; } + .pa3-l { padding: 1rem; } + .pa4-l { padding: 2rem; } + .pa5-l { padding: 4rem; } + .pa6-l { padding: 8rem; } + .pa7-l { padding: 16rem; } + + .pl0-l { padding-left: 0; } + .pl1-l { padding-left: .25rem; } + .pl2-l { padding-left: .5rem; } + .pl3-l { padding-left: 1rem; } + .pl4-l { padding-left: 2rem; } + .pl5-l { padding-left: 4rem; } + .pl6-l { padding-left: 8rem; } + .pl7-l { padding-left: 16rem; } + + .pr0-l { padding-right: 0; } + .pr1-l { padding-right: .25rem; } + .pr2-l { padding-right: .5rem; } + .pr3-l { padding-right: 1rem; } + .pr4-l { padding-right: 2rem; } + .pr5-l { padding-right: 4rem; } + .pr6-l { padding-right: 8rem; } + .pr7-l { padding-right: 16rem; } + + .pb0-l { padding-bottom: 0; } + .pb1-l { padding-bottom: .25rem; } + .pb2-l { padding-bottom: .5rem; } + .pb3-l { padding-bottom: 1rem; } + .pb4-l { padding-bottom: 2rem; } + .pb5-l { padding-bottom: 4rem; } + .pb6-l { padding-bottom: 8rem; } + .pb7-l { padding-bottom: 16rem; } + + .pt0-l { padding-top: 0; } + .pt1-l { padding-top: .25rem; } + .pt2-l { padding-top: .5rem; } + .pt3-l { padding-top: 1rem; } + .pt4-l { padding-top: 2rem; } + .pt5-l { padding-top: 4rem; } + .pt6-l { padding-top: 8rem; } + .pt7-l { padding-top: 16rem; } + + .pv0-l { + padding-top: 0; + padding-bottom: 0; + } + .pv1-l { + padding-top: .25rem; + padding-bottom: .25rem; + } + .pv2-l { + padding-top: .5rem; + padding-bottom: .5rem; + } + .pv3-l { + padding-top: 1rem; + padding-bottom: 1rem; + } + .pv4-l { + padding-top: 2rem; + padding-bottom: 2rem; + } + .pv5-l { + padding-top: 4rem; + padding-bottom: 4rem; + } + .pv6-l { + padding-top: 8rem; + padding-bottom: 8rem; + } + .pv7-l { + padding-top: 16rem; + padding-bottom: 16rem; + } + + .ph0-l { + padding-left: 0; + padding-right: 0; + } + .ph1-l { + padding-left: .25rem; + padding-right: .25rem; + } + .ph2-l { + padding-left: .5rem; + padding-right: .5rem; + } + .ph3-l { + padding-left: 1rem; + padding-right: 1rem; + } + .ph4-l { + padding-left: 2rem; + padding-right: 2rem; + } + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; + } + .ph6-l { + padding-left: 8rem; + padding-right: 8rem; + } + .ph7-l { + padding-left: 16rem; + padding-right: 16rem; + } + + .ma0-l { margin: 0; } + .ma1-l { margin: .25rem; } + .ma2-l { margin: .5rem; } + .ma3-l { margin: 1rem; } + .ma4-l { margin: 2rem; } + .ma5-l { margin: 4rem; } + .ma6-l { margin: 8rem; } + .ma7-l { margin: 16rem; } + + .ml0-l { margin-left: 0; } + .ml1-l { margin-left: .25rem; } + .ml2-l { margin-left: .5rem; } + .ml3-l { margin-left: 1rem; } + .ml4-l { margin-left: 2rem; } + .ml5-l { margin-left: 4rem; } + .ml6-l { margin-left: 8rem; } + .ml7-l { margin-left: 16rem; } + + .mr0-l { margin-right: 0; } + .mr1-l { margin-right: .25rem; } + .mr2-l { margin-right: .5rem; } + .mr3-l { margin-right: 1rem; } + .mr4-l { margin-right: 2rem; } + .mr5-l { margin-right: 4rem; } + .mr6-l { margin-right: 8rem; } + .mr7-l { margin-right: 16rem; } + + .mb0-l { margin-bottom: 0; } + .mb1-l { margin-bottom: .25rem; } + .mb2-l { margin-bottom: .5rem; } + .mb3-l { margin-bottom: 1rem; } + .mb4-l { margin-bottom: 2rem; } + .mb5-l { margin-bottom: 4rem; } + .mb6-l { margin-bottom: 8rem; } + .mb7-l { margin-bottom: 16rem; } + + .mt0-l { margin-top: 0; } + .mt1-l { margin-top: .25rem; } + .mt2-l { margin-top: .5rem; } + .mt3-l { margin-top: 1rem; } + .mt4-l { margin-top: 2rem; } + .mt5-l { margin-top: 4rem; } + .mt6-l { margin-top: 8rem; } + .mt7-l { margin-top: 16rem; } + + .mv0-l { + margin-top: 0; + margin-bottom: 0; + } + .mv1-l { + margin-top: .25rem; + margin-bottom: .25rem; + } + .mv2-l { + margin-top: .5rem; + margin-bottom: .5rem; + } + .mv3-l { + margin-top: 1rem; + margin-bottom: 1rem; + } + .mv4-l { + margin-top: 2rem; + margin-bottom: 2rem; + } + .mv5-l { + margin-top: 4rem; + margin-bottom: 4rem; + } + .mv6-l { + margin-top: 8rem; + margin-bottom: 8rem; + } + .mv7-l { + margin-top: 16rem; + margin-bottom: 16rem; + } + + .mh0-l { + margin-left: 0; + margin-right: 0; + } + .mh1-l { + margin-left: .25rem; + margin-right: .25rem; + } + .mh2-l { + margin-left: .5rem; + margin-right: .5rem; + } + .mh3-l { + margin-left: 1rem; + margin-right: 1rem; + } + .mh4-l { + margin-left: 2rem; + margin-right: 2rem; + } + .mh5-l { + margin-left: 4rem; + margin-right: 4rem; + } + .mh6-l { + margin-left: 8rem; + margin-right: 8rem; + } + .mh7-l { + margin-left: 16rem; + margin-right: 16rem; + } +} + +/* + NEGATIVE MARGINS + + Base: + n = negative + + Modifiers: + a = all + t = top + r = right + b = bottom + l = left + + 1 = 1st step in spacing scale + 2 = 2nd step in spacing scale + 3 = 3rd step in spacing scale + 4 = 4th step in spacing scale + 5 = 5th step in spacing scale + 6 = 6th step in spacing scale + 7 = 7th step in spacing scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.na1 { margin: -0.25rem; } + +.na2 { margin: -0.5rem; } + +.na3 { margin: -1rem; } + +.na4 { margin: -2rem; } + +.na5 { margin: -4rem; } + +.na6 { margin: -8rem; } + +.na7 { margin: -16rem; } + +.nl1 { margin-left: -0.25rem; } + +.nl2 { margin-left: -0.5rem; } + +.nl3 { margin-left: -1rem; } + +.nl4 { margin-left: -2rem; } + +.nl5 { margin-left: -4rem; } + +.nl6 { margin-left: -8rem; } + +.nl7 { margin-left: -16rem; } + +.nr1 { margin-right: -0.25rem; } + +.nr2 { margin-right: -0.5rem; } + +.nr3 { margin-right: -1rem; } + +.nr4 { margin-right: -2rem; } + +.nr5 { margin-right: -4rem; } + +.nr6 { margin-right: -8rem; } + +.nr7 { margin-right: -16rem; } + +.nb1 { margin-bottom: -0.25rem; } + +.nb2 { margin-bottom: -0.5rem; } + +.nb3 { margin-bottom: -1rem; } + +.nb4 { margin-bottom: -2rem; } + +.nb5 { margin-bottom: -4rem; } + +.nb6 { margin-bottom: -8rem; } + +.nb7 { margin-bottom: -16rem; } + +.nt1 { margin-top: -0.25rem; } + +.nt2 { margin-top: -0.5rem; } + +.nt3 { margin-top: -1rem; } + +.nt4 { margin-top: -2rem; } + +.nt5 { margin-top: -4rem; } + +.nt6 { margin-top: -8rem; } + +.nt7 { margin-top: -16rem; } + +@media screen and (min-width: 30em) { + + .na1-ns { margin: -0.25rem; } + .na2-ns { margin: -0.5rem; } + .na3-ns { margin: -1rem; } + .na4-ns { margin: -2rem; } + .na5-ns { margin: -4rem; } + .na6-ns { margin: -8rem; } + .na7-ns { margin: -16rem; } + + .nl1-ns { margin-left: -0.25rem; } + .nl2-ns { margin-left: -0.5rem; } + .nl3-ns { margin-left: -1rem; } + .nl4-ns { margin-left: -2rem; } + .nl5-ns { margin-left: -4rem; } + .nl6-ns { margin-left: -8rem; } + .nl7-ns { margin-left: -16rem; } + + .nr1-ns { margin-right: -0.25rem; } + .nr2-ns { margin-right: -0.5rem; } + .nr3-ns { margin-right: -1rem; } + .nr4-ns { margin-right: -2rem; } + .nr5-ns { margin-right: -4rem; } + .nr6-ns { margin-right: -8rem; } + .nr7-ns { margin-right: -16rem; } + + .nb1-ns { margin-bottom: -0.25rem; } + .nb2-ns { margin-bottom: -0.5rem; } + .nb3-ns { margin-bottom: -1rem; } + .nb4-ns { margin-bottom: -2rem; } + .nb5-ns { margin-bottom: -4rem; } + .nb6-ns { margin-bottom: -8rem; } + .nb7-ns { margin-bottom: -16rem; } + + .nt1-ns { margin-top: -0.25rem; } + .nt2-ns { margin-top: -0.5rem; } + .nt3-ns { margin-top: -1rem; } + .nt4-ns { margin-top: -2rem; } + .nt5-ns { margin-top: -4rem; } + .nt6-ns { margin-top: -8rem; } + .nt7-ns { margin-top: -16rem; } + +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .na1-m { margin: -0.25rem; } + .na2-m { margin: -0.5rem; } + .na3-m { margin: -1rem; } + .na4-m { margin: -2rem; } + .na5-m { margin: -4rem; } + .na6-m { margin: -8rem; } + .na7-m { margin: -16rem; } + + .nl1-m { margin-left: -0.25rem; } + .nl2-m { margin-left: -0.5rem; } + .nl3-m { margin-left: -1rem; } + .nl4-m { margin-left: -2rem; } + .nl5-m { margin-left: -4rem; } + .nl6-m { margin-left: -8rem; } + .nl7-m { margin-left: -16rem; } + + .nr1-m { margin-right: -0.25rem; } + .nr2-m { margin-right: -0.5rem; } + .nr3-m { margin-right: -1rem; } + .nr4-m { margin-right: -2rem; } + .nr5-m { margin-right: -4rem; } + .nr6-m { margin-right: -8rem; } + .nr7-m { margin-right: -16rem; } + + .nb1-m { margin-bottom: -0.25rem; } + .nb2-m { margin-bottom: -0.5rem; } + .nb3-m { margin-bottom: -1rem; } + .nb4-m { margin-bottom: -2rem; } + .nb5-m { margin-bottom: -4rem; } + .nb6-m { margin-bottom: -8rem; } + .nb7-m { margin-bottom: -16rem; } + + .nt1-m { margin-top: -0.25rem; } + .nt2-m { margin-top: -0.5rem; } + .nt3-m { margin-top: -1rem; } + .nt4-m { margin-top: -2rem; } + .nt5-m { margin-top: -4rem; } + .nt6-m { margin-top: -8rem; } + .nt7-m { margin-top: -16rem; } + +} + +@media screen and (min-width: 60em) { + .na1-l { margin: -0.25rem; } + .na2-l { margin: -0.5rem; } + .na3-l { margin: -1rem; } + .na4-l { margin: -2rem; } + .na5-l { margin: -4rem; } + .na6-l { margin: -8rem; } + .na7-l { margin: -16rem; } + + .nl1-l { margin-left: -0.25rem; } + .nl2-l { margin-left: -0.5rem; } + .nl3-l { margin-left: -1rem; } + .nl4-l { margin-left: -2rem; } + .nl5-l { margin-left: -4rem; } + .nl6-l { margin-left: -8rem; } + .nl7-l { margin-left: -16rem; } + + .nr1-l { margin-right: -0.25rem; } + .nr2-l { margin-right: -0.5rem; } + .nr3-l { margin-right: -1rem; } + .nr4-l { margin-right: -2rem; } + .nr5-l { margin-right: -4rem; } + .nr6-l { margin-right: -8rem; } + .nr7-l { margin-right: -16rem; } + + .nb1-l { margin-bottom: -0.25rem; } + .nb2-l { margin-bottom: -0.5rem; } + .nb3-l { margin-bottom: -1rem; } + .nb4-l { margin-bottom: -2rem; } + .nb5-l { margin-bottom: -4rem; } + .nb6-l { margin-bottom: -8rem; } + .nb7-l { margin-bottom: -16rem; } + + .nt1-l { margin-top: -0.25rem; } + .nt2-l { margin-top: -0.5rem; } + .nt3-l { margin-top: -1rem; } + .nt4-l { margin-top: -2rem; } + .nt5-l { margin-top: -4rem; } + .nt6-l { margin-top: -8rem; } + .nt7-l { margin-top: -16rem; } +} + +/* + + TABLES + Docs: http://tachyons.io/docs/elements/tables/ + +*/ + +.collapse { + border-collapse: collapse; + border-spacing: 0; +} + +.striped--light-silver:nth-child(odd) { + background-color: #aaa; +} + +.striped--moon-gray:nth-child(odd) { + background-color: #ccc; +} + +.striped--light-gray:nth-child(odd) { + background-color: #eee; +} + +.striped--near-white:nth-child(odd) { + background-color: #f4f4f4; +} + +.stripe-light:nth-child(odd) { + background-color: rgba(255, 255, 255, .1); +} + +.stripe-dark:nth-child(odd) { + background-color: rgba(0, 0, 0, .1); +} + +/* + + TEXT DECORATION + Docs: http://tachyons.io/docs/typography/text-decoration/ + + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.strike { text-decoration: line-through; } + +.underline { text-decoration: underline; } + +.no-underline { text-decoration: none; } + +@media screen and (min-width: 30em) { + .strike-ns { text-decoration: line-through; } + .underline-ns { text-decoration: underline; } + .no-underline-ns { text-decoration: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .strike-m { text-decoration: line-through; } + .underline-m { text-decoration: underline; } + .no-underline-m { text-decoration: none; } +} + +@media screen and (min-width: 60em) { + .strike-l { text-decoration: line-through; } + .underline-l { text-decoration: underline; } + .no-underline-l { text-decoration: none; } +} + +/* + + TEXT ALIGN + Docs: http://tachyons.io/docs/typography/text-align/ + + Base + t = text-align + + Modifiers + l = left + r = right + c = center + j = justify + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.tl { text-align: left; } + +.tr { text-align: right; } + +.tc { text-align: center; } + +.tj { text-align: justify; } + +@media screen and (min-width: 30em) { + .tl-ns { text-align: left; } + .tr-ns { text-align: right; } + .tc-ns { text-align: center; } + .tj-ns { text-align: justify; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .tl-m { text-align: left; } + .tr-m { text-align: right; } + .tc-m { text-align: center; } + .tj-m { text-align: justify; } +} + +@media screen and (min-width: 60em) { + .tl-l { text-align: left; } + .tr-l { text-align: right; } + .tc-l { text-align: center; } + .tj-l { text-align: justify; } +} + +/* + + TEXT TRANSFORM + Docs: http://tachyons.io/docs/typography/text-transform/ + + Base: + tt = text-transform + + Modifiers + c = capitalize + l = lowercase + u = uppercase + n = none + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ttc { text-transform: capitalize; } + +.ttl { text-transform: lowercase; } + +.ttu { text-transform: uppercase; } + +.ttn { text-transform: none; } + +@media screen and (min-width: 30em) { + .ttc-ns { text-transform: capitalize; } + .ttl-ns { text-transform: lowercase; } + .ttu-ns { text-transform: uppercase; } + .ttn-ns { text-transform: none; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ttc-m { text-transform: capitalize; } + .ttl-m { text-transform: lowercase; } + .ttu-m { text-transform: uppercase; } + .ttn-m { text-transform: none; } +} + +@media screen and (min-width: 60em) { + .ttc-l { text-transform: capitalize; } + .ttl-l { text-transform: lowercase; } + .ttu-l { text-transform: uppercase; } + .ttn-l { text-transform: none; } +} + +/* + + TYPE SCALE + Docs: http://tachyons.io/docs/typography/scale/ + + Base: + f = font-size + + Modifiers + 1 = 1st step in size scale + 2 = 2nd step in size scale + 3 = 3rd step in size scale + 4 = 4th step in size scale + 5 = 5th step in size scale + 6 = 6th step in size scale + 7 = 7th step in size scale + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large +*/ + +/* + * For Hero/Marketing Titles + * + * These generally are too large for mobile + * so be careful using them on smaller screens. + * */ + +.f-6, +.f-headline { + font-size: 6rem; +} + +.f-5, +.f-subheadline { + font-size: 5rem; +} + +/* Type Scale */ + +.f1 { font-size: 3rem; } + +.f2 { font-size: 2.25rem; } + +.f3 { font-size: 1.5rem; } + +.f4 { font-size: 1.25rem; } + +.f5 { font-size: 1rem; } + +.f6 { font-size: .875rem; } + +.f7 { font-size: .75rem; } + +/* Small and hard to read for many people so use with extreme caution */ + +@media screen and (min-width: 30em){ + .f-6-ns, + .f-headline-ns { font-size: 6rem; } + .f-5-ns, + .f-subheadline-ns { font-size: 5rem; } + .f1-ns { font-size: 3rem; } + .f2-ns { font-size: 2.25rem; } + .f3-ns { font-size: 1.5rem; } + .f4-ns { font-size: 1.25rem; } + .f5-ns { font-size: 1rem; } + .f6-ns { font-size: .875rem; } + .f7-ns { font-size: .75rem; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .f-6-m, + .f-headline-m { font-size: 6rem; } + .f-5-m, + .f-subheadline-m { font-size: 5rem; } + .f1-m { font-size: 3rem; } + .f2-m { font-size: 2.25rem; } + .f3-m { font-size: 1.5rem; } + .f4-m { font-size: 1.25rem; } + .f5-m { font-size: 1rem; } + .f6-m { font-size: .875rem; } + .f7-m { font-size: .75rem; } +} + +@media screen and (min-width: 60em) { + .f-6-l, + .f-headline-l { + font-size: 6rem; + } + .f-5-l, + .f-subheadline-l { + font-size: 5rem; + } + .f1-l { font-size: 3rem; } + .f2-l { font-size: 2.25rem; } + .f3-l { font-size: 1.5rem; } + .f4-l { font-size: 1.25rem; } + .f5-l { font-size: 1rem; } + .f6-l { font-size: .875rem; } + .f7-l { font-size: .75rem; } +} + +/* + + TYPOGRAPHY + http://tachyons.io/docs/typography/measure/ + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Measure is limited to ~66 characters */ + +.measure { + max-width: 30em; +} + +/* Measure is limited to ~80 characters */ + +.measure-wide { + max-width: 34em; +} + +/* Measure is limited to ~45 characters */ + +.measure-narrow { + max-width: 20em; +} + +/* Book paragraph style - paragraphs are indented with no vertical spacing. */ + +.indent { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.small-caps { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; +} + +/* Combine this class with a width to truncate text (or just leave as is to truncate at width of containing element. */ + +.truncate { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +@media screen and (min-width: 30em) { + .measure-ns { + max-width: 30em; + } + .measure-wide-ns { + max-width: 34em; + } + .measure-narrow-ns { + max-width: 20em; + } + .indent-ns { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-ns { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-ns { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .measure-m { + max-width: 30em; + } + .measure-wide-m { + max-width: 34em; + } + .measure-narrow-m { + max-width: 20em; + } + .indent-m { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-m { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-m { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +@media screen and (min-width: 60em) { + .measure-l { + max-width: 30em; + } + .measure-wide-l { + max-width: 34em; + } + .measure-narrow-l { + max-width: 20em; + } + .indent-l { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; + } + .small-caps-l { + -webkit-font-feature-settings: "c2sc"; + font-feature-settings: "c2sc"; + font-variant: small-caps; + } + .truncate-l { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } +} + +/* + + UTILITIES + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* Equivalent to .overflow-y-scroll */ + +.overflow-container { + overflow-y: scroll; +} + +.center { + margin-right: auto; + margin-left: auto; +} + +.mr-auto { margin-right: auto; } + +.ml-auto { margin-left: auto; } + +@media screen and (min-width: 30em){ + .center-ns { + margin-right: auto; + margin-left: auto; + } + .mr-auto-ns { margin-right: auto; } + .ml-auto-ns { margin-left: auto; } +} + +@media screen and (min-width: 30em) and (max-width: 60em){ + .center-m { + margin-right: auto; + margin-left: auto; + } + .mr-auto-m { margin-right: auto; } + .ml-auto-m { margin-left: auto; } +} + +@media screen and (min-width: 60em){ + .center-l { + margin-right: auto; + margin-left: auto; + } + .mr-auto-l { margin-right: auto; } + .ml-auto-l { margin-left: auto; } +} + +/* + + VISIBILITY + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +/* + Text that is hidden but accessible + Ref: http://snook.ca/archives/html_and_css/hiding-content-for-accessibility +*/ + +.clip { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); +} + +@media screen and (min-width: 30em) { + .clip-ns { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .clip-m { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +@media screen and (min-width: 60em) { + .clip-l { + position: fixed !important; + _position: absolute !important; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + } +} + +/* + + WHITE SPACE + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.ws-normal { white-space: normal; } + +.nowrap { white-space: nowrap; } + +.pre { white-space: pre; } + +@media screen and (min-width: 30em) { + .ws-normal-ns { white-space: normal; } + .nowrap-ns { white-space: nowrap; } + .pre-ns { white-space: pre; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ws-normal-m { white-space: normal; } + .nowrap-m { white-space: nowrap; } + .pre-m { white-space: pre; } +} + +@media screen and (min-width: 60em) { + .ws-normal-l { white-space: normal; } + .nowrap-l { white-space: nowrap; } + .pre-l { white-space: pre; } +} + +/* + + VERTICAL ALIGN + + Media Query Extensions: + -ns = not-small + -m = medium + -l = large + +*/ + +.v-base { vertical-align: baseline; } + +.v-mid { vertical-align: middle; } + +.v-top { vertical-align: top; } + +.v-btm { vertical-align: bottom; } + +@media screen and (min-width: 30em) { + .v-base-ns { vertical-align: baseline; } + .v-mid-ns { vertical-align: middle; } + .v-top-ns { vertical-align: top; } + .v-btm-ns { vertical-align: bottom; } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .v-base-m { vertical-align: baseline; } + .v-mid-m { vertical-align: middle; } + .v-top-m { vertical-align: top; } + .v-btm-m { vertical-align: bottom; } +} + +@media screen and (min-width: 60em) { + .v-base-l { vertical-align: baseline; } + .v-mid-l { vertical-align: middle; } + .v-top-l { vertical-align: top; } + .v-btm-l { vertical-align: bottom; } +} + +/* + + HOVER EFFECTS + Docs: http://tachyons.io/docs/themes/hovers/ + + - Dim + - Glow + - Hide Child + - Underline text + - Grow + - Pointer + - Shadow + +*/ + +/* + + Dim element on hover by adding the dim class. + +*/ + +.dim { + opacity: 1; + transition: opacity .15s ease-in; +} + +.dim:hover, +.dim:focus { + opacity: .5; + transition: opacity .15s ease-in; +} + +.dim:active { + opacity: .8; transition: opacity .15s ease-out; +} + +/* + + Animate opacity to 100% on hover by adding the glow class. + +*/ + +.glow { + transition: opacity .15s ease-in; +} + +.glow:hover, +.glow:focus { + opacity: 1; + transition: opacity .15s ease-in; +} + +/* + + Hide child & reveal on hover: + + Put the hide-child class on a parent element and any nested element with the + child class will be hidden and displayed on hover or focus. + +
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
Hidden until hover or focus
+
+*/ + +.hide-child .child { + opacity: 0; + transition: opacity .15s ease-in; +} + +.hide-child:hover .child, +.hide-child:focus .child, +.hide-child:active .child { + opacity: 1; + transition: opacity .15s ease-in; +} + +.underline-hover:hover, +.underline-hover:focus { + text-decoration: underline; +} + +/* Can combine this with overflow-hidden to make background images grow on hover + * even if you are using background-size: cover */ + +.grow { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform 0.25s ease-out; + transition: transform 0.25s ease-out; + transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out; +} + +.grow:hover, +.grow:focus { + -webkit-transform: scale(1.05); + transform: scale(1.05); +} + +.grow:active { + -webkit-transform: scale(.90); + transform: scale(.90); +} + +.grow-large { + -moz-osx-font-smoothing: grayscale; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + -webkit-transform: translateZ(0); + transform: translateZ(0); + transition: -webkit-transform .25s ease-in-out; + transition: transform .25s ease-in-out; + transition: transform .25s ease-in-out, -webkit-transform .25s ease-in-out; +} + +.grow-large:hover, +.grow-large:focus { + -webkit-transform: scale(1.2); + transform: scale(1.2); +} + +.grow-large:active { + -webkit-transform: scale(.95); + transform: scale(.95); +} + +/* Add pointer on hover */ + +.pointer:hover { + cursor: pointer; +} + +/* + Add shadow on hover. + + Performant box-shadow animation pattern from + http://tobiasahlin.com/blog/how-to-animate-box-shadow/ +*/ + +.shadow-hover { + cursor: pointer; + position: relative; + transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover::after { + content: ''; + box-shadow: 0px 0px 16px 2px rgba(0, 0, 0, .2); + border-radius: inherit; + opacity: 0; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: -1; + transition: opacity 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); +} + +.shadow-hover:hover::after, +.shadow-hover:focus::after { + opacity: 1; +} + +/* Combine with classes in skins and skins-pseudo for + * many different transition possibilities. */ + +.bg-animate, +.bg-animate:hover, +.bg-animate:focus { + transition: background-color .15s ease-in-out; +} + +/* + + Z-INDEX + + Base + z = z-index + + Modifiers + -0 = literal value 0 + -1 = literal value 1 + -2 = literal value 2 + -3 = literal value 3 + -4 = literal value 4 + -5 = literal value 5 + -999 = literal value 999 + -9999 = literal value 9999 + + -max = largest accepted z-index value as integer + + -inherit = string value inherit + -initial = string value initial + -unset = string value unset + + MDN: https://developer.mozilla.org/en/docs/Web/CSS/z-index + Spec: http://www.w3.org/TR/CSS2/zindex.html + Articles: + https://philipwalton.com/articles/what-no-one-told-you-about-z-index/ + + Tips on extending: + There might be a time worth using negative z-index values. + Or if you are using tachyons with another project, you might need to + adjust these values to suit your needs. + +*/ + +.z-0 { z-index: 0; } + +.z-1 { z-index: 1; } + +.z-2 { z-index: 2; } + +.z-3 { z-index: 3; } + +.z-4 { z-index: 4; } + +.z-5 { z-index: 5; } + +.z-999 { z-index: 999; } + +.z-9999 { z-index: 9999; } + +.z-max { + z-index: 2147483647; +} + +.z-inherit { z-index: inherit; } + +.z-initial { z-index: auto; z-index: initial; } + +.z-unset { z-index: unset; } + +/* + + NESTED + Tachyons module for styling nested elements + that are generated by a cms. + +*/ + +.nested-copy-line-height p, +.nested-copy-line-height ul, +.nested-copy-line-height ol { + line-height: 1.5; +} + +.nested-headline-line-height h1, +.nested-headline-line-height h2, +.nested-headline-line-height h3, +.nested-headline-line-height h4, +.nested-headline-line-height h5, +.nested-headline-line-height h6 { + line-height: 1.25; +} + +.nested-list-reset ul, +.nested-list-reset ol { + padding-left: 0; + margin-left: 0; + list-style-type: none; +} + +.nested-copy-indent p+p { + text-indent: 1em; + margin-top: 0; + margin-bottom: 0; +} + +.nested-copy-separator p+p { + margin-top: 1.5em; +} + +.nested-img img { + width: 100%; + max-width: 100%; + display: block; +} + +.nested-links a { + color: #357edd; + transition: color .15s ease-in; +} + +.nested-links a:hover, +.nested-links a:focus { + color: #96ccff; + transition: color .15s ease-in; +} + +/* + + STYLES + + Add custom styles here. + +*/ + +/* Variables */ + +/* Importing here will allow you to override any variables in the modules */ + +/* + + Tachyons + COLOR VARIABLES + + Grayscale + - Solids + - Transparencies + Colors + +*/ + +/* + + CUSTOM MEDIA QUERIES + + Media query values can be changed to fit your own content. + There are no magic bullets when it comes to media query width values. + They should be declared in em units - and they should be set to meet + the needs of your content. You can also add additional media queries, + or remove some of the existing ones. + + These media queries can be referenced like so: + + @media (--breakpoint-not-small) { + .medium-and-larger-specific-style { + background-color: red; + } + } + + @media (--breakpoint-medium) { + .medium-screen-specific-style { + background-color: red; + } + } + + @media (--breakpoint-large) { + .large-and-larger-screen-specific-style { + background-color: red; + } + } + +*/ + +/* Media Queries */ + +/* Debugging */ + +/* @import 'tachyons/src/_debug-children'; +@import 'tachyons/src/_debug-grid'; */ + +/* Uncomment out the line below to help debug layout issues */ + +/* @import 'tachyons/src/_debug'; */ + +pre, .pre { + overflow-x: auto; + overflow-y: hidden; + overflow: scroll; +} + +pre code { + display: block; + padding: 1.5em 1.5em; + white-space: pre; + font-size: .875rem; + line-height: 2; + +} + +pre { + background-color: #222; + color: #ddd; + white-space: pre; + + -webkit-hyphens: none; + + -ms-hyphens: none; + + hyphens: none; + position: relative; +} + +/* pagination.html: https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L117 */ + +.pagination { + margin: 3rem 0; +} + +.pagination li { + display: inline-block; + margin-right: .375rem; + font-size: .875rem; + margin-bottom: 2.5em; +} + +.pagination li a { + padding: .5rem .625rem; + background-color: white; + color: #333; + border: 1px solid #ddd; + border-radius: 3px; + text-decoration: none; +} + +.pagination li.disabled { + display: none; +} + +.pagination li.active a:link, +.pagination li.active a:active, +.pagination li.active a:visited { + background-color: #ddd; +} + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.facebook, .twitter, .instagram, .youtube, .github, .gitlab, .keybase, .linkedin, .medium, .mastodon, .slack, .stackoverflow, .rss { + fill: #BABABA; +} + +.new-window { + opacity: 0; + display: inline-block; + vertical-align: top; +} + +.link-transition:hover .new-window{ + opacity: 1; +} + +.facebook:hover { + fill: #3b5998; +} + +.twitter:hover { + fill: #1da1f2; +} + +.instagram:hover { + fill: #e1306c; +} + +.youtube:hover { + fill: #cd201f; +} + +.github:hover { + fill: #6cc644; +} + +.gitlab:hover { + fill: #FC6D26; +} + +.keybase:hover { + fill: #3d76ff; +} + +.linkedin:hover { + fill: #0077b5 +} + +.medium:hover { + fill: #0077b5 +} + +.mastodon:hover { + fill: #3088d4; +} + +.slack:hover { + fill: #E01E5A; +} + +.stackoverflow:hover { + fill: #f48024; +} + +.rss:hover{ + fill: #ff6f1a; +} + +/* Put your custom styles here and run `npm start` from the "src" directory on */ + +#TableOfContents ul li { + margin-bottom: 1em; +} + +.lh-copy blockquote { + display: block; + font-size: .875em; + margin-left: 2rem; + margin-top: 2rem; + margin-bottom: 2rem; + border-left: 4px solid #ccc; + padding-left: 1rem; + +} diff --git a/public/e_f/index.html b/public/e_f/index.html index 42d34e1..79c6dd8 100644 --- a/public/e_f/index.html +++ b/public/e_f/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | E+F + E+F | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + + @@ -160,7 +166,7 @@

In questa sezione verrà prossimamente pubblicato il programma relativo -all'evento.

+all’evento.

diff --git a/public/files/riapertura_termini.pdf b/public/files/riapertura_termini.pdf new file mode 100644 index 0000000..ca28995 Binary files /dev/null and b/public/files/riapertura_termini.pdf differ diff --git a/public/i_finalisti/index.html b/public/i_finalisti/index.html index 8b659e8..3bc787c 100644 --- a/public/i_finalisti/index.html +++ b/public/i_finalisti/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Finalisti + Finalisti | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + + @@ -231,7 +237,7 @@ imparare sempre cose nuove da ogni esperienza.

Mi chiamo Chiara Cataldo e frequento il Liceo “Regina Margherita” di Torino. Ho 16 anni e sin dalle medie ho avuto un particolare interesse per ciò -che riguarda il diritto italiano e l'economia. Ho deciso di +che riguarda il diritto italiano e l’economia. Ho deciso di partecipare alle olimpiadi di economia e finanza dopo che questa possibilità mi è stata proposta da alcune professoresse della mia scuola. Inizialmente ho preso la competizione alla leggera, come un @@ -253,7 +259,7 @@ amici con cui mi piace uscire nei momenti liberi. Sono stato davvero contento quando mi è stato comunicato che avrei partecipato alla fase nazionale delle Olimpiadi, infatti ho subito accettato di partecipare ed andare fino Atrieste anche se è molto lontana da casa mia. E’ -un'opportunità che la scuola mi ha offerto e non ho voluto +un’opportunità che la scuola mi ha offerto e non ho voluto rinunciare. Non so quale sarà il risultato finale ma sono contento già solo per il fatto di poter vivere questa nuova ed emozionante esperienza. vi ringrazio.

@@ -281,7 +287,7 @@ del Liceo Scientifico “Luigi Siciliani” di Catanzaro. A scuola, mi piace studiare in particolar modo Geostoria e Matematica. Grazie ad un corso organizzato dalla professoressa Zaira -Silipo, mi sono potuto avvicinare allo studio dell'Economia. Durante +Silipo, mi sono potuto avvicinare allo studio dell’Economia. Durante il mio tempo libero mi piace stare con i miei amici, leggere e giocare a tennis.

Giada Montenegro

@@ -339,7 +345,7 @@ arricchiscono di curiosità, bellezza e grandi soddisfazioni.

terza A dell’Istituto Economico Tecnologico “Bramante Genga” di Pesaro, città dove risiedo, con ottimi risultati. Ho buone capacità di -organizzazione e di lavoro in equipe grazie anche all'esperienza di +organizzazione e di lavoro in equipe grazie anche all’esperienza di amministratore delegato della mini impresa Ecodreamers cositutita nel progetto di Alternanza Scuola Lavoro. Ritengo di avere un carattere solare e disponibile, amo tutte le novità sportive, in particolare il diff --git a/public/index.html b/public/index.html index 3c18a92..6cd88e4 100644 --- a/public/index.html +++ b/public/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Olimpiadi di Economia e Finanza + Olimpiadi di Economia e Finanza | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -36,12 +38,13 @@ - + + @@ -138,6 +141,9 @@ + + + @@ -174,8 +180,8 @@
Al via la seconda edizione delle Olimpiadi di Economia e Finanza, una -competizione organizzata dal Ministero dell'Istruzione, -dell'Università e della Ricerca - Direzione Generale per gli +competizione organizzata dal Ministero dell’Istruzione, +dell’Università e della Ricerca - Direzione Generale per gli Ordinamenti Scolastici e per la valutazione del sistema nazionale di istruzione, in collaborazione con il Comitato per la programmazione e il coordinamento delle attività di educazione finanziaria.

@@ -206,6 +212,33 @@ il coordinamento delle attività di educazione finanziaria.

+
+
+
+ +
+

+ + Riapertura termini iscrizioni seconda edizione delle OEF + +

+
+ Riapertura delle iscrizioni Dal 23 al 28 novembre 2020 si riapriranno i termini di iscrizione per partecipare alla seconda edizione della competizione, rimasta in sospeso a livello di fasi regionali. +Con l’occasione, sarà possibile: + perfezionare un’iscrizione rimasta incompleta iscriversi ex-novo La procedura da seguire è, in entrambi i casi, molto semplice. +Vi preghiamo però di seguire attentamente i passaggi indicati all’interno di questo, a seconda delle proprie esigenze. +
+ continua + +
+
+
+
+ +
+ +
+
@@ -217,7 +250,7 @@ il coordinamento delle attività di educazione finanziaria.

- In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell'evolversi dell'emergenza epidemiologica. + In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell’evolversi dell’emergenza epidemiologica. Restano comunque aperte le iscrizioni alla competizione.
continua @@ -237,40 +270,14 @@ Restano comunque aperte le iscrizioni alla competizione.

- - Avvio delle iscrizioni 2019/2020 + + Aggiornato elenco dei referenti regionali

- Si comunica che la piattaforma per la gestione delle iscrizioni è aperta. Si segua questo link per accedere alla piattaforma e si inserisca la password: -subscribe -Si ricorda che il termine ultimo delle iscrizioni è il 13.03. + E’ stato aggiornato l’elenco dei referenti regionali con i dati relativi alla Regione Puglia.
- continua - -
-
-
-
- -
- -
- -
-
-
- -
-

- - Apertura del sistema di supporto - -

-
- Si comunica che a partire da oggi è attivo il sistema di supporto tramite ticket. Per accedere al servizio cliccare qui. -
- continua + continua
@@ -286,6 +293,18 @@ Si ricorda che il termine ultimo delle iscrizioni è il 13.03.

Altre notizie

+

+ + Avvio delle iscrizioni 2019/2020 + +

+ +

+ + Apertura del sistema di supporto + +

+

Aggiornamento dell'elenco referenti regionali @@ -298,18 +317,6 @@ Si ricorda che il termine ultimo delle iscrizioni è il 13.03.

-

- - L'economia circolare - -

- -

- - Elenco dei referenti regionali - -

- diff --git a/public/index.xml b/public/index.xml index 4667737..7a6caa2 100644 --- a/public/index.xml +++ b/public/index.xml @@ -6,21 +6,42 @@ Recent content in Olimpiadi di Economia e Finanza on Olimpiadi di Economia e Finanza 2019/2020 Hugo -- gohugo.io it-IT - Sat, 07 Mar 2020 19:13:01 +0100 + Thu, 19 Nov 2020 13:11:43 +0100 + + Riapertura termini iscrizioni seconda edizione delle OEF + https://www.olimpiadi-economiaefinanza.it/notizie/riapertura_iscrizioni/ + Thu, 19 Nov 2020 13:11:43 +0100 + + https://www.olimpiadi-economiaefinanza.it/notizie/riapertura_iscrizioni/ + Riapertura delle iscrizioni Dal 23 al 28 novembre 2020 si riapriranno i termini di iscrizione per partecipare alla seconda edizione della competizione, rimasta in sospeso a livello di fasi regionali. +Con l’occasione, sarà possibile: + perfezionare un’iscrizione rimasta incompleta iscriversi ex-novo La procedura da seguire è, in entrambi i casi, molto semplice. +Vi preghiamo però di seguire attentamente i passaggi indicati all’interno di questo, a seconda delle proprie esigenze. + + Sospensione della fase regionale delle Olimpiadi di Economia e Finanza 2020 https://www.olimpiadi-economiaefinanza.it/notizie/rinvio_gara_regionale/ Sat, 07 Mar 2020 19:13:01 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/rinvio_gara_regionale/ - In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell'evolversi dell'emergenza epidemiologica. + In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell’evolversi dell’emergenza epidemiologica. Restano comunque aperte le iscrizioni alla competizione. + + Aggiornato elenco dei referenti regionali + https://www.olimpiadi-economiaefinanza.it/notizie/aggiornato_elenco_referenti_puglia/ + Tue, 03 Mar 2020 10:01:41 +0100 + + https://www.olimpiadi-economiaefinanza.it/notizie/aggiornato_elenco_referenti_puglia/ + E’ stato aggiornato l’elenco dei referenti regionali con i dati relativi alla Regione Puglia. + + Avvio delle iscrizioni 2019/2020 https://www.olimpiadi-economiaefinanza.it/notizie/avvio_iscrizioni/ @@ -67,9 +88,9 @@ Se siete interessati, vi suggeriamo di consultare il portale di RAI Scuola che o Tue, 18 Feb 2020 13:12:07 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/economia_circolare/ - Se vi interessa approfondire il tema dell'economia circolare vi segnaliamo tre contributi molto diversi per approccio ma che propongono punti di vista e considerazioni di grande suggestione. Si tratta di materiali messi a disposizione da RAI scuola. + Se vi interessa approfondire il tema dell’economia circolare vi segnaliamo tre contributi molto diversi per approccio ma che propongono punti di vista e considerazioni di grande suggestione. Si tratta di materiali messi a disposizione da RAI scuola. Il primo contributo è un’intervista al filosofo della scienza Telmo Piovani dal titolo: Ecologia ed economia. Una radice comune. -Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello che affronta il tema: L'economia circolare con le mosche. +Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello che affronta il tema: L’economia circolare con le mosche. @@ -87,7 +108,7 @@ Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello c Mon, 17 Feb 2020 18:06:16 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/umanager/ - Per allenarsi ad un'Olimpiade anche un ‘gioco’ può essere utile. Quello che vi proponiamo, però, è un gioco un po’ particolare. + Per allenarsi ad un’Olimpiade anche un ‘gioco’ può essere utile. Quello che vi proponiamo, però, è un gioco un po’ particolare. Si tratta, infatti, di un management game, realizzato dall’Istituto per le tecnologie didattiche del CNR di Palermo e progettato per favorire lo sviluppo delle competenze economico finanziarie e le abilità imprenditoriali degli studenti. Per levarsi ogni curiosità e confrontarsi con quanto si sa e si è capaci di fare, è sufficiente collegarsi all’indirizzo https://umanager. diff --git a/public/materiali/index.html b/public/materiali/index.html index 45c60a4..10bfaf1 100644 --- a/public/materiali/index.html +++ b/public/materiali/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Materiali + Materiali | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -42,6 +44,7 @@ + @@ -138,6 +141,9 @@ + + +
@@ -189,7 +195,7 @@ questi collegamenti:

Sono inoltre disponibili le prove della precedente edizione con i relativi correttori.

-

Fase d'istituto

+

Fase d’istituto

Vi suggeriamo inoltre uManager un serious -game per l'educazione all'imprenditorialità.

+game per l’educazione all’imprenditorialità.

Altri materiali

diff --git a/public/notizie/index.xml b/public/notizie/index.xml index cc493e0..3ce0ca6 100644 --- a/public/notizie/index.xml +++ b/public/notizie/index.xml @@ -6,21 +6,42 @@ Recent content in Notizie on Olimpiadi di Economia e Finanza 2019/2020 Hugo -- gohugo.io it-IT - Sat, 07 Mar 2020 19:13:01 +0100 + Thu, 19 Nov 2020 13:11:43 +0100 + + Riapertura termini iscrizioni seconda edizione delle OEF + https://www.olimpiadi-economiaefinanza.it/notizie/riapertura_iscrizioni/ + Thu, 19 Nov 2020 13:11:43 +0100 + + https://www.olimpiadi-economiaefinanza.it/notizie/riapertura_iscrizioni/ + Riapertura delle iscrizioni Dal 23 al 28 novembre 2020 si riapriranno i termini di iscrizione per partecipare alla seconda edizione della competizione, rimasta in sospeso a livello di fasi regionali. +Con l’occasione, sarà possibile: + perfezionare un’iscrizione rimasta incompleta iscriversi ex-novo La procedura da seguire è, in entrambi i casi, molto semplice. +Vi preghiamo però di seguire attentamente i passaggi indicati all’interno di questo, a seconda delle proprie esigenze. + + Sospensione della fase regionale delle Olimpiadi di Economia e Finanza 2020 https://www.olimpiadi-economiaefinanza.it/notizie/rinvio_gara_regionale/ Sat, 07 Mar 2020 19:13:01 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/rinvio_gara_regionale/ - In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell'evolversi dell'emergenza epidemiologica. + In applicazione di quanto stabilito nella nota congiunta a firma del Capo Dipartimento per il sistema educativo di istruzione e di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in considerazione dell’evolversi dell’emergenza epidemiologica. Restano comunque aperte le iscrizioni alla competizione. + + Aggiornato elenco dei referenti regionali + https://www.olimpiadi-economiaefinanza.it/notizie/aggiornato_elenco_referenti_puglia/ + Tue, 03 Mar 2020 10:01:41 +0100 + + https://www.olimpiadi-economiaefinanza.it/notizie/aggiornato_elenco_referenti_puglia/ + E’ stato aggiornato l’elenco dei referenti regionali con i dati relativi alla Regione Puglia. + + Avvio delle iscrizioni 2019/2020 https://www.olimpiadi-economiaefinanza.it/notizie/avvio_iscrizioni/ @@ -67,9 +88,9 @@ Se siete interessati, vi suggeriamo di consultare il portale di RAI Scuola che o Tue, 18 Feb 2020 13:12:07 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/economia_circolare/ - Se vi interessa approfondire il tema dell'economia circolare vi segnaliamo tre contributi molto diversi per approccio ma che propongono punti di vista e considerazioni di grande suggestione. Si tratta di materiali messi a disposizione da RAI scuola. + Se vi interessa approfondire il tema dell’economia circolare vi segnaliamo tre contributi molto diversi per approccio ma che propongono punti di vista e considerazioni di grande suggestione. Si tratta di materiali messi a disposizione da RAI scuola. Il primo contributo è un’intervista al filosofo della scienza Telmo Piovani dal titolo: Ecologia ed economia. Una radice comune. -Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello che affronta il tema: L'economia circolare con le mosche. +Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello che affronta il tema: L’economia circolare con le mosche. @@ -87,7 +108,7 @@ Il secondo è un video che ha per protagonista l’entomologa Laura Maistrello c Mon, 17 Feb 2020 18:06:16 +0100 https://www.olimpiadi-economiaefinanza.it/notizie/umanager/ - Per allenarsi ad un'Olimpiade anche un ‘gioco’ può essere utile. Quello che vi proponiamo, però, è un gioco un po’ particolare. + Per allenarsi ad un’Olimpiade anche un ‘gioco’ può essere utile. Quello che vi proponiamo, però, è un gioco un po’ particolare. Si tratta, infatti, di un management game, realizzato dall’Istituto per le tecnologie didattiche del CNR di Palermo e progettato per favorire lo sviluppo delle competenze economico finanziarie e le abilità imprenditoriali degli studenti. Per levarsi ogni curiosità e confrontarsi con quanto si sa e si è capaci di fare, è sufficiente collegarsi all’indirizzo https://umanager. diff --git a/public/notizie/lezione_economia/index.html b/public/notizie/lezione_economia/index.html index bd1b056..dfd7c4b 100644 --- a/public/notizie/lezione_economia/index.html +++ b/public/notizie/lezione_economia/index.html @@ -4,9 +4,12 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Costruire insieme una lezione di economia + Costruire insieme una lezione di economia | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +17,7 @@ - + @@ -23,6 +26,7 @@ + @@ -51,6 +55,7 @@ Se siete interessati, vi suggeriamo di consultare il portale di RAI Scuola che o Potrebbe essere un buon sistema per la preparazione alle Olimpiadi coinvolgente e, soprattutto, utile. Se siete interessati, vi suggeriamo di consultare il portale di RAI Scuola che ospiterà il vostro lavoro e lo renderà disponibile a tutti gli interessati."/> + @@ -147,6 +152,9 @@ Se siete interessati, vi suggeriamo di consultare il portale di RAI Scuola che o + + + diff --git a/public/notizie/page/2/index.html b/public/notizie/page/2/index.html index 0f23f17..f57c806 100644 --- a/public/notizie/page/2/index.html +++ b/public/notizie/page/2/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Notizie + Notizie | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -36,12 +38,13 @@ - + + @@ -138,6 +141,9 @@ + + + @@ -165,6 +171,37 @@
+ Notizie +

+ + La pillola della settimana + +

+
+ Questa settimana pubblichiamo un interessante video sui Titoli di Stato. +Per altri materiali visita la sezione dedicata e la Biblioteca Ecofinanziaria. +
+
+
+
+ +
+
+ Notizie +

+ + Pubblicata nuova sezione Biblioteca Econfinanziaria + +

+
+ E’ stata aggiunta sul sito una nuova sezione intitolata “Biblioteca Ecofinanziaria” contenente materiale per studenti e docenti. +
+
+
+
+ +
+
Notizie

diff --git a/public/notizie/pillola_settimana_1/index.html b/public/notizie/pillola_settimana_1/index.html index d237259..8f55e60 100644 --- a/public/notizie/pillola_settimana_1/index.html +++ b/public/notizie/pillola_settimana_1/index.html @@ -4,9 +4,11 @@ - Olimpiadi di Economia e Finanza 2019/2020 | La pillola della settimana + La pillola della settimana | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +16,7 @@ - + @@ -23,6 +25,7 @@ + @@ -48,6 +51,7 @@ Per altri materiali visita la sezione dedicata e la Biblioteca Ecofinanziaria."> + @@ -144,6 +148,9 @@ Per altri materiali visita la sezione dedicata e la Biblioteca Ecofinanziaria."/ + + +

diff --git a/public/notizie/pubblicati_referenti_regionali/index.html b/public/notizie/pubblicati_referenti_regionali/index.html index d46d56d..0f77d3b 100644 --- a/public/notizie/pubblicati_referenti_regionali/index.html +++ b/public/notizie/pubblicati_referenti_regionali/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Elenco dei referenti regionali + Elenco dei referenti regionali | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -45,6 +47,7 @@ + @@ -141,6 +144,9 @@ + + +
diff --git a/public/notizie/pubblicazione_bando/index.html b/public/notizie/pubblicazione_bando/index.html index 90f76f5..3c6311e 100644 --- a/public/notizie/pubblicazione_bando/index.html +++ b/public/notizie/pubblicazione_bando/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Pubblicazione del bando + Pubblicazione del bando | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -45,6 +47,7 @@ + @@ -141,6 +144,9 @@ + + + diff --git a/public/notizie/pubblicazione_sillabo/index.html b/public/notizie/pubblicazione_sillabo/index.html index 2dc3061..fb8421f 100644 --- a/public/notizie/pubblicazione_sillabo/index.html +++ b/public/notizie/pubblicazione_sillabo/index.html @@ -4,9 +4,10 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Pubblicazione del sillabo 2020 + Pubblicazione del sillabo 2020 | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +15,7 @@ - + @@ -23,6 +24,7 @@ + @@ -45,6 +47,7 @@ + @@ -141,6 +144,9 @@ + + + diff --git a/public/notizie/riapertura_iscrizioni/index.html b/public/notizie/riapertura_iscrizioni/index.html new file mode 100644 index 0000000..25ca41d --- /dev/null +++ b/public/notizie/riapertura_iscrizioni/index.html @@ -0,0 +1,243 @@ + + + + + + + Riapertura termini iscrizioni seconda edizione delle OEF | Olimpiadi di Economia e Finanza 2019/2020 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+ + + +
+ + +
+ +
+

+ + NOTIZIE +

+

Riapertura termini iscrizioni seconda edizione delle OEF

+ + + + +
+ +

Riapertura delle iscrizioni

+

Dal 23 al 28 novembre 2020 si riapriranno i termini di iscrizione per +partecipare alla seconda edizione della competizione, rimasta in +sospeso a livello di fasi regionali.

+

Con l’occasione, sarà possibile:

+
    +
  1. perfezionare un’iscrizione rimasta incompleta
    2. +
  2. iscriversi ex-novo
    3. +
+

La procedura da seguire è, in entrambi i casi, molto semplice.

+

Vi preghiamo però di seguire attentamente i passaggi indicati +all’interno di questo, a seconda +delle proprie esigenze.

+
    + +
+
+ +
+
+ + + +
+ +
+ + + + + + + + + diff --git a/public/notizie/rinvio_gara_regionale/index.html b/public/notizie/rinvio_gara_regionale/index.html index 0f64fa9..f5f210d 100644 --- a/public/notizie/rinvio_gara_regionale/index.html +++ b/public/notizie/rinvio_gara_regionale/index.html @@ -4,9 +4,11 @@ - Olimpiadi di Economia e Finanza 2019/2020 | Sospensione della fase regionale delle Olimpiadi di Economia e Finanza 2020 + Sospensione della fase regionale delle Olimpiadi di Economia e Finanza 2020 | Olimpiadi di Economia e Finanza 2019/2020 - + + @@ -14,7 +16,7 @@ - + @@ -23,19 +25,20 @@ + - - @@ -45,9 +48,10 @@ Restano comunque aperte le iscrizioni alla competizione."> - + @@ -144,6 +148,9 @@ Restano comunque aperte le iscrizioni alla competizione."/> + + + @@ -177,7 +184,7 @@ di formazione e del Capo Dipartimento per le risorse umane, finanziarie e strumentali, num. 278 del 6 marzo 2020, è sospeso lo svolgimento delle fasi regionali delle Olimpiadi di Economia e finanza. Le nuove date verranno comunicate successivamente in -considerazione dell'evolversi dell'emergenza epidemiologica.

+considerazione dell’evolversi dell’emergenza epidemiologica.

Restano comunque aperte le iscrizioni alla competizione.