Skip to content

Instantly share code, notes, and snippets.

@vilav
Created June 3, 2016 15:05
Show Gist options
  • Save vilav/b79c6b8009609345b5143388e639b3a9 to your computer and use it in GitHub Desktop.
Save vilav/b79c6b8009609345b5143388e639b3a9 to your computer and use it in GitHub Desktop.
Responsive typography for Pavilion CSS Framework
/*
add to: scss/parts/*
include in: scss/pavilion.scss
run grunt (or compile in another way)
*/
@media(max-width: $phone-landscape-size - 1) {
.pp-h1 {
font-size: 3.157em;
}
.pp-h2 {
font-size: 2.369em;
}
.pp-h3 {
font-size: 1.777em;
}
.pp-h4 {
font-size: 1.333em;
}
.pp-h5 {
font-size: 1em;
}
.pp-h6 {
font-size: 0.75em;
}
}
@media(min-width: $phone-landscape-size) and (max-width: $tablet-portrait-size - 1) {
.pl-h1 {
font-size: 3.157em;
}
.pl-h2 {
font-size: 2.369em;
}
.pl-h3 {
font-size: 1.777em;
}
.pl-h4 {
font-size: 1.333em;
}
.pl-h5 {
font-size: 1em;
}
.pl-h6 {
font-size: 0.75em;
}
}
@media(min-width: $tablet-portrait-size) and (max-width: $tablet-landscape-size - 1) {
.tp-h1 {
font-size: 3.157em;
}
.tp-h2 {
font-size: 2.369em;
}
.tp-h3 {
font-size: 1.777em;
}
.tp-h4 {
font-size: 1.333em;
}
.tp-h5 {
font-size: 1em;
}
.tp-h6 {
font-size: 0.75em;
}
}
@media(min-width: $tablet-landscape-size) and (max-width: $desktop-size - 1) {
.tl-h1 {
font-size: 3.157em;
}
.tl-h2 {
font-size: 2.369em;
}
.tl-h3 {
font-size: 1.777em;
}
.tl-h4 {
font-size: 1.333em;
}
.tl-h5 {
font-size: 1em;
}
.tl-h6 {
font-size: 0.75em;
}
}
@media(min-width: $desktop-size) {
.dt-h1 {
font-size: 3.157em;
}
.dt-h2 {
font-size: 2.369em;
}
.dt-h3 {
font-size: 1.777em;
}
.dt-h4 {
font-size: 1.333em;
}
.dt-h5 {
font-size: 1em;
}
.dt-h6 {
font-size: 0.75em;
}
}
/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}template,[hidden]{display:none}a{background-color:transparent}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}button,input,select,textarea{font:inherit}optgroup{font-weight:bold}button,input,select{overflow:visible}button,input,select,textarea{margin:0}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer}[disabled]{cursor:default}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}button:-moz-focusring,input:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}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}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}html{font-size:10px}@media (min-width: 768px){html{font-size:15px}}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;line-height:1.5;color:#333;font-size:16px}@media (min-width: 768px){body{font-size:18px}}*,*:before,*:after{box-sizing:border-box}.container,.container-full-width,.container-pp,.container-pl,.container-tp,.container-tl{margin:0 auto;padding-left:1rem;padding-right:1rem;padding-right:1.5rem;padding-left:1.5rem}@media (min-width: 768px){.container,.container-full-width,.container-pp,.container-pl,.container-tp,.container-tl{padding-right:1rem;padding-left:1rem}}.container:before,.container-full-width:before,.container-pp:before,.container-pl:before,.container-tp:before,.container-tl:before{content:" ";display:table}.container:after,.container-full-width:after,.container-pp:after,.container-pl:after,.container-tp:after,.container-tl:after{content:" ";display:table;clear:both}@media (min-width: 540px){.container,.container-tl,.container-tp,.container-pl{max-width:520px}}@media (min-width: 768px){.container,.container-tl,.container-tp{max-width:748px}}@media (min-width: 991px){.container,.container-tl{max-width:971px}}@media (min-width: 1200px){.container{max-width:1180px}}.row{margin-right:-1.5rem;margin-left:-1.5rem}@media (min-width: 768px){.row{margin-right:-1rem;margin-left:-1rem}}.row:before{content:" ";display:table}.row:after{content:" ";display:table;clear:both}.row [class^="col-"]{position:relative;width:100%;float:left;padding-right:1.5rem;padding-left:1.5rem}@media (min-width: 768px){.row [class^="col-"]{padding-right:1rem;padding-left:1rem}}.row .col-pp-20{width:20%}.row .col-pp-25{width:25%}.row .col-pp-33{width:33.3333%}.row .col-pp-40{width:40%}.row .col-pp-50{width:50%}.row .col-pp-60{width:60%}.row .col-pp-66{width:66.6666%}.row .col-pp-75{width:75%}.row .col-pp-80{width:80%}.row .col-pp-100{width:100%}@media (min-width: 540px){.row .col-pl-20{width:20%}.row .col-pl-25{width:25%}.row .col-pl-33{width:33.3333%}.row .col-pl-40{width:40%}.row .col-pl-50{width:50%}.row .col-pl-60{width:60%}.row .col-pl-66{width:66.6666%}.row .col-pl-75{width:75%}.row .col-pl-80{width:80%}.row .col-pl-100{width:100%}}@media (min-width: 768px){.row .col-tp-20{width:20%}.row .col-tp-25{width:25%}.row .col-tp-33{width:33.3333%}.row .col-tp-40{width:40%}.row .col-tp-50{width:50%}.row .col-tp-60{width:60%}.row .col-tp-66{width:66.6666%}.row .col-tp-75{width:75%}.row .col-tp-80{width:80%}.row .col-tp-100{width:100%}}@media (min-width: 991px){.row .col-tl-20{width:20%}.row .col-tl-25{width:25%}.row .col-tl-33{width:33.3333%}.row .col-tl-40{width:40%}.row .col-tl-50{width:50%}.row .col-tl-60{width:60%}.row .col-tl-66{width:66.6666%}.row .col-tl-75{width:75%}.row .col-tl-80{width:80%}.row .col-tl-100{width:100%}}@media (min-width: 1200px){.row .col-dt-20{width:20%}.row .col-dt-25{width:25%}.row .col-dt-33{width:33.3333%}.row .col-dt-40{width:40%}.row .col-dt-50{width:50%}.row .col-dt-60{width:60%}.row .col-dt-66{width:66.6666%}.row .col-dt-75{width:75%}.row .col-dt-80{width:80%}.row .col-dt-100{width:100%}}@media (max-width: 539px){.offset-pp-10{margin-left:10%}.offset-pp-20{margin-left:20%}.offset-pp-25{margin-left:25%}.offset-pp-30{margin-left:30%}.offset-pp-33{margin-left:33.3333%}.offset-pp-40{margin-left:40%}.offset-pp-50{margin-left:50%}.offset-pp-60{margin-left:60%}.offset-pp-66{margin-left:66.6666%}.offset-pp-75{margin-left:75%}.offset-pp-80{margin-left:80%}}@media (min-width: 540px){.offset-pl-10{margin-left:10%}.offset-pl-20{margin-left:20%}.offset-pl-25{margin-left:25%}.offset-pl-30{margin-left:30%}.offset-pl-33{margin-left:33.3333%}.offset-pl-40{margin-left:40%}.offset-pl-50{margin-left:50%}.offset-pl-60{margin-left:60%}.offset-pl-66{margin-left:66.6666%}.offset-pl-75{margin-left:75%}.offset-pl-80{margin-left:80%}}@media (min-width: 768px){.offset-tp-10{margin-left:10%}.offset-tp-20{margin-left:20%}.offset-tp-25{margin-left:25%}.offset-tp-30{margin-left:30%}.offset-tp-33{margin-left:33.3333%}.offset-tp-40{margin-left:40%}.offset-tp-50{margin-left:50%}.offset-tp-60{margin-left:60%}.offset-tp-66{margin-left:66.6666%}.offset-tp-75{margin-left:75%}.offset-tp-80{margin-left:80%}}@media (min-width: 991px){.offset-tl-10{margin-left:10%}.offset-tl-20{margin-left:20%}.offset-tl-25{margin-left:25%}.offset-tl-30{margin-left:30%}.offset-tl-33{margin-left:33.3333%}.offset-tl-40{margin-left:40%}.offset-tl-50{margin-left:50%}.offset-tl-60{margin-left:60%}.offset-tl-66{margin-left:66.6666%}.offset-tl-75{margin-left:75%}.offset-tl-80{margin-left:80%}}@media (min-width: 1200px){.offset-dt-10{margin-left:10%}.offset-dt-20{margin-left:20%}.offset-dt-25{margin-left:25%}.offset-dt-30{margin-left:30%}.offset-dt-33{margin-left:33.3333%}.offset-dt-40{margin-left:40%}.offset-dt-50{margin-left:50%}.offset-dt-60{margin-left:60%}.offset-dt-66{margin-left:66.6666%}.offset-dt-75{margin-left:75%}.offset-dt-80{margin-left:80%}}@media (max-width: 539px){.push-pp-10{left:10%}.push-pp-20{left:20%}.push-pp-25{left:25%}.push-pp-30{left:30%}.push-pp-33{left:33.3333%}.push-pp-40{left:40%}.push-pp-50{left:50%}.push-pp-60{left:60%}.push-pp-66{left:66.6666%}.push-pp-75{left:75%}.push-pp-80{left:80%}}@media (min-width: 540px){.push-pl-10{left:10%}.push-pl-20{left:20%}.push-pl-25{left:25%}.push-pl-30{left:30%}.push-pl-33{left:33.3333%}.push-pl-40{left:40%}.push-pl-50{left:50%}.push-pl-60{left:60%}.push-pl-66{left:66.6666%}.push-pl-75{left:75%}.push-pl-80{left:80%}}@media (min-width: 768px){.push-tp-10{left:10%}.push-tp-20{left:20%}.push-tp-25{left:25%}.push-tp-30{left:30%}.push-tp-33{left:33.3333%}.push-tp-40{left:40%}.push-tp-50{left:50%}.push-tp-60{left:60%}.push-tp-66{left:66.6666%}.push-tp-75{left:75%}.push-tp-80{left:80%}}@media (min-width: 991px){.push-tl-10{left:10%}.push-tl-20{left:20%}.push-tl-25{left:25%}.push-tl-30{left:30%}.push-tl-33{left:33.3333%}.push-tl-40{left:40%}.push-tl-50{left:50%}.push-tl-60{left:60%}.push-tl-66{left:66.6666%}.push-tl-75{left:75%}.push-tl-80{left:80%}}@media (min-width: 1200px){.push-dt-10{left:10%}.push-dt-20{left:20%}.push-dt-25{left:25%}.push-dt-30{left:30%}.push-dt-33{left:33.3333%}.push-dt-40{left:40%}.push-dt-50{left:50%}.push-dt-60{left:60%}.push-dt-66{left:66.6666%}.push-dt-75{left:75%}.push-dt-80{left:80%}}@media (max-width: 539px){.pull-pp-10{right:10%}.pull-pp-20{right:20%}.pull-pp-25{right:25%}.pull-pp-30{right:30%}.pull-pp-33{right:33.3333%}.pull-pp-40{right:40%}.pull-pp-50{right:50%}.pull-pp-60{right:60%}.pull-pp-66{right:66.6666%}.pull-pp-75{right:75%}.pull-pp-80{right:80%}}@media (min-width: 540px){.pull-pl-10{right:10%}.pull-pl-20{right:20%}.pull-pl-25{right:25%}.pull-pl-30{right:30%}.pull-pl-33{right:33.3333%}.pull-pl-40{right:40%}.pull-pl-50{right:50%}.pull-pl-60{right:60%}.pull-pl-66{right:66.6666%}.pull-pl-75{right:75%}.pull-pl-80{right:80%}}@media (min-width: 768px){.pull-tp-10{right:10%}.pull-tp-20{right:20%}.pull-tp-25{right:25%}.pull-tp-30{right:30%}.pull-tp-33{right:33.3333%}.pull-tp-40{right:40%}.pull-tp-50{right:50%}.pull-tp-60{right:60%}.pull-tp-66{right:66.6666%}.pull-tp-75{right:75%}.pull-tp-80{right:80%}}@media (min-width: 991px){.pull-tl-10{right:10%}.pull-tl-20{right:20%}.pull-tl-25{right:25%}.pull-tl-30{right:30%}.pull-tl-33{right:33.3333%}.pull-tl-40{right:40%}.pull-tl-50{right:50%}.pull-tl-60{right:60%}.pull-tl-66{right:66.6666%}.pull-tl-75{right:75%}.pull-tl-80{right:80%}}@media (min-width: 1200px){.pull-dt-10{right:10%}.pull-dt-20{right:20%}.pull-dt-25{right:25%}.pull-dt-30{right:30%}.pull-dt-33{right:33.3333%}.pull-dt-40{right:40%}.pull-dt-50{right:50%}.pull-dt-60{right:60%}.pull-dt-66{right:66.6666%}.pull-dt-75{right:75%}.pull-dt-80{right:80%}}.display-flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row}.row-flex{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:row;flex-direction:row;margin-right:-1.5rem;margin-left:-1.5rem}@media (min-width: 768px){.row-flex{margin-right:-1rem;margin-left:-1rem}}.row-flex:before{content:" ";display:table}.row-flex:after{content:" ";display:table;clear:both}.row-flex .col{position:relative;display:block;-ms-flex:1;flex:1;padding-right:1.5rem;padding-left:1.5rem}@media (min-width: 768px){.row-flex .col{padding-right:1rem;padding-left:1rem}}.row-flex [class^="col-"]{position:relative;-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%;padding-right:1.5rem;padding-left:1.5rem}@media (min-width: 768px){.row-flex [class^="col-"]{padding-right:1rem;padding-left:1rem}}.row-flex .col-pp-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-flex .col-pp-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-flex .col-pp-33{-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row-flex .col-pp-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row-flex .col-pp-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-flex .col-pp-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row-flex .col-pp-66{-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row-flex .col-pp-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row-flex .col-pp-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row-flex .col-pp-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}@media (min-width: 540px){.row-flex .col-pl-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-flex .col-pl-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-flex .col-pl-33{-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row-flex .col-pl-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row-flex .col-pl-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-flex .col-pl-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row-flex .col-pl-66{-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row-flex .col-pl-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row-flex .col-pl-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row-flex .col-pl-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 768px){.row-flex .col-tp-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-flex .col-tp-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-flex .col-tp-33{-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row-flex .col-tp-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row-flex .col-tp-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-flex .col-tp-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row-flex .col-tp-66{-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row-flex .col-tp-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row-flex .col-tp-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row-flex .col-tp-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 991px){.row-flex .col-tl-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-flex .col-tl-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-flex .col-tl-33{-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row-flex .col-tl-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row-flex .col-tl-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-flex .col-tl-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row-flex .col-tl-66{-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row-flex .col-tl-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row-flex .col-tl-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row-flex .col-tl-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}@media (min-width: 1200px){.row-flex .col-dt-20{-ms-flex:0 0 20%;flex:0 0 20%;max-width:20%}.row-flex .col-dt-25{-ms-flex:0 0 25%;flex:0 0 25%;max-width:25%}.row-flex .col-dt-33{-ms-flex:0 0 33.3333%;flex:0 0 33.3333%;max-width:33.3333%}.row-flex .col-dt-40{-ms-flex:0 0 40%;flex:0 0 40%;max-width:40%}.row-flex .col-dt-50{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}.row-flex .col-dt-60{-ms-flex:0 0 60%;flex:0 0 60%;max-width:60%}.row-flex .col-dt-66{-ms-flex:0 0 66.6666%;flex:0 0 66.6666%;max-width:66.6666%}.row-flex .col-dt-75{-ms-flex:0 0 75%;flex:0 0 75%;max-width:75%}.row-flex .col-dt-80{-ms-flex:0 0 80%;flex:0 0 80%;max-width:80%}.row-flex .col-dt-100{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}}.row-flex.items-top,.display-flex.items-top{-ms-flex-align:start;align-items:flex-start}.row-flex.items-center-v,.display-flex.items-center-v{-ms-flex-align:center;align-items:center}.row-flex.items-bottom,.display-flex.items-bottom{-ms-flex-align:end;align-items:flex-end}.row-flex.items-baseline,.display-flex.items-baseline{-ms-flex-align:baseline;align-items:baseline}.row-flex.items-left,.display-flex.items-left{-ms-flex-pack:start;justify-content:flex-start}.row-flex.items-center-h,.display-flex.items-center-h{-ms-flex-pack:center;justify-content:center}.row-flex.items-right,.display-flex.items-right{-ms-flex-pack:end;justify-content:flex-end}.row-flex.items-spaced-around,.display-flex.items-spaced-around{-ms-flex-pack:distribute;justify-content:space-around}.row-flex.items-spaced-between,.display-flex.items-spaced-between{-ms-flex-pack:justify;justify-content:space-between}.row-flex .item-top,.display-flex .item-top{-ms-flex-item-align:start;align-self:flex-start}.row-flex .item-center-v,.display-flex .item-center-v{-ms-flex-item-align:center;align-self:center}.row-flex .item-bottom,.display-flex .item-bottom{-ms-flex-item-align:end;align-self:flex-end}.row-flex .item-baseline,.display-flex .item-baseline{-ms-flex-item-align:baseline;align-self:baseline}.row-flex .item-first,.display-flex .item-first{-ms-flex-order:-1;order:-1}.row-flex .item-last,.display-flex .item-last{-ms-flex-order:1;order:1}*:focus,*:visited{outline:none !important}p{margin-top:0;margin-bottom:1.3em;font-size:1em}a{color:#426AFB;outline:none}a:hover,a:focus,a:visited{color:#0537ec;outline:none}.summary{font-size:1.1em;font-weight:700}@media (min-width: 768px){.summary{font-size:1.1429em;font-weight:300}}.split{-webkit-column-count:0;-moz-column-count:0;column-count:0;-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}@media (min-width: 768px){.split{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:1rem;-moz-column-gap:1rem;column-gap:1rem}}h1,h2,h3,h4,h5,h6{margin:1.414em 0 0.5em;font-weight:inherit;line-height:1.2}h1,.h1{font-size:3.157em}h1:not(.h1),.h1:not(.h1){margin-top:0}h2,.h2{font-size:2.369em}h3,.h3{font-size:1.777em}h4,.h4{font-size:1.333em}h5,.h5{font-size:1em}h5:not(.h5),.h5:not(.h5){font-weight:700}h5 code,h5 kbd,h5 pre,.h5 code,.h5 kbd,.h5 pre{font-weight:400}small,h6,.h6{font-size:0.75em}blockquote{border-left:4px solid #426AFB;padding:0.2em 0 0.2em 1em;margin:1em 0 1.3em 0}blockquote ol:last-of-type,blockquote p:last-of-type,blockquote ul:last-of-type{margin-bottom:0}blockquote footer{margin-top:0.5em;font-size:0.75em}blockquote footer:before{content:'\2014 \00A0'}blockquote footer cite{font-style:italic}code,kbd,pre{font-family:"Lucida Console",Monaco,monospace;font-size:0.82em;border-radius:3px}code{padding:0 0.5em;display:inline-block;background:#EFEFEF;vertical-align:baseline}kbd{padding:0 0.5em;display:inline-block;background:#333;vertical-align:baseline;color:white}pre{padding:0.7rem 1rem;display:block;background-color:#EFEFEF;line-height:1.5;overflow:auto;white-space:pre}pre code,pre kbd{font-size:inherit;background-color:transparent}.dropcap:first-letter{font-size:3em;float:left;margin-top:0;margin-right:0.5rem;line-height:1;margin-left:-0.2rem;text-transform:uppercase}@-moz-document url-prefix(){.dropcap:first-letter{margin-top:9px}}.show-pp,.show-pl,.show-tp,.show-tl,.show-dt,.show-pp-block,.show-pp-inline,.show-pp-inline-block,.show-pl-block,.show-pl-inline,.show-pl-inline-block,.show-tp-block,.show-tp-inline,.show-tp-inline-block,.show-tl-block,.show-tl-inline,.show-tl-inline-block,.show-dt-block,.show-dt-inline,.show-dt-inline-block{display:none !important}@media (max-width: 539px){.show-pp,.show-pp-block{display:block !important}.show-pp-inline-block{display:inline-block !important}.show-pp-inline{display:inline !important}}@media (min-width: 540px) and (max-width: 767px){.show-pl,.show-pl-block{display:block !important}.show-pl-inline-block{display:inline-block !important}.show-pl-inline{display:inline !important}}@media (min-width: 768px) and (max-width: 990px){.show-tp,.show-tp-block{display:block !important}.show-tp-inline-block{display:inline-block !important}.show-tp-inline{display:inline !important}}@media (min-width: 991px) and (max-width: 1199px){.show-tl,.show-tl-block{display:block !important}.show-tl-inline-block{display:inline-block !important}.show-tl-inline{display:inline !important}}@media (min-width: 1200px){.show-dt,.show-dt-block{display:block !important}.show-dt-inline-block{display:inline-block !important}.show-dt-inline{display:inline !important}}@media (max-width: 539px){.hide-pp{display:none !important}}@media (min-width: 540px) and (max-width: 767px){.hide-pl{display:none !important}}@media (min-width: 768px) and (max-width: 990px){.hide-tp{display:none !important}}@media (min-width: 991px) and (max-width: 1199px){.hide-tl{display:none !important}}@media (min-width: 1200px){.hide-dt{display:none !important}}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.float-left{float:left}.float-right{float:right}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}@media (max-width: 539px){.text-pp-center{text-align:center}.text-pp-left{text-align:left}.text-pp-right{text-align:right}}@media (min-width: 540px) and (max-width: 767px){.text-pl-center{text-align:center}.text-pl-left{text-align:left}.text-pl-right{text-align:right}}@media (min-width: 768px) and (max-width: 990px){.text-tp-center{text-align:center}.text-tp-left{text-align:left}.text-tp-right{text-align:right}}@media (min-width: 991px) and (max-width: 1199px){.text-tl-center{text-align:center}.text-tl-left{text-align:left}.text-tl-right{text-align:right}}@media (min-width: 1200px){.text-dt-center{text-align:center}.text-dt-left{text-align:left}.text-dt-right{text-align:right}}.show-elements{outline:1px solid rgba(0,0,0,0.3)}.show-elements *{outline:1px solid rgba(0,0,255,0.4)}.test-block:before{content:"Test block";margin:0 auto;display:block;padding:3rem 0;text-align:center;opacity:0.6;vertical-align:middle;background-color:#EFEFEF;border-radius:3px;margin-bottom:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.button-default{display:inline-block;border:2px solid;border-radius:3px;font-family:inherit;padding:0 1.5rem;line-height:2.37;margin-right:1rem;margin-bottom:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;background-color:#426AFB;border-color:#426AFB;color:white}.button-default i.fa{margin:0 0 0 0.3rem}.button-default:active{transform:scale(0.97)}.button-default[disabled="true"],.button-default[disabled="disabled"],.button-default[disabled]{pointer-events:none;opacity:0.5}.button-default:hover,.button-default:visited,.button-default:focus{background-color:#1043fa;border-color:#1043fa}.button-default:active{background-color:#063bfa;border-color:#063bfa}.button-outlined{display:inline-block;border:2px solid;border-radius:3px;font-family:inherit;padding:0 1.5rem;line-height:2.37;margin-right:1rem;margin-bottom:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;background-color:transparent;border-color:#426AFB;color:#426AFB}.button-outlined i.fa{margin:0 0 0 0.3rem}.button-outlined:active{transform:scale(0.97)}.button-outlined[disabled="true"],.button-outlined[disabled="disabled"],.button-outlined[disabled]{pointer-events:none;opacity:0.5}.button-outlined:hover,.button-outlined:visited,.button-outlined:focus{border-color:#1043fa;color:#1043fa}.button-outlined:active{border-color:#063bfa;color:#063bfa}.button-stripped{display:inline-block;border:2px solid;border-radius:3px;font-family:inherit;padding:0 1.5rem;line-height:2.37;margin-right:1rem;margin-bottom:1rem;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;cursor:pointer;background-color:transparent;border-color:transparent;color:#426AFB}.button-stripped i.fa{margin:0 0 0 0.3rem}.button-stripped:active{transform:scale(0.97)}.button-stripped[disabled="true"],.button-stripped[disabled="disabled"],.button-stripped[disabled]{pointer-events:none;opacity:0.5}.button-stripped:hover{color:#1043fa}.button-stripped:visited,.button-stripped:focus{text-decoration:underline;color:#1043fa}.button-stripped:active{color:#063bfa}ul,ol,dl{margin:0 0 1.3em 0;padding:0;list-style-position:inside}ul:not(ol),ol:not(ol),dl:not(ol){list-style-type:circle}ul li,ol li,dl li{margin-bottom:0.3em}ul dt,ol dt,dl dt{margin-top:0.3em}ul dd,ol dd,dl dd{margin-left:2rem}ul ul,ul ol,ul dl,ol ul,ol ol,ol dl,dl ul,dl ol,dl dl{margin:0.5rem 0 0.4rem;padding-left:2rem;font-size:90%}form{width:100%;display:block;margin-bottom:1rem}fieldset{border:0;padding:0;margin:1rem 0}fieldset legend{font-weight:700;font-size:1.333em;margin:1.414em 0 0.5em;display:block;width:100%}label{font-weight:700;display:block;color:#333;line-height:normal;margin-bottom:0.5em}label[class^="checkbox"],label[class^="radio"]{padding-left:25px;margin-top:0;margin-bottom:1.1rem;position:relative;display:table;cursor:pointer;font-weight:400}label[class^="checkbox"] input,label[class^="radio"] input{position:absolute;width:auto;margin:0;left:0;cursor:pointer}label[class^="checkbox"] input[type="checkbox"],label[class^="radio"] input[type="checkbox"]{top:0.3rem}@-moz-document url-prefix(){label[class^="checkbox"] input[type="checkbox"],label[class^="radio"] input[type="checkbox"]{top:0.45rem}}label[class^="checkbox"] input[type="radio"],label[class^="radio"] input[type="radio"]{top:0.2rem}@-moz-document url-prefix(){label[class^="checkbox"] input[type="radio"],label[class^="radio"] input[type="radio"]{top:0.4rem}}label[class^="checkbox"][class$="-inline"],label[class^="radio"][class$="-inline"]{display:inline-block;margin-right:1.2rem}label[class^="button-"]{position:relative;font-weight:400;margin-bottom:1.2rem}label[class^="button-"] [type="file"]{visibility:hidden;position:absolute;opacity:0}.input-row{display:block}input,select,textarea{font-family:inherit;font-weight:400;font-size:inherit;line-height:2.475;display:block;width:100%;background-color:transparent;border:1px solid #bcbcbc;border-radius:3px;box-shadow:none;padding:0 1rem;margin-bottom:1.2rem}input:focus,select:focus,textarea:focus{border-color:#426AFB}input[type="file"],select[type="file"],textarea[type="file"]{margin:0.8rem 0 2rem;line-height:0;border:0;padding:0}input::-webkit-input-placeholder,select::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#a3a3a3}input:-moz-placeholder,select:-moz-placeholder,textarea:-moz-placeholder{color:#a3a3a3}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:#a3a3a3}input:-ms-input-placeholder,select:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#a3a3a3}[class^="input-with-button"]{width:100%;display:table;margin-bottom:1.2rem;border-collapse:separate}[class^="input-with-button"] label{width:100%;display:table-caption}[class^="input-with-button"] .button-wrapper{display:table-cell;width:1%;white-space:nowrap;position:relative}[class^="input-with-button"] .button-wrapper .button-default,[class^="input-with-button"] .button-wrapper .button-outlined{margin:0;min-width:100%}[class^="input-with-button"] .button-wrapper .button-default:active,[class^="input-with-button"] .button-wrapper .button-outlined:active{transform:none}[class^="input-with-button"] input[type="text"]{width:100%;display:table-cell;margin:0;position:relative}[class^="input-with-button"][class$="-left"] .button-wrapper .button-default,[class^="input-with-button"][class$="-left"] .button-wrapper .button-outlined{border-radius:3px 0 0 3px}[class^="input-with-button"][class$="-left"] input[type="text"]{border-radius:0 3px 3px 0}[class^="input-with-button"][class$="-right"] .button-wrapper .button-default,[class^="input-with-button"][class$="-right"] .button-wrapper .button-outlined{border-radius:0 3px 3px 0}[class^="input-with-button"][class$="-right"] input[type="text"]{border-radius:3px 0 0 3px}textarea{width:100% !important;min-height:150px;padding:0.7rem 1rem;line-height:1.5}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Angle_down_font_awesome.svg/512px-Angle_down_font_awesome.svg.png");background-size:20px;background-repeat:no-repeat;background-position:right center;background-origin:content-box}select::-ms-expand{display:none}@-moz-document url-prefix(){select{height:40.8px}@media (min-width: 768px){select{height:45.9px}}}hr{margin-top:1.2rem;margin-bottom:1.2rem;border:0;border-top:2px solid #EFEFEF}input[disabled="true"],input[disabled="disabled"],input[disabled],select[disabled="true"],select[disabled="disabled"],select[disabled],textarea[disabled="true"],textarea[disabled="disabled"],textarea[disabled]{pointer-events:none;opacity:0.5}input[disabled="true"]::-webkit-input-placeholder,input[disabled="disabled"]::-webkit-input-placeholder,input[disabled]::-webkit-input-placeholder,select[disabled="true"]::-webkit-input-placeholder,select[disabled="disabled"]::-webkit-input-placeholder,select[disabled]::-webkit-input-placeholder,textarea[disabled="true"]::-webkit-input-placeholder,textarea[disabled="disabled"]::-webkit-input-placeholder,textarea[disabled]::-webkit-input-placeholder{color:#bcbcbc}input[disabled="true"]:-moz-placeholder,input[disabled="disabled"]:-moz-placeholder,input[disabled]:-moz-placeholder,select[disabled="true"]:-moz-placeholder,select[disabled="disabled"]:-moz-placeholder,select[disabled]:-moz-placeholder,textarea[disabled="true"]:-moz-placeholder,textarea[disabled="disabled"]:-moz-placeholder,textarea[disabled]:-moz-placeholder{color:#bcbcbc}input[disabled="true"]::-moz-placeholder,input[disabled="disabled"]::-moz-placeholder,input[disabled]::-moz-placeholder,select[disabled="true"]::-moz-placeholder,select[disabled="disabled"]::-moz-placeholder,select[disabled]::-moz-placeholder,textarea[disabled="true"]::-moz-placeholder,textarea[disabled="disabled"]::-moz-placeholder,textarea[disabled]::-moz-placeholder{color:#bcbcbc}input[disabled="true"]:-ms-input-placeholder,input[disabled="disabled"]:-ms-input-placeholder,input[disabled]:-ms-input-placeholder,select[disabled="true"]:-ms-input-placeholder,select[disabled="disabled"]:-ms-input-placeholder,select[disabled]:-ms-input-placeholder,textarea[disabled="true"]:-ms-input-placeholder,textarea[disabled="disabled"]:-ms-input-placeholder,textarea[disabled]:-ms-input-placeholder{color:#bcbcbc}table{max-width:100%;width:100%;background-color:transparent;border-collapse:collapse;margin-bottom:1.3em}table>thead>tr>th{text-align:left;padding:0.6rem 0;vertical-align:top;font-weight:700;border-bottom:1px solid #EFEFEF}table>tbody>tr>td,table>tbody>tr th{text-align:left;padding:0.6rem 0;vertical-align:top;border-bottom:1px solid #EFEFEF}table>tbody>tr>td:not(td),table>tbody>tr th:not(td){font-weight:700}table>tfoot>tr>td{font-weight:700;text-align:left;padding:0.6rem 0;vertical-align:top;border-bottom:none}@media (max-width: 539px){.pp-h1{font-size:3.157em}.pp-h2{font-size:2.369em}.pp-h3{font-size:1.777em}.pp-h4{font-size:1.333em}.pp-h5{font-size:1em}.pp-h6{font-size:0.75em}}@media (min-width: 540px) and (max-width: 767px){.pl-h1{font-size:3.157em}.pl-h2{font-size:2.369em}.pl-h3{font-size:1.777em}.pl-h4{font-size:1.333em}.pl-h5{font-size:1em}.pl-h6{font-size:0.75em}}@media (min-width: 768px) and (max-width: 990px){.tp-h1{font-size:3.157em}.tp-h2{font-size:2.369em}.tp-h3{font-size:1.777em}.tp-h4{font-size:1.333em}.tp-h5{font-size:1em}.tp-h6{font-size:0.75em}}@media (min-width: 991px) and (max-width: 1199px){.tl-h1{font-size:3.157em}.tl-h2{font-size:2.369em}.tl-h3{font-size:1.777em}.tl-h4{font-size:1.333em}.tl-h5{font-size:1em}.tl-h6{font-size:0.75em}}@media (min-width: 1200px){.dt-h1{font-size:3.157em}.dt-h2{font-size:2.369em}.dt-h3{font-size:1.777em}.dt-h4{font-size:1.333em}.dt-h5{font-size:1em}.dt-h6{font-size:0.75em}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment