/*!
  _____  _____ _____   _____  _    _ _      ______ _____
 / ____|/ ____/ ____| |  __ \| |  | | |    |  ____|  __ \
| |    | (___| (___   | |__) | |  | | |    | |__  | |__) |
| |     \___ \ \__ \  |  _  /| |  | | |    |  __| |  _  /
| |____ ____) |___) | | | \ \| |__| | |____| |____| | \ \
 \_____|_____/_____/  |_|  \_\_____/|______|______|_|  \_\

        |""|""|""|""|""|""|""|""|""|""|""|""|"|
        |  1  2  3  4  5  6  7  8  9 10 11 12 |
        '-------------------------------------'
*/*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:"Montserrat", sans-serif;font-weight:400;line-height:1.45;color:#2c3e50;background-color:#ecf0f1;background-image:linear-gradient(#fff 2px, transparent 2px),linear-gradient(90deg, #fff 2px, transparent 2px),linear-gradient(rgba(255,255,255,0.3) 1px, transparent 1px),linear-gradient(90deg, rgba(255,255,255,0.3) 1px, transparent 1px);background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;background-attachment:scroll;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);text-rendering:optimizeLegibility}h1{font-size:40px;margin:0 0 20px}p{margin:0 0 1.3em}a{color:#2472a4;text-decoration:none}a:hover{text-decoration:underline;color:#2e8ece}.small{font-size:0.8em}.whoops{font-size:16.25px}.sidebar{background:#ecf0f1;background:rgba(255,255,255,0.55);padding:1em 1.5em;font-size:13px}@media (min-width: 675px){.sidebar{max-width:30%;max-width:30vw;float:left;height:100vh;margin-right:10px;position:fixed;overflow:scroll}}.form-keys{padding-left:1.75em;margin-bottom:1.3em}.form-keys .key{position:relative;margin-bottom:1em}.form-keys label{position:relative;margin-left:-1.75em;cursor:pointer}.form-keys input{display:none}.form-keys .check{display:inline-block;border-radius:.2em 0 0 .2em;color:rgba(255,255,255,0.25);font-weight:700;padding:0.25em 0.5em}.form-keys .key-title{font-weight:700;display:inline-block;padding:0.25em 0.5em;border-radius:0 .2em .2em 0;color:rgba(44,62,80,0.75)}.form-keys input[type="checkbox"]:checked+.check{color:white}.form-keys input[type="checkbox"]:checked ~ .key-title{color:#2c3e50}.form-keys .label-absolute .key-title{background:rgba(142,68,173,0.25)}.form-keys .label-absolute .check{background:#8e44ad}.form-keys .label-absolute:hover .check{background:#703688}.form-keys .label-font-relative .key-title{background:rgba(17,134,111,0.25)}.form-keys .label-font-relative .check{background:#11866f}.form-keys .label-font-relative:hover .check{background:#0b594a}.form-keys .label-viewport-percentage .key-title{background:rgba(210,68,54,0.25)}.form-keys .label-viewport-percentage .check{background:#d24436}.form-keys .label-viewport-percentage:hover .check{background:#ae3327}.form-inputs{position:relative;margin-bottom:1.3em;background:#fff;padding:1em;border-radius:0.25em}.form-inputs input{font-size:1em;padding:0.25em 0.5em;font-family:inherit;max-width:3.5em;border:none;border:1px solid rgba(0,0,0,0.05);background:#ecf0f1;border-radius:5px}.form-inputs label{min-width:10.5em;display:inline-block}.form-inputs .form-control{padding-bottom:10px;font-family:"Source Code Pro", monospace}.examples{padding:20px 20px 200px}@media (min-width: 675px){.examples{margin-left:30%;margin-left:30vw}}.example-container{display:inline-block;cursor:help;margin-right:25px}.example{position:relative;margin-bottom:70px;color:inherit;-webkit-transition:0.1s linear;transition:0.1s linear}.example:after{content:attr(title);position:absolute;font-size:14px;transform:rotate(90deg) translate(50%, 50%);top:100%;display:block;left:50%;line-height:2}.type-absolute{background:#8e44ad}.type-absolute:hover{background:#703688}.type-font-relative{background:#11866f}.type-font-relative:hover{background:#0b594a}.type-viewport-percentage{background:#d24436}.type-viewport-percentage:hover{background:#ae3327}.popover{position:absolute;top:0;left:0;z-index:1060;display:none;max-width:276px;padding:1px;font-size:13px;font-weight:normal;line-height:1.42857143;text-align:left;background-color:#fff;background-clip:padding-box;border:1px solid #cccccc;border:1px solid rgba(0,0,0,0.2);border-radius:.2em;white-space:normal}.popover.bottom{margin-top:10px}.popover-title{margin:0;padding:8px 14px;font-size:13px;background-color:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:.2em .2em 0 0}.popover-content{padding:9px 14px}.popover>.arrow,.popover>.arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.popover>.arrow{border-width:11px}.popover>.arrow:after{border-width:10px;content:""}.popover.bottom>.arrow{left:50%;margin-left:-11px;border-top-width:0;border-bottom-color:#999999;border-bottom-color:rgba(0,0,0,0.25);top:-11px}.popover.bottom>.arrow:after{content:" ";top:1px;margin-left:-10px;border-top-width:0;border-bottom-color:#ffffff}