From 4a06b4cbd14fe195812501a1de26623b80e222e7 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 6 Jan 2018 13:14:46 +1100 Subject: [PATCH 1/3] Fix for "800px" appearing twice on an "inside" example --- docs/assets/styles/main.css | 2 +- docs/assets/styles/main.css.map | 2 +- src/_modules/tests/tests.scss | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/assets/styles/main.css b/docs/assets/styles/main.css index 4582120..050e049 100644 --- a/docs/assets/styles/main.css +++ b/docs/assets/styles/main.css @@ -2,5 +2,5 @@ /*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15}article,aside,figcaption,figure,footer,header,main,nav,section{display:block}hr{overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}mark{background-color:#ff0}audio,video{display:inline-block}img{border-style:none}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15}button,input{overflow:visible}[type=reset],[type=submit],button,html [type=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%;white-space:normal}progress{display:inline-block;vertical-align:baseline}[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-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}[hidden],template{display:none}a:active,a:hover{outline-width:1px} -/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}*,:after,:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;box-sizing:inherit}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}html{font-size:62.5%}a,aside,b,div,em,footer,form,header,html,i,input,label,nav,nav li,select,span,strong,textarea,time{margin-top:0}body{background-color:#fff;position:relative;margin:0;font-size:16px;font-size:1.6rem;line-height:1.5;color:#000;font-family:Cabin,Arial,sans-serif;font-weight:400}ol,p,ul{margin:25px 0}ol:first-child,p:first-child,ul:first-child{margin-top:0}ol:last-child,p:last-child,ul:last-child{margin-bottom:0}h1,h2,h3,h4,h5,h6{font-family:Montserrat,sans-serif;font-weight:700;line-height:1;letter-spacing:-.5px;letter-spacing:-.05rem;margin-bottom:15px;margin-top:25px}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1+ol,h1+p,h1+ul,h2+ol,h2+p,h2+ul,h3+ol,h3+p,h3+ul,h4+ol,h4+p,h4+ul,h5+ol,h5+p,h5+ul,h6+ol,h6+p,h6+ul{margin-top:0}.-theme--dark h1,.-theme--dark h2,.-theme--dark h3,.-theme--dark h4,.-theme--dark h5,.-theme--dark h6{color:#b9d48b}h1{font-size:30px;font-size:3rem;text-align:center}h1+h2{margin-top:30px}h2{font-size:25px;font-size:2.5rem;margin-top:75px}h3{font-size:20px;font-size:2rem}h4{font-size:18px;font-size:1.8rem;text-transform:uppercase}a{text-decoration:none;color:#cf1730;transition:.3s}a:focus,a:hover{text-decoration:underline}a[disabled]{cursor:default;pointer-events:none;opacity:.2}.no-csspointerevents a[disabled]{display:none}input[type=checkbox],input[type=radio],label{cursor:pointer}img{display:block;max-width:100%;width:100%}a>img{transition:.3s}a:focus>img,a:hover>img{-webkit-transform:scale(1.05);transform:scale(1.05)}blockquote{background-color:transparent;border-left:0;border-left:6px solid #000;font-style:normal;margin:0;margin-left:30px;padding:55px 25px 40px}blockquote:before{display:none}blockquote p{font-size:22px;font-size:2.2rem;line-height:1.25}pre{padding:10px 70px 10px 0;margin-left:-20px;margin-right:-20px;font-family:Monaco,Lucida Console,monospace;font-size:13px;font-size:1.3rem;line-height:20px;box-shadow:inset 0 0 5px #000;word-wrap:break-word;color:#d6d6d6;background-color:#282c34;padding:0}pre,pre.lines{margin:0;padding-left:0;padding-right:0}pre.lines{font-size:12px;font-size:1.2rem;padding:10px;float:left;display:block!important;box-shadow:none;color:#d6d6d6;background-color:#000;width:40px;padding-top:7px;padding-bottom:7px;text-align:center!important}pre code{padding:10px 5px;font-size:1em}.no-flexbox pre{max-width:780px}code{max-width:100%}h1 code,h2 code,h3 code,h4 code,h5 code,li code,p code{background-color:#c5c7cc;padding:3px 4px;font-size:.85em}.-color-1{background-color:#cf1730}.-color-1,.-color-1 *{color:#fff}.-color-1,.-color-1 svg{fill:#fff}.-color-text-1,.-color-text-1 *{color:#cf1730;fill:#cf1730}.-color-2{background-color:#b9d48b}.-color-2,.-color-2 *{color:#000}.-color-2,.-color-2 svg{fill:#000}.-color-text-2,.-color-text-2 *{color:#b9d48b;fill:#b9d48b}.-color-3{background-color:#7fd6cd}.-color-3,.-color-3 *{color:#000}.-color-3,.-color-3 svg{fill:#000}.-color-text-3,.-color-text-3 *{color:#7fd6cd;fill:#7fd6cd}.-color-4{background-color:#0ccbee}.-color-4,.-color-4 *{color:#000}.-color-4,.-color-4 svg{fill:#000}.-color-text-4,.-color-text-4 *{color:#0ccbee;fill:#0ccbee}.-color-5{background-color:#08705e}.-color-5,.-color-5 *{color:#fff}.-color-5,.-color-5 svg{fill:#fff}.-color-text-5,.-color-text-5 *{color:#08705e;fill:#08705e}.TK-noDots,nav ul{list-style:none;margin:0;padding:0}.no-js .TK-noJsHide{display:none}.js .TK-jsHide{display:none!important}.no-js .TK-jsHide{display:block}.TK-skipLink{border:0;clip:rect(0 0 0 0);width:0;height:0;padding:0;overflow:hidden;position:absolute;opacity:0}.TK-skipLink:active,.TK-skipLink:focus{clip:auto;width:auto;height:auto;position:static;opacity:1}.pageContainer{padding-left:20px!important;padding-right:20px!important}.pageContainer.-wide{padding-left:0!important;padding-right:0!important}.pageContainer__width{margin:0 auto;max-width:1200px;min-width:280px;display:block;pointer-events:auto;width:100%}.pageContainer__width:after{display:block;content:"";clear:both}.-wide .pageContainer__width{max-width:1240px}.-thin .pageContainer__width{max-width:1160px}.demo{padding:5px;border:2px solid #000}.demo__segment{position:relative;margin-top:35px;margin-bottom:10px}.demo__segment.grid__cell,.demo__segment:last-child{margin-bottom:0}.demo__segment:before{position:absolute;bottom:100%;left:0;padding:5px 10px;background:#000;color:#fff;border-radius:5px 5px 0 0}.demo__summary{background-color:#cddec4;padding:20px;margin-bottom:10px;margin-top:60px}.demo__summary:before{content:"Summary"}.demo__summary+.demo__result{margin-top:45px}.demo__result:before{content:"Example"}.-false .demo__result:before{content:"Not Gutter Grid"}.demo__result .grid{padding:0}.demo__result .grid__cell,.demo__result .mixin__cell{min-height:100px;margin:0}.-noHeight .demo__result .grid__cell,.-noHeight .demo__result .mixin__cell{min-height:0}.demo__markup{background-color:#282c34;position:relative;padding-left:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.demo__markup.html:before{content:"HTML"}.demo__markup.scss:before{content:"Sass"}.demo__markup.js:before{content:"JavaScript"}.demo__markup.json:before{content:"JSON"}.demo__markup pre{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.demo__markup pre,.demo__markup pre.lines{margin:0}.demo__markup pre.lines{overflow:hidden;position:absolute;top:0;left:0;bottom:0;background:#000;padding-top:12px}.demo__markup code{margin-top:-20px;padding-bottom:10px;padding-top:10px}.demo .example li,.demo .example ul{list-style:none;padding-left:0!important}.tabs{padding-top:1px}.tabs__link{text-align:center;text-transform:capitalize}.js .tabs__content{display:none}.no-flexbox .tabs{width:780px}.bodyContent{padding-bottom:100px}.bodyContent,.bodyContent td{text-align:left}.bodyContent b,.bodyContent strong,.bodyContent td b,.bodyContent td strong{font-weight:700}.bodyContent sub,.bodyContent sup,.bodyContent td sub,.bodyContent td sup{font-size:.6em}.bodyContent a:not(.btn),.bodyContent td a:not(.btn){font-weight:400;text-decoration:underline;color:#cf1730}.bodyContent a:not(.btn):focus,.bodyContent a:not(.btn):hover,.bodyContent td a:not(.btn):focus,.bodyContent td a:not(.btn):hover{text-decoration:none}.bodyContent ol ol,.bodyContent ol ul,.bodyContent td ol ol,.bodyContent td ol ul,.bodyContent td ul ol,.bodyContent td ul ul,.bodyContent ul ol,.bodyContent ul ul{margin:0}.bodyContent ol li,.bodyContent td ol li,.bodyContent td ul li,.bodyContent ul li{margin-top:10px}.bodyContent>ol:not(.TK-noDots):not(:first-child),.bodyContent>ul:not(.TK-noDots):not(:first-child),.bodyContent td>ol:not(.TK-noDots):not(:first-child),.bodyContent td>ul:not(.TK-noDots):not(:first-child){margin-top:25px}.bodyContent>ol:not(.TK-noDots)>li,.bodyContent>ul:not(.TK-noDots)>li,.bodyContent td>ol:not(.TK-noDots)>li,.bodyContent td>ul:not(.TK-noDots)>li{margin:0;padding-bottom:11px}.bodyContent>ol:not(.TK-noDots)>li:first-child,.bodyContent>ul:not(.TK-noDots)>li:first-child,.bodyContent td>ol:not(.TK-noDots)>li:first-child,.bodyContent td>ul:not(.TK-noDots)>li:first-child{border-top:none;padding-top:0}.bodyContent>ol:not(.TK-noDots)>li:last-child,.bodyContent>ul:not(.TK-noDots)>li:last-child,.bodyContent td>ol:not(.TK-noDots)>li:last-child,.bodyContent td>ul:not(.TK-noDots)>li:last-child{padding-bottom:0}.bodyContent td ul:not(.TK-noDots),.bodyContent ul:not(.TK-noDots){padding:0}.bodyContent td ul:not(.TK-noDots) li,.bodyContent ul:not(.TK-noDots) li{list-style:none;padding-left:25px;position:relative}.bodyContent td ul:not(.TK-noDots) li:before,.bodyContent ul:not(.TK-noDots) li:before{content:"";display:block;position:absolute;top:15px;left:0}.bodyContent>ul:not(.TK-noDots)>li:before,.bodyContent td>ul:not(.TK-noDots)>li:before{border-radius:50%;height:6px;width:6px;background:#cf1730;top:6px}.bodyContent>ul:not(.TK-noDots)>li>ul>li:before,.bodyContent td>ul:not(.TK-noDots)>li>ul>li:before{height:2px;width:10px;background:#cf1730;top:9px}.bodyContent>ul:not(.TK-noDots)>li>ul>li>ul>li:before,.bodyContent td>ul:not(.TK-noDots)>li>ul>li>ul>li:before{border-radius:50%;height:6px;width:6px;border:1px solid #cf1730;top:5px}.bodyContent ol:not(.TK-noDots),.bodyContent td ol:not(.TK-noDots){counter-reset:a;list-style:none;padding-left:0}.bodyContent ol:not(.TK-noDots) li,.bodyContent td ol:not(.TK-noDots) li{padding-left:25px;position:relative}.bodyContent ol:not(.TK-noDots) li:before,.bodyContent td ol:not(.TK-noDots) li:before{content:counter(a) ".";counter-increment:a;position:absolute;left:0;font-weight:700;color:#cf1730}.bodyContent ol:not(.TK-noDots) li ol li:before,.bodyContent td ol:not(.TK-noDots) li ol li:before{content:counter(a,lower-alpha) "."}.bodyContent ol:not(.TK-noDots) li ol li ol li:before,.bodyContent td ol:not(.TK-noDots) li ol li ol li:before{content:counter(a,lower-roman) ".";left:auto;right:100%;margin-right:-15px}.bodyContent img,.bodyContent td img,.btn{display:inline-block}.btn{font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;font-size:1.4rem;background-color:#5b1223;color:#fff;transition:.3s;padding:15px 20px;transition:all .25s ease-in-out;position:relative;text-align:left;line-height:1;letter-spacing:.5px;letter-spacing:.05rem;border:3px solid #cf1730;text-decoration:none!important}.btn:hover{background-color:#000;color:#fff}.btn:hover svg{fill:#cf1730}.btn svg{fill:#cf1730;position:absolute;top:0;bottom:0;margin:auto 0;right:20px;height:10px;width:10px;fill:transparent;fill:#fff;fill-width:15px;transition:.3s}.btn.-hasIcon{padding-right:55px}.btn.-active{background-color:#b9d48b;color:#000}.btn.-active:hover{background-color:#94aa6f}.btn.-inactive{background-color:#d3d3d3;color:#000}.btn.-inactive:hover{background-color:gray}.header{margin-bottom:30px}.header h1{margin:50px 0 10px}.header .version{text-align:center;font-style:italic;margin-bottom:10px}.tests{display:grid;grid-template-columns:minmax(0,1fr);grid-gap:20px}.test{padding:30px;border:2px solid #000;background:#6d0808;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:20px}.test h3{margin-bottom:0}.test:after,.test:before{color:#fff;white-space:pre}.test:before{font-size:20px;font-size:2rem}.test:after{content:" = false"}.test.-max:before{content:"mq(max, 800px)"}@media (max-width:800px){.test.-max{background:#004700}.test.-max:after{content:" = true"}}.test.-maxWidth:before{content:"mq(max-width, 800px)"}@media (max-width:800px){.test.-maxWidth{background:#004700}.test.-maxWidth:after{content:" = true"}}.test.-maxVar:before{content:"mq($MQ-maxVar)"}@media (max-width:800px){.test.-maxVar{background:#004700}.test.-maxVar:after{content:" = true"}}.test.-min:before{content:"mq(min, 800px)"}@media (min-width:801px){.test.-min{background:#004700}.test.-min:after{content:" = true"}}.test.-minWidth:before{content:"mq(min-width, 800px)"}@media (min-width:801px){.test.-minWidth{background:#004700}.test.-minWidth:after{content:" = true"}}.test.-minVar:before{content:"mq($MQ-minVar)"}@media (min-width:801px){.test.-minVar{background:#004700}.test.-minVar:after{content:" = true"}}.test.-inside:before{content:"mq(inside, 800px, 800px)"}@media (max-width:800px) and (min-width:601px){.test.-inside{background:#004700}.test.-inside:after{content:" = true"}}.test.-insideWidth:before{content:"mq(inside-width, 600px, 800px)"}@media (max-width:800px) and (min-width:601px){.test.-insideWidth{background:#004700}.test.-insideWidth:after{content:" = true"}}.test.-insideVar:before{content:"mq($MQ-insideVar)"}@media (max-width:800px) and (min-width:601px){.test.-insideVar{background:#004700}.test.-insideVar:after{content:" = true"}}.test.-outside:before{content:"mq(outside, 800px, 600px)"}@media (max-width:600px),(min-width:801px){.test.-outside{background:#004700}.test.-outside:after{content:" = true"}}.test.-outsideWidth:before{content:"mq(outside-width, 600px, 800px)"}@media (max-width:600px),(min-width:801px){.test.-outsideWidth{background:#004700}.test.-outsideWidth:after{content:" = true"}}.test.-outsideVar:before{content:"mq($MQ-outsideVar)"}@media (max-width:600px),(min-width:801px){.test.-outsideVar{background:#004700}.test.-outsideVar:after{content:" = true"}}.test.-maxHeight:before{content:"mq(max-height, 800px)"}@media (max-height:800px){.test.-maxHeight{background:#004700}.test.-maxHeight:after{content:" = true"}}.test.-maxHeightVar:before{content:"mq($MQ-maxHeightVar)"}@media (max-height:800px){.test.-maxHeightVar{background:#004700}.test.-maxHeightVar:after{content:" = true"}}.test.-minHeight:before{content:"mq(min-height, 800px)"}@media (min-height:801px){.test.-minHeight{background:#004700}.test.-minHeight:after{content:" = true"}}.test.-minHeightVar:before{content:"mq($MQ-minHeightVar)"}@media (min-height:801px){.test.-minHeightVar{background:#004700}.test.-minHeightVar:after{content:" = true"}}.test.-insideHeight:before{content:"mq(inside-height, 600px, 800px)"}@media (max-height:800px) and (min-height:601px){.test.-insideHeight{background:#004700}.test.-insideHeight:after{content:" = true"}}.test.-insideHeightVar:before{content:"mq($MQ-insideHeightVar)"}@media (max-height:800px) and (min-height:601px){.test.-insideHeightVar{background:#004700}.test.-insideHeightVar:after{content:" = true"}}.test.-outsideHeight:before{content:"mq(outside-height, 600px, 800px)"}@media (max-height:600px),(min-height:801px){.test.-outsideHeight{background:#004700}.test.-outsideHeight:after{content:" = true"}}.test.-outsideHeightVar:before{content:"mq($MQ-outsideHeightVar)"}@media (max-height:600px),(min-height:801px){.test.-outsideHeightVar{background:#004700}.test.-outsideHeightVar:after{content:" = true"}}.test.-ratio:before{content:'mq(ratio, "2 / 1")'}@media (aspect-ratio:2/1){.test.-ratio{background:#004700}.test.-ratio:after{content:" = true"}}.test.-ratioVar:before{content:"mq($MQ-ratioVar)"}@media (aspect-ratio:2/1){.test.-ratioVar{background:#004700}.test.-ratioVar:after{content:" = true"}}.test.-minRatio:before{content:'mq(min-ratio, "2 / 1")'}@media (min-aspect-ratio:2/1){.test.-minRatio{background:#004700}.test.-minRatio:after{content:" = true"}}.test.-minRatioVar:before{content:"mq($MQ-minRatioVar)"}@media (min-aspect-ratio:2/1){.test.-minRatioVar{background:#004700}.test.-minRatioVar:after{content:" = true"}}.test.-maxRatio:before{content:'mq(max-ratio, "2 / 1")'}@media (max-aspect-ratio:2/1){.test.-maxRatio{background:#004700}.test.-maxRatio:after{content:" = true"}}.test.-maxRatioVar:before{content:"mq($MQ-minRatioVar)"}@media (max-aspect-ratio:2/1){.test.-maxRatioVar{background:#004700}.test.-maxRatioVar:after{content:" = true"}}.test.-insideRatio:before{content:'mq(inside-ratio, "2 / 1", "1 / 1")'}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-insideRatio{background:#004700}.test.-insideRatio:after{content:" = true"}}.test.-insideRatioVar:before{content:"mq($MQ-insideRatioVar)"}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-insideRatioVar{background:#004700}.test.-insideRatioVar:after{content:" = true"}}.test.-outsideRatio:before{content:'mq(outside-ratio, "1 / 1", "2 / 1")'}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1){.test.-outsideRatio{background:#004700}.test.-outsideRatio:after{content:" = true"}}.test.-outsideRatioVar:before{content:"mq($MQ-outsideRatioVar)"}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1){.test.-outsideRatioVar{background:#004700}.test.-outsideRatioVar:after{content:" = true"}}.test.-exactRatioWorkAround1:before{content:"mq($MQ-exactRatioWorkAround1)"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround1{background:#004700}.test.-exactRatioWorkAround1:after{content:" = true"}}.test.-exactRatioWorkAround2:before{content:"mq($MQ-exactRatioWorkAround2)"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround2{background:#004700}.test.-exactRatioWorkAround2:after{content:" = true"}}.test.-exactRatioWorkAround3:before{content:"mq(max-ratio, '2 / 1', 'not')"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround3{background:#004700}.test.-exactRatioWorkAround3:after{content:" = true"}}.test.-simpleMedia:before{content:"mq(min, 800px, 'screen')"}@media screen and (min-width:801px){.test.-simpleMedia{background:#004700}.test.-simpleMedia:after{content:" = true"}}.test.-notMedia:before{content:"mq(min, 800px, 'not')"}@media not screen and (min-width:801px){.test.-notMedia{background:#004700}.test.-notMedia:after{content:" = true"}}.test.-onlyMedia:before{content:"mq('screen')"}@media screen{.test.-onlyMedia{background:#004700}.test.-onlyMedia:after{content:" = true"}}.test.-simplePlus:before{content:"mq($MQ-simplePlus)"}@media (min-width:801px) and (min-height:601px){.test.-simplePlus{background:#004700}.test.-simplePlus:after{content:" = true"}}.test.-inlinePlus:before{content:"mq((min-width, 800px) plus (min-height, 600px))"}@media (min-width:801px) and (min-height:601px){.test.-inlinePlus{background:#004700}.test.-inlinePlus:after{content:" = true"}}.test.-mediaOnlyPlus:before{content:"mq('screen' plus (min, 800px))"}@media screen and (min-width:801px){.test.-mediaOnlyPlus{background:#004700}.test.-mediaOnlyPlus:after{content:" = true"}}.test.-complexPlus:before{content:"mq($MQ-complexPlus)"}@media print and (max-width:800px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-complexPlus{background:#004700}.test.-complexPlus:after{content:" = true"}}.test.-ignoredMediaType:before{content:"mq($MQ-ignoredMediaType)"}@media (max-width:800px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-ignoredMediaType{background:#004700}.test.-ignoredMediaType:after{content:" = true"}}.test.-multiPlus:before{content:"mq($MQ-multiPlus)"}@media screen and (min-width:801px) and (min-height:401px) and (max-width:1000px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-multiPlus{background:#004700}.test.-multiPlus:after{content:" = true"}}.test.-simpleOr:before{content:"mq($MQ-simpleOr)"}.test.-complexOr:before{content:"mq($MQ-complexOr)"}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1),screen and (max-width:800px) and (min-width:601px){.test.-complexOr{background:#004700}.test.-complexOr:after{content:" = true"}}.test.-multiOr:before{content:"mq($MQ-multiOr)"}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1),(max-width:1000px) and (min-width:601px),(min-height:801px),print,screen and (min-width:801px){.test.-multiOr{background:#004700}.test.-multiOr:after{content:" = true"}}.test.-orPlusCombo:before{content:"mq($MQ-orPlusCombo)"}@media screen and (max-width:1000px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1),screen and (min-width:801px) and (min-height:801px){.test.-orPlusCombo{background:#004700}.test.-orPlusCombo:after{content:" = true"}}@media not screen and (max-aspect-ratio:2/1){body{color:#000}}.breakpoints{padding:20px;border:2px solid #000}.breakpoints__size.-minimum:before{content:"BP-minimum: "}.breakpoints__size.-minimum:after{content:"320px";font-weight:700;font-size:1.2em}.breakpoints__size.-small:before{content:"BP-small: "}.breakpoints__size.-small:after{content:"600px";font-weight:700;font-size:1.2em}.breakpoints__size.-medium:before{content:"BP-medium: "}.breakpoints__size.-medium:after{content:"800px";font-weight:700;font-size:1.2em}.breakpoints__size.-large:before{content:"BP-large: "}.breakpoints__size.-large:after{content:"1000px";font-weight:700;font-size:1.2em}.breakpoints__size.-page:before{content:"BP-page: "}.breakpoints__size.-page:after{content:"1200px";font-weight:700;font-size:1.2em} +/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.hljs{display:block;overflow-x:auto;padding:.5em;color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-formula,.hljs-keyword{color:#c678dd}.hljs-deletion,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-addition,.hljs-attribute,.hljs-meta-string,.hljs-regexp,.hljs-string{color:#98c379}.hljs-built_in,.hljs-class .hljs-title{color:#e6c07b}.hljs-attr,.hljs-number,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-pseudo,.hljs-template-variable,.hljs-type,.hljs-variable{color:#d19a66}.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-symbol,.hljs-title{color:#61aeee}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}*,:after,:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;box-sizing:inherit}body,html{box-sizing:border-box;height:100%;margin:0;padding:0}html{font-size:62.5%}a,aside,b,div,em,footer,form,header,html,i,input,label,nav,nav li,select,span,strong,textarea,time{margin-top:0}body{background-color:#fff;position:relative;margin:0;font-size:16px;font-size:1.6rem;line-height:1.5;color:#000;font-family:Cabin,Arial,sans-serif;font-weight:400}ol,p,ul{margin:25px 0}ol:first-child,p:first-child,ul:first-child{margin-top:0}ol:last-child,p:last-child,ul:last-child{margin-bottom:0}h1,h2,h3,h4,h5,h6{font-family:Montserrat,sans-serif;font-weight:700;line-height:1;letter-spacing:-.5px;letter-spacing:-.05rem;margin-bottom:15px;margin-top:25px}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}h1+ol,h1+p,h1+ul,h2+ol,h2+p,h2+ul,h3+ol,h3+p,h3+ul,h4+ol,h4+p,h4+ul,h5+ol,h5+p,h5+ul,h6+ol,h6+p,h6+ul{margin-top:0}.-theme--dark h1,.-theme--dark h2,.-theme--dark h3,.-theme--dark h4,.-theme--dark h5,.-theme--dark h6{color:#b9d48b}h1{font-size:30px;font-size:3rem;text-align:center}h1+h2{margin-top:30px}h2{font-size:25px;font-size:2.5rem;margin-top:75px}h3{font-size:20px;font-size:2rem}h4{font-size:18px;font-size:1.8rem;text-transform:uppercase}a{text-decoration:none;color:#cf1730;transition:.3s}a:focus,a:hover{text-decoration:underline}a[disabled]{cursor:default;pointer-events:none;opacity:.2}.no-csspointerevents a[disabled]{display:none}input[type=checkbox],input[type=radio],label{cursor:pointer}img{display:block;max-width:100%;width:100%}a>img{transition:.3s}a:focus>img,a:hover>img{-webkit-transform:scale(1.05);transform:scale(1.05)}blockquote{background-color:transparent;border-left:0;border-left:6px solid #000;font-style:normal;margin:0;margin-left:30px;padding:55px 25px 40px}blockquote:before{display:none}blockquote p{font-size:22px;font-size:2.2rem;line-height:1.25}pre{padding:10px 70px 10px 0;margin-left:-20px;margin-right:-20px;font-family:Monaco,Lucida Console,monospace;font-size:13px;font-size:1.3rem;line-height:20px;box-shadow:inset 0 0 5px #000;word-wrap:break-word;color:#d6d6d6;background-color:#282c34;padding:0}pre,pre.lines{margin:0;padding-left:0;padding-right:0}pre.lines{font-size:12px;font-size:1.2rem;padding:10px;float:left;display:block!important;box-shadow:none;color:#d6d6d6;background-color:#000;width:40px;padding-top:7px;padding-bottom:7px;text-align:center!important}pre code{padding:10px 5px;font-size:1em}.no-flexbox pre{max-width:780px}code{max-width:100%}h1 code,h2 code,h3 code,h4 code,h5 code,li code,p code{background-color:#c5c7cc;padding:3px 4px;font-size:.85em}.-color-1{background-color:#cf1730}.-color-1,.-color-1 *{color:#fff}.-color-1,.-color-1 svg{fill:#fff}.-color-text-1,.-color-text-1 *{color:#cf1730;fill:#cf1730}.-color-2{background-color:#b9d48b}.-color-2,.-color-2 *{color:#000}.-color-2,.-color-2 svg{fill:#000}.-color-text-2,.-color-text-2 *{color:#b9d48b;fill:#b9d48b}.-color-3{background-color:#7fd6cd}.-color-3,.-color-3 *{color:#000}.-color-3,.-color-3 svg{fill:#000}.-color-text-3,.-color-text-3 *{color:#7fd6cd;fill:#7fd6cd}.-color-4{background-color:#0ccbee}.-color-4,.-color-4 *{color:#000}.-color-4,.-color-4 svg{fill:#000}.-color-text-4,.-color-text-4 *{color:#0ccbee;fill:#0ccbee}.-color-5{background-color:#08705e}.-color-5,.-color-5 *{color:#fff}.-color-5,.-color-5 svg{fill:#fff}.-color-text-5,.-color-text-5 *{color:#08705e;fill:#08705e}.TK-noDots,nav ul{list-style:none;margin:0;padding:0}.no-js .TK-noJsHide{display:none}.js .TK-jsHide{display:none!important}.no-js .TK-jsHide{display:block}.TK-skipLink{border:0;clip:rect(0 0 0 0);width:0;height:0;padding:0;overflow:hidden;position:absolute;opacity:0}.TK-skipLink:active,.TK-skipLink:focus{clip:auto;width:auto;height:auto;position:static;opacity:1}.bodyContent{padding-bottom:100px}.bodyContent,.bodyContent td{text-align:left}.bodyContent b,.bodyContent strong,.bodyContent td b,.bodyContent td strong{font-weight:700}.bodyContent sub,.bodyContent sup,.bodyContent td sub,.bodyContent td sup{font-size:.6em}.bodyContent a:not(.btn),.bodyContent td a:not(.btn){font-weight:400;text-decoration:underline;color:#cf1730}.bodyContent a:not(.btn):focus,.bodyContent a:not(.btn):hover,.bodyContent td a:not(.btn):focus,.bodyContent td a:not(.btn):hover{text-decoration:none}.bodyContent ol ol,.bodyContent ol ul,.bodyContent td ol ol,.bodyContent td ol ul,.bodyContent td ul ol,.bodyContent td ul ul,.bodyContent ul ol,.bodyContent ul ul{margin:0}.bodyContent ol li,.bodyContent td ol li,.bodyContent td ul li,.bodyContent ul li{margin-top:10px}.bodyContent>ol:not(.TK-noDots):not(:first-child),.bodyContent>ul:not(.TK-noDots):not(:first-child),.bodyContent td>ol:not(.TK-noDots):not(:first-child),.bodyContent td>ul:not(.TK-noDots):not(:first-child){margin-top:25px}.bodyContent>ol:not(.TK-noDots)>li,.bodyContent>ul:not(.TK-noDots)>li,.bodyContent td>ol:not(.TK-noDots)>li,.bodyContent td>ul:not(.TK-noDots)>li{margin:0;padding-bottom:11px}.bodyContent>ol:not(.TK-noDots)>li:first-child,.bodyContent>ul:not(.TK-noDots)>li:first-child,.bodyContent td>ol:not(.TK-noDots)>li:first-child,.bodyContent td>ul:not(.TK-noDots)>li:first-child{border-top:none;padding-top:0}.bodyContent>ol:not(.TK-noDots)>li:last-child,.bodyContent>ul:not(.TK-noDots)>li:last-child,.bodyContent td>ol:not(.TK-noDots)>li:last-child,.bodyContent td>ul:not(.TK-noDots)>li:last-child{padding-bottom:0}.bodyContent td ul:not(.TK-noDots),.bodyContent ul:not(.TK-noDots){padding:0}.bodyContent td ul:not(.TK-noDots) li,.bodyContent ul:not(.TK-noDots) li{list-style:none;padding-left:25px;position:relative}.bodyContent td ul:not(.TK-noDots) li:before,.bodyContent ul:not(.TK-noDots) li:before{content:"";display:block;position:absolute;top:15px;left:0}.bodyContent>ul:not(.TK-noDots)>li:before,.bodyContent td>ul:not(.TK-noDots)>li:before{border-radius:50%;height:6px;width:6px;background:#cf1730;top:6px}.bodyContent>ul:not(.TK-noDots)>li>ul>li:before,.bodyContent td>ul:not(.TK-noDots)>li>ul>li:before{height:2px;width:10px;background:#cf1730;top:9px}.bodyContent>ul:not(.TK-noDots)>li>ul>li>ul>li:before,.bodyContent td>ul:not(.TK-noDots)>li>ul>li>ul>li:before{border-radius:50%;height:6px;width:6px;border:1px solid #cf1730;top:5px}.bodyContent ol:not(.TK-noDots),.bodyContent td ol:not(.TK-noDots){counter-reset:a;list-style:none;padding-left:0}.bodyContent ol:not(.TK-noDots) li,.bodyContent td ol:not(.TK-noDots) li{padding-left:25px;position:relative}.bodyContent ol:not(.TK-noDots) li:before,.bodyContent td ol:not(.TK-noDots) li:before{content:counter(a) ".";counter-increment:a;position:absolute;left:0;font-weight:700;color:#cf1730}.bodyContent ol:not(.TK-noDots) li ol li:before,.bodyContent td ol:not(.TK-noDots) li ol li:before{content:counter(a,lower-alpha) "."}.bodyContent ol:not(.TK-noDots) li ol li ol li:before,.bodyContent td ol:not(.TK-noDots) li ol li ol li:before{content:counter(a,lower-roman) ".";left:auto;right:100%;margin-right:-15px}.bodyContent img,.bodyContent td img,.btn{display:inline-block}.btn{font-family:Montserrat,sans-serif;font-weight:700;font-size:14px;font-size:1.4rem;background-color:#5b1223;color:#fff;transition:.3s;padding:15px 20px;transition:all .25s ease-in-out;position:relative;text-align:left;line-height:1;letter-spacing:.5px;letter-spacing:.05rem;border:3px solid #cf1730;text-decoration:none!important}.btn:hover{background-color:#000;color:#fff}.btn:hover svg{fill:#cf1730}.btn svg{fill:#cf1730;position:absolute;top:0;bottom:0;margin:auto 0;right:20px;height:10px;width:10px;fill:transparent;fill:#fff;fill-width:15px;transition:.3s}.btn.-hasIcon{padding-right:55px}.btn.-active{background-color:#b9d48b;color:#000}.btn.-active:hover{background-color:#94aa6f}.btn.-inactive{background-color:#d3d3d3;color:#000}.btn.-inactive:hover{background-color:gray}.demo{padding:5px;border:2px solid #000}.demo__segment{position:relative;margin-top:35px;margin-bottom:10px}.demo__segment.grid__cell,.demo__segment:last-child{margin-bottom:0}.demo__segment:before{position:absolute;bottom:100%;left:0;padding:5px 10px;background:#000;color:#fff;border-radius:5px 5px 0 0}.demo__summary{background-color:#cddec4;padding:20px;margin-bottom:10px;margin-top:60px}.demo__summary:before{content:"Summary"}.demo__summary+.demo__result{margin-top:45px}.demo__result:before{content:"Example"}.-false .demo__result:before{content:"Not Gutter Grid"}.demo__result .grid{padding:0}.demo__result .grid__cell,.demo__result .mixin__cell{min-height:100px;margin:0}.-noHeight .demo__result .grid__cell,.-noHeight .demo__result .mixin__cell{min-height:0}.demo__markup{background-color:#282c34;position:relative;padding-left:40px;display:-webkit-box;display:-ms-flexbox;display:flex}.demo__markup.html:before{content:"HTML"}.demo__markup.scss:before{content:"Sass"}.demo__markup.js:before{content:"JavaScript"}.demo__markup.json:before{content:"JSON"}.demo__markup pre{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1}.demo__markup pre,.demo__markup pre.lines{margin:0}.demo__markup pre.lines{overflow:hidden;position:absolute;top:0;left:0;bottom:0;background:#000;padding-top:12px}.demo__markup code{margin-top:-20px;padding-bottom:10px;padding-top:10px}.demo .example li,.demo .example ul{list-style:none;padding-left:0!important}.header{margin-bottom:30px}.header h1{margin:50px 0 10px}.header .version{text-align:center;font-style:italic;margin-bottom:10px}.pageContainer{padding-left:20px!important;padding-right:20px!important}.pageContainer.-wide{padding-left:0!important;padding-right:0!important}.pageContainer__width{margin:0 auto;max-width:1200px;min-width:280px;display:block;pointer-events:auto;width:100%}.pageContainer__width:after{display:block;content:"";clear:both}.-wide .pageContainer__width{max-width:1240px}.-thin .pageContainer__width{max-width:1160px}.tabs{padding-top:1px}.tabs__link{text-align:center;text-transform:capitalize}.js .tabs__content{display:none}.no-flexbox .tabs{width:780px}.tests{display:-ms-grid;display:grid;-ms-grid-columns:minmax(0,1fr);grid-template-columns:minmax(0,1fr);grid-gap:20px}.test{padding:30px;border:2px solid #000;background:#6d0808;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-bottom:20px}.test h3{margin-bottom:0}.test:after,.test:before{color:#fff;white-space:pre}.test:before{font-size:20px;font-size:2rem}.test:after{content:" = false"}.test.-max:before{content:"mq(max, 800px)"}@media (max-width:800px){.test.-max{background:#004700}.test.-max:after{content:" = true"}}.test.-maxWidth:before{content:"mq(max-width, 800px)"}@media (max-width:800px){.test.-maxWidth{background:#004700}.test.-maxWidth:after{content:" = true"}}.test.-maxVar:before{content:"mq($MQ-maxVar)"}@media (max-width:800px){.test.-maxVar{background:#004700}.test.-maxVar:after{content:" = true"}}.test.-min:before{content:"mq(min, 800px)"}@media (min-width:801px){.test.-min{background:#004700}.test.-min:after{content:" = true"}}.test.-minWidth:before{content:"mq(min-width, 800px)"}@media (min-width:801px){.test.-minWidth{background:#004700}.test.-minWidth:after{content:" = true"}}.test.-minVar:before{content:"mq($MQ-minVar)"}@media (min-width:801px){.test.-minVar{background:#004700}.test.-minVar:after{content:" = true"}}.test.-inside:before{content:"mq(inside, 800px, 600px)"}@media (max-width:800px) and (min-width:601px){.test.-inside{background:#004700}.test.-inside:after{content:" = true"}}.test.-insideWidth:before{content:"mq(inside-width, 600px, 800px)"}@media (max-width:800px) and (min-width:601px){.test.-insideWidth{background:#004700}.test.-insideWidth:after{content:" = true"}}.test.-insideVar:before{content:"mq($MQ-insideVar)"}@media (max-width:800px) and (min-width:601px){.test.-insideVar{background:#004700}.test.-insideVar:after{content:" = true"}}.test.-outside:before{content:"mq(outside, 800px, 600px)"}@media (max-width:600px),(min-width:801px){.test.-outside{background:#004700}.test.-outside:after{content:" = true"}}.test.-outsideWidth:before{content:"mq(outside-width, 600px, 800px)"}@media (max-width:600px),(min-width:801px){.test.-outsideWidth{background:#004700}.test.-outsideWidth:after{content:" = true"}}.test.-outsideVar:before{content:"mq($MQ-outsideVar)"}@media (max-width:600px),(min-width:801px){.test.-outsideVar{background:#004700}.test.-outsideVar:after{content:" = true"}}.test.-maxHeight:before{content:"mq(max-height, 800px)"}@media (max-height:800px){.test.-maxHeight{background:#004700}.test.-maxHeight:after{content:" = true"}}.test.-maxHeightVar:before{content:"mq($MQ-maxHeightVar)"}@media (max-height:800px){.test.-maxHeightVar{background:#004700}.test.-maxHeightVar:after{content:" = true"}}.test.-minHeight:before{content:"mq(min-height, 800px)"}@media (min-height:801px){.test.-minHeight{background:#004700}.test.-minHeight:after{content:" = true"}}.test.-minHeightVar:before{content:"mq($MQ-minHeightVar)"}@media (min-height:801px){.test.-minHeightVar{background:#004700}.test.-minHeightVar:after{content:" = true"}}.test.-insideHeight:before{content:"mq(inside-height, 600px, 800px)"}@media (max-height:800px) and (min-height:601px){.test.-insideHeight{background:#004700}.test.-insideHeight:after{content:" = true"}}.test.-insideHeightVar:before{content:"mq($MQ-insideHeightVar)"}@media (max-height:800px) and (min-height:601px){.test.-insideHeightVar{background:#004700}.test.-insideHeightVar:after{content:" = true"}}.test.-outsideHeight:before{content:"mq(outside-height, 600px, 800px)"}@media (max-height:600px),(min-height:801px){.test.-outsideHeight{background:#004700}.test.-outsideHeight:after{content:" = true"}}.test.-outsideHeightVar:before{content:"mq($MQ-outsideHeightVar)"}@media (max-height:600px),(min-height:801px){.test.-outsideHeightVar{background:#004700}.test.-outsideHeightVar:after{content:" = true"}}.test.-ratio:before{content:'mq(ratio, "2 / 1")'}@media (aspect-ratio:2/1){.test.-ratio{background:#004700}.test.-ratio:after{content:" = true"}}.test.-ratioVar:before{content:"mq($MQ-ratioVar)"}@media (aspect-ratio:2/1){.test.-ratioVar{background:#004700}.test.-ratioVar:after{content:" = true"}}.test.-minRatio:before{content:'mq(min-ratio, "2 / 1")'}@media (min-aspect-ratio:2/1){.test.-minRatio{background:#004700}.test.-minRatio:after{content:" = true"}}.test.-minRatioVar:before{content:"mq($MQ-minRatioVar)"}@media (min-aspect-ratio:2/1){.test.-minRatioVar{background:#004700}.test.-minRatioVar:after{content:" = true"}}.test.-maxRatio:before{content:'mq(max-ratio, "2 / 1")'}@media (max-aspect-ratio:2/1){.test.-maxRatio{background:#004700}.test.-maxRatio:after{content:" = true"}}.test.-maxRatioVar:before{content:"mq($MQ-minRatioVar)"}@media (max-aspect-ratio:2/1){.test.-maxRatioVar{background:#004700}.test.-maxRatioVar:after{content:" = true"}}.test.-insideRatio:before{content:'mq(inside-ratio, "2 / 1", "1 / 1")'}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-insideRatio{background:#004700}.test.-insideRatio:after{content:" = true"}}.test.-insideRatioVar:before{content:"mq($MQ-insideRatioVar)"}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-insideRatioVar{background:#004700}.test.-insideRatioVar:after{content:" = true"}}.test.-outsideRatio:before{content:'mq(outside-ratio, "1 / 1", "2 / 1")'}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1){.test.-outsideRatio{background:#004700}.test.-outsideRatio:after{content:" = true"}}.test.-outsideRatioVar:before{content:"mq($MQ-outsideRatioVar)"}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1){.test.-outsideRatioVar{background:#004700}.test.-outsideRatioVar:after{content:" = true"}}.test.-exactRatioWorkAround1:before{content:"mq($MQ-exactRatioWorkAround1)"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround1{background:#004700}.test.-exactRatioWorkAround1:after{content:" = true"}}.test.-exactRatioWorkAround2:before{content:"mq($MQ-exactRatioWorkAround2)"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround2{background:#004700}.test.-exactRatioWorkAround2:after{content:" = true"}}.test.-exactRatioWorkAround3:before{content:"mq(max-ratio, '2 / 1', 'not')"}@media not screen and (max-aspect-ratio:2/1){.test.-exactRatioWorkAround3{background:#004700}.test.-exactRatioWorkAround3:after{content:" = true"}}.test.-simpleMedia:before{content:"mq(min, 800px, 'screen')"}@media screen and (min-width:801px){.test.-simpleMedia{background:#004700}.test.-simpleMedia:after{content:" = true"}}.test.-notMedia:before{content:"mq(min, 800px, 'not')"}@media not screen and (min-width:801px){.test.-notMedia{background:#004700}.test.-notMedia:after{content:" = true"}}.test.-onlyMedia:before{content:"mq('screen')"}@media screen{.test.-onlyMedia{background:#004700}.test.-onlyMedia:after{content:" = true"}}.test.-simplePlus:before{content:"mq($MQ-simplePlus)"}@media (min-width:801px) and (min-height:601px){.test.-simplePlus{background:#004700}.test.-simplePlus:after{content:" = true"}}.test.-inlinePlus:before{content:"mq((min-width, 800px) plus (min-height, 600px))"}@media (min-width:801px) and (min-height:601px){.test.-inlinePlus{background:#004700}.test.-inlinePlus:after{content:" = true"}}.test.-mediaOnlyPlus:before{content:"mq('screen' plus (min, 800px))"}@media screen and (min-width:801px){.test.-mediaOnlyPlus{background:#004700}.test.-mediaOnlyPlus:after{content:" = true"}}.test.-complexPlus:before{content:"mq($MQ-complexPlus)"}@media print and (max-width:800px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-complexPlus{background:#004700}.test.-complexPlus:after{content:" = true"}}.test.-ignoredMediaType:before{content:"mq($MQ-ignoredMediaType)"}@media (max-width:800px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-ignoredMediaType{background:#004700}.test.-ignoredMediaType:after{content:" = true"}}.test.-multiPlus:before{content:"mq($MQ-multiPlus)"}@media screen and (min-width:801px) and (min-height:401px) and (max-width:1000px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1){.test.-multiPlus{background:#004700}.test.-multiPlus:after{content:" = true"}}.test.-simpleOr:before{content:"mq($MQ-simpleOr)"}.test.-complexOr:before{content:"mq($MQ-complexOr)"}@media (max-aspect-ratio:1/1),(min-aspect-ratio:2/1),screen and (max-width:800px) and (min-width:601px){.test.-complexOr{background:#004700}.test.-complexOr:after{content:" = true"}}.test.-multiOr:before{content:"mq($MQ-multiOr)"}@media (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1),(max-width:1000px) and (min-width:601px),(min-height:801px),print,screen and (min-width:801px){.test.-multiOr{background:#004700}.test.-multiOr:after{content:" = true"}}.test.-orPlusCombo:before{content:"mq($MQ-orPlusCombo)"}@media screen and (max-width:1000px) and (min-width:601px) and (max-aspect-ratio:2/1) and (min-aspect-ratio:1/1),screen and (min-width:801px) and (min-height:801px){.test.-orPlusCombo{background:#004700}.test.-orPlusCombo:after{content:" = true"}}@media not screen and (max-aspect-ratio:2/1){body{color:#000}}.breakpoints{padding:20px;border:2px solid #000}.breakpoints__size.-minimum:before{content:"BP-minimum: "}.breakpoints__size.-minimum:after{content:"320px";font-weight:700;font-size:1.2em}.breakpoints__size.-small:before{content:"BP-small: "}.breakpoints__size.-small:after{content:"600px";font-weight:700;font-size:1.2em}.breakpoints__size.-medium:before{content:"BP-medium: "}.breakpoints__size.-medium:after{content:"800px";font-weight:700;font-size:1.2em}.breakpoints__size.-large:before{content:"BP-large: "}.breakpoints__size.-large:after{content:"1000px";font-weight:700;font-size:1.2em}.breakpoints__size.-page:before{content:"BP-page: "}.breakpoints__size.-page:after{content:"1200px";font-weight:700;font-size:1.2em}@media (max-width:1024px) and (min-width:601px){.module__element{background:red}}@media (max-width:600px),(min-width:1025px){.module__element{background:blue}}@media (max-width:1024px) and (min-width:601px){.module__element--green{background:green}}@media (max-width:600px),(min-width:1025px){.module__element--green{background:grey}} /*# sourceMappingURL=main.css.map */ diff --git a/docs/assets/styles/main.css.map b/docs/assets/styles/main.css.map index dedcc4b..61f294c 100644 --- a/docs/assets/styles/main.css.map +++ b/docs/assets/styles/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["00-config-files/04-fonts/font-families.scss","00-config-files/03-BPs-MQs/00-bp-break-points-base.scss","../../node_modules/normalize.css/normalize.css","main.css","00-config-files/npm-installs.scss","03-plugins/normalize.altered.scss","03-plugins/highlight.theme.atom-one-dark.scss","04-base-styles/elements.scss","00-config-files/01-colors/2-CF-colors-functional.scss","00-config-files/01-colors/0-CB-colors-base.scss","00-config-files/04-fonts/font-weights.scss","00-config-files/02-values/VG-values-global.scss","04-base-styles/color-classes.scss","00-config-files/01-colors/1-brand.scss","04-base-styles/TK-toolkit.scss","../_modules/pageContainer/pageContainer.scss","02-mixins/clearfix.scss","../_modules/demo/demo.scss","../_modules/tabs/tabs.scss","../_modules/bodyContent/bodyContent.scss","../_modules/btn/btn.scss","02-mixins/centered.scss","01-functions/color-functions.scss","../_modules/header/header.scss","../_modules/tests/tests.scss","../../_mq.scss"],"names":[],"mappings":"AACA,kGAAY,ACwBZ,MAEE,mBAlBgB,AAkBhB,iBAhBc,AAgBd,kBAfe,AAef,kBAde,AAcf,gBAZc,CAcf;;AC7BD,4EAA4E,AAW5E,KACE,gBAAiB,CAGlB,AA4CD,+DAGE,aAAc,CACf,AAeD,GAGE,gBAAiB,CAClB,AAOD,IACE,gCAAiC,AACjC,aAAc,CACf,AAUD,EAEE,oCAAqC,CACtC,AAOD,YACE,mBAAmB,AACnB,0BAA0B,AAC1B,yCAAiC,AAAjC,gCAAiC,CAClC,AAMD,SAEE,oBAAoB,AASpB,kBAAmB,CARpB,AAgBD,cAGE,gCAAiC,AACjC,aAAc,CACf,AAcD,KACE,qBAAsB,CAEvB,AAsCD,YAEE,oBAAqB,CACtB,AAeD,IACE,iBAAkB,CACnB,AAkBD,sCAKE,uBAAuB,AACvB,eAAe,AACf,gBAAiB,CAElB,AAOD,aAEE,gBAAiB,CAClB,AAkBD,qDAIE,yBAA0B,CAC3B,AAMD,wHAIE,kBAAkB,AAClB,SAAU,CACX,AAMD,4GAIE,6BAA8B,CAC/B,AAMD,SACE,0BAA8B,CAC/B,AASD,OACE,sBAAsB,AACtB,cAAc,AACd,cAAc,AACd,eAAe,AAEf,kBAAmB,CACpB,AAOD,SACE,qBAAqB,AACrB,uBAAwB,CACzB,ACyCD,6BDxBE,sBAAsB,AACtB,SAAU,CACX,ACiCD,kFDzBE,WAAY,CACb,ACiCD,cDzBE,6BAA6B,AAC7B,mBAAoB,CACrB,ACiCD,qFDzBE,uBAAwB,CACzB,AAOD,6BACE,0BAA0B,AAC1B,YAAa,CACd,AAUD,aAEE,aAAc,CACf,AAMD,QACE,iBAAkB,CACnB,AASD,OACE,oBAAqB,CACtB,ACqCD,kBDnBE,YAAa,CACd,AEzbD,iBAAoB,iBAAkB,CAAK;;ACG3C,4EAA4E,AAQ5E,KACE,uBAAuB,AACvB,0BAA0B,AAC1B,6BAA8B,CAC/B,AAoBD,2FAaE,aAAc,CACf,AAOD,4BAIE,qBAAqB,AACrB,uBAAwB,CACzB,AAOD,sBACE,aAAa,AACb,QAAS,CACV,AFodD,kBE3cE,YAAa,CACd,AASD,EACE,4BAA6B,CAC9B,AAsBD,YACE,wBAAyB,CAC1B,AAMD,SAEE,eAAiB,CAClB,AAMD,IACE,iBAAkB,CACnB,AAOD,GACE,cAAc,AACd,cAAgB,CACjB,AAMD,KACE,gBAAgB,AAChB,UAAW,CACZ,AAMD,MACE,aAAc,CACf,AAMD,QAEE,cAAc,AACd,cAAc,AACd,kBAAkB,AAClB,uBAAwB,CACzB,AAED,IACE,SAAW,CACZ,AAED,IACE,aAAe,CAChB,AASD,IACE,QAAS,CACV,AAMD,eACE,eAAgB,CACjB,AASD,OACE,eAAgB,CACjB,AAMD,GACE,uBAAuB,AACvB,QAAS,CACV,AAMD,IACE,aAAc,CACf,AAMD,kBAIE,gCAAiC,AACjC,aAAc,CACf,AAiBD,sCAKE,cAAc,AACd,aAAa,AACb,QAAS,CACV,AAMD,OACE,gBAAiB,CAClB,AASD,cAEE,mBAAoB,CACrB,AAUD,oEAIE,0BAA0B,AAC1B,cAAe,CAChB,AAMD,sCAEE,cAAe,CAChB,AAMD,iDAEE,SAAS,AACT,SAAU,CACX,AAOD,MACE,kBAAmB,CACpB,AAUD,uCAEE,sBAAsB,AACtB,SAAU,CACX,AAQD,4FAEE,WAAY,CACb,AAOD,mBACE,6BAA6B,AAC7B,sBAAuB,CACxB,AAQD,+FAEE,uBAAwB,CACzB,AAMD,SACE,wBAAyB,AACzB,aAAa,AACb,0BAA8B,CAC/B,AAOD,OACE,SAAS,AACT,SAAU,CACX,AAMD,SACE,aAAc,CACf,AAOD,SACE,eAAiB,CAClB,AASD,MACE,yBAAyB,AACzB,gBAAiB,CAClB,AAED,MAEE,SAAU,CACX,AC9ZD,MACE,cAAc,AACd,gBAAgB,AAChB,aAAc,AACd,cAAc,AACd,kBAAmB,CACpB,AAED,0BAEE,cAAc,AACd,iBAAkB,CACnB,AAED,yCAGE,aAAc,CACf,AAED,uEAKE,aAAc,CACf,AAED,cACE,aAAc,CACf,AAED,2EAKE,aAAc,CACf,AAED,uCAEE,aAAc,CACf,AAED,yIAQE,aAAc,CACf,AAED,8EAME,aAAc,CACf,AAED,eACE,iBAAkB,CACnB,AAED,aACE,eAAiB,CAClB,AAED,WACE,yBAA0B,CAC3B,ACtFD,iBAGI,mCAAmC,AACnC,kCAAkC,AAClC,2BAA2B,AAM3B,kBAAmB,CACpB,AAGH,UAEE,sBAAsB,AAGtB,YAAY,AAGZ,SAAS,AACT,SAAU,CACX,AAED,KAEE,eAAgB,CACjB,AAGD,mGAkBS,YAAa,CAAK,AAI3B,KACE,sBC1DgB,AD2DhB,kBAAkB,AAClB,SAAS,AACT,eAAe,AAAf,iBAAe,AACf,gBAAgB,AAChB,WETmB,AFUnB,mCPjEqC,AOkErC,eGrEW,CHsEZ,AAED,QAEE,aAAwB,CAKzB,AAPD,4CAKkB,YAAa,CAAK,AALpC,yCAMiB,eAAgB,CAAK,AAItC,kBACE,kCPxE+B,AOyE/B,gBGjFQ,AHkFR,cAAc,AACd,qBAAsB,AAAtB,uBAAsB,AACtB,mBAAmB,AACnB,eItFmB,CJiGpB,AAjBD,0FAQkB,YAAa,CAAK,AARpC,oFASiB,eAAgB,CAAK,AATtC,sGAWgB,YAAa,CAAK,AAEhC,sGACE,aEjFoB,CFkFrB,AAGH,GACE,eAAe,AAAf,eAAe,AACf,iBAAkB,CAEnB,AAJD,MAGS,eAAgB,CAAK,AAE9B,GAAK,eAAe,AAAf,iBAAe,AAAG,eAAgB,CAAK,AAC5C,GAAK,eAAe,AAAf,cAAe,CAAK,AACzB,GAAK,eAAe,AAAf,iBAAe,AAAG,wBAAyB,CAAK,AAGrD,EACE,qBAAqB,AACrB,cEvEkB,AFwElB,cAAgB,CAejB,AAlBD,gBAMI,yBAA0B,CAC3B,AAPH,YAUI,eAAe,AACf,oBAAoB,AACpB,UAAY,CAKb,AAHC,iCACE,YAAa,CACd,AAOL,6CAAiD,cAAe,CAAK,AAErE,IAAM,cAAc,AAAG,eAAe,AAAG,UAAW,CAAK,AAEzD,MACE,cAAgB,CACjB,AACD,wBACU,8BAAsB,AAAtB,qBAAsB,CAAI,AAGpC,WACE,6BAA6B,AAC7B,cAAc,AACd,2BAA2B,AAC3B,kBAAkB,AAClB,SAAS,AACT,iBAAiB,AACjB,sBAAuB,CAUxB,AAjBD,kBAUI,YAAa,CACd,AAXH,aAcI,eAAe,AAAf,iBAAe,AACf,gBAAiB,CAClB,AAGH,IACE,yBAAyB,AACzB,kBAAkB,AAClB,mBAAmB,AACnB,4CAAkD,AAClD,eAAe,AAAf,iBAAe,AACf,iBAAiB,AACjB,8BAA8B,AAC9B,qBAAqB,AACrB,cAAc,AACd,yBAAyB,AACzB,SAAU,CA4BX,AAvCD,cAcI,SAAS,AACA,eAAO,AAAG,eAAQ,CAC5B,AAhBH,UAmBI,eAAe,AAAf,iBAAe,AACf,aAAa,AACb,WAAY,AACZ,wBAAyB,AACzB,gBAAgB,AAChB,cAAc,AACd,sBAAsB,AACtB,WAAW,AACD,gBAAQ,AAAG,mBAAW,AAChC,2BAA6B,CAC9B,AA7BH,SAgCI,iBAAiB,AACjB,aAAc,CACf,AAED,gBACE,eAAgB,CACjB,AAGH,KACE,cAAe,CAChB,AAED,uDAEI,yBAAyB,AACzB,gBAAgB,AAChB,eAAgB,CACjB,AKrND,UACC,wBHwCiB,CGpCjB,AALD,sBAGQ,UCOC,CDP2B,AAHpC,wBAIU,SCMD,CDN4B,AAGrC,gCAEE,cHgCgB,AG/BhB,YH+BgB,CG9BhB,AAXF,UACC,wBHcqB,CGVrB,AALD,sBAGQ,UCcC,CDd2B,AAHpC,wBAIU,SCaD,CDb4B,AAGrC,gCAEE,cHMoB,AGLpB,YHKoB,CGJpB,AAXF,UACC,wBHsBoB,CGlBpB,AALD,sBAGQ,UCmBC,CDnB2B,AAHpC,wBAIU,SCkBD,CDlB4B,AAGrC,gCAEE,cHcmB,AGbnB,YHamB,CGZnB,AAXF,UACC,wBHkCoB,CG9BpB,AALD,sBAGQ,UCwBC,CDxB2B,AAHpC,wBAIU,SCuBD,CDvB4B,AAGrC,gCAEE,cH0BmB,AGzBnB,YHyBmB,CGxBnB,AAXF,UACC,wBHgBoB,CGZpB,AALD,sBAGQ,UC6BC,CD7B2B,AAHpC,wBAIU,SC4BD,CD5B4B,AAGrC,gCAEE,cHQmB,AGPnB,YHOmB,CGNnB,ALwHJ,kBOrIa,gBAAgB,AAAG,SAAS,AAAG,SAAU,CAAK,AAYzD,oBAAW,YAAa,CAAK,AAI7B,eAAQ,sBAAuB,CAAI,AACnC,kBAAW,aAAc,CAAM,AAIhC,aACC,SAAQ,AACR,mBAAkB,AAClB,QAAO,AACP,SAAQ,AACR,UAAS,AACT,gBAAe,AACf,kBAAiB,AACjB,SAAU,CASV,AAjBD,uCAWE,UAAU,AACV,WAAU,AACV,YAAW,AACX,gBAAgB,AAChB,SAAU,CACV,ACrCH,eAIE,4BAAoC,AACpC,4BAAqC,CA6BtC,AAlCD,qBAUG,yBAAkB,AAClB,yBAAmB,CAEpB,AAGD,sBAGC,cAAa,AACb,iBdNc,AcOd,gBAAkD,AAClD,cAAc,AACd,oBAAoB,AACpB,UAAW,CASX,ACjCD,4BACC,cAAc,AACd,WAAW,AACX,UAAW,CACX,ADsBA,6BACC,gBAA+C,CAC/C,AAED,6BACC,gBAA+C,CAC/C,AEjCH,MACC,YAAY,AACZ,qBAAsB,CAqGtB,AAnGA,eACC,kBAAkB,AAClB,gBAAgB,AAChB,kBAAmB,CAanB,AAhBD,oDAKE,eAAgB,CAChB,AANF,sBAQE,kBAAkB,AAClB,YAAY,AACZ,OAAO,AACP,iBAAiB,AACjB,gBAAgB,AAChB,WAAW,AACX,yBAA0B,CAC1B,AAEF,eACC,yBAAyB,AACzB,aAAa,AACb,mBAAmB,AACnB,eAAgB,CAQhB,AAZD,sBAME,iBAAkB,CAClB,AAPF,6BAUE,eAAgB,CAChB,AAEF,qBAEE,iBAAkB,CAKlB,AAHA,6BACC,yBACD,CAAE,AANJ,oBASE,SAAU,CACV,AAVF,qDAaE,iBAAiB,AACjB,QAAS,CAKT,AAPD,2EAKE,YAAa,CACb,AAGH,cACC,yBAAyB,AACzB,kBAAkB,AAClB,kBAAkB,AAClB,oBAAa,AAAb,oBAAa,AAAb,YAAa,CAoCb,AAxCD,0BAMK,cAAe,CAChB,AAPJ,0BASE,cAAe,CACf,AAVF,wBAYK,oBAAqB,CACtB,AAbJ,0BAeK,cAAe,CAChB,AAhBJ,kBAmBK,oBAAa,AAAb,oBAAa,AAAb,aAAa,AACb,mBAAY,AAAZ,oBAAY,AAAZ,WAAY,CAcb,AAlCJ,0CAsBO,QAAS,CACV,AAvBN,wBA0BO,gBAAgB,AAChB,kBAAkB,AAClB,MAAM,AACN,OAAO,AACP,SAAS,AACT,gBAAgB,AAChB,gBAAiB,CAClB,AAjCN,mBAqCK,iBAAiB,AACP,oBAAY,AAAG,gBAAS,CACnC,AA9FL,oCAmGG,gBAAgB,AAChB,wBAA0B,CAC1B,ACpGH,MACC,eAAgB,CAehB,AAdA,YACC,kBAAkB,AAClB,yBAA0B,CAC1B,AAGA,mBACC,YAAa,CACb,AAGF,kBACC,WAAY,CACZ,ACTF,aACE,oBAAqB,CA0ItB,AA3ID,6BAKE,eAAgB,CAqIhB,AA1IF,4EAOc,eTRJ,CSQ0B,AAPpC,0EAUG,cAAgB,CAChB,AAXH,qDAcG,gBTlBU,ASmBV,0BAA0B,AAC1B,aVqBiB,CUjBjB,AApBH,kIAkBI,oBAAqB,CACrB,AAnBJ,oKA0BK,QAAS,CACT,AA3BL,kFA6BK,eAAgB,CAChB,AA9BL,8MAoCM,eRtCe,CQuCf,AArCN,kJAuCM,SAAS,AACT,mBAAoB,CAQpB,AAhDN,kMA0CO,gBAAgB,AAChB,aAAc,CACd,AA5CP,8LA8CO,gBAAiB,CACjB,AA/CP,mEAqDI,SAAU,CAcV,AAnEJ,yEAuDK,gBAAgB,AAChB,kBAAkB,AAElB,iBAAkB,CAQlB,AAlEL,uFA4DM,WAAW,AACX,cAAc,AACd,kBAAkB,AAClB,SAAS,AACT,MAAO,CACP,AAjEN,uFAwEM,kBAAkB,AAClB,WAAW,AACX,UAAU,AACV,mBVtCc,AUuCd,OAAQ,CACR,AA7EN,mGAgFO,WAAW,AACX,WAAW,AACX,mBV7Ca,AU8Cb,OAAQ,CACR,AApFP,+GAwFQ,kBAAkB,AAClB,WAAW,AACX,UAAU,AACV,yBVtDY,AUuDZ,OAAQ,CACR,AA7FR,mEAoGI,gBAAiB,AACjB,gBAAgB,AAChB,cAAe,CA2Bf,AAjIJ,yEAwGK,kBAAkB,AAClB,iBAAkB,CAuBlB,AAhIL,uFA4GM,uBAAsB,AACtB,oBAAoB,AACpB,kBAAkB,AAClB,OAAO,AACP,gBTjHI,ASkHJ,aV5Ec,CU6Ed,AAlHN,mGAqHO,kCAAkC,CAClC,AAtHP,+GAyHQ,mCAAkC,AAClC,UAAU,AACV,WAAW,AACX,kBAAmB,CACnB,ACnIR,0CD8IQ,oBAAqB,CC9I7B,AA0DC,KAzDC,kCpBY+B,AoBX/B,gBVGQ,AUFR,eAAe,AAAf,iBAAe,AACf,yBXyCmB,AWxCnB,WAAW,AACX,eAAgB,AAChB,kBAAkB,AAElB,gCAAiC,AACjC,kBAAkB,AAClB,gBAAgB,AAChB,cAAc,AACd,oBAAqB,AAArB,sBAAqB,AACrB,yBX6BkB,AW5BlB,8BAAgC,CA2CjC,AA1DD,WAkBI,sBAAsB,AACtB,UAAW,CAKZ,AAxBH,eAsBM,YXqBc,CWpBf,AAvBL,SA2BE,aXgBkB,AYlCnB,kBAAkB,AAsBhB,MAAM,AACN,SAAS,AACT,cAAc,ADJf,WAAW,AACX,YAAY,AACZ,WAAW,AACX,iBAAiB,AACjB,UPrBS,AOsBT,gBAAgB,AAChB,cAAgB,CAChB,AApCF,cAuCE,kBAAmB,CACnB,AAxCF,aA2CI,yBX1BoB,AW2BpB,UPzBO,CO6BR,AAhDH,mBA8CM,wBEtC+B,CFuChC,AA/CL,eAmDI,yBAA2B,AAC3B,UPjCO,COqCR,AAxDH,qBAsDM,qBAAsB,CACvB,AGxDL,QACE,kBAAmB,CAUpB,AAXD,WAGI,kBAAmB,CACpB,AAJH,iBAOI,kBAAkB,AAClB,kBAAkB,AAClB,kBAAmB,CACpB,ACPH,OACC,aAAa,AACb,oCAAoC,AACpC,aAAc,CACd,AAOD,MACC,aAAa,AACb,sBAAsB,AACtB,mBAjBY,AAkBZ,oBAAa,AAAb,oBAAa,AAAb,aAAa,AACb,yBAAmB,AAAnB,sBAAmB,AAAnB,mBAAmB,AACnB,wBAAuB,AAAvB,qBAAuB,AAAvB,uBAAuB,AACvB,kBAAmB,CA8ZnB,AAraD,SAUE,eAAgB,CAChB,AAXF,yBAcE,WAAW,AACX,eAAgB,CAChB,AAhBF,aAmBE,eAAe,AAAf,cAAe,CAEf,AArBF,YAwBE,kBAAmB,CACnB,AAzBF,kBAgCc,wBAAiC,CAAI,ACyXhD,yBDzZH,WAJC,kBATc,CAiDb,AAvCD,iBAAW,iBAAkB,CAAK,CrB2qDlC,AqBxqDD,uBAsCc,8BAAuC,CAAI,ACmXtD,yBDzZH,gBAJC,kBATc,CAuDb,AA7CD,sBAAW,iBAAkB,CAAK,CrBwrDlC,AqBrrDD,qBA8Cc,wBAAyB,CAAK,ACqU1C,yBDnXF,cAJC,kBATc,CA+Db,AArDD,oBAAW,iBAAkB,CAAK,CrBqsDlC,AqBlsDD,kBAqDc,wBAAiC,CAAI,ACoWhD,yBDzZH,WAJC,kBATc,CAsEb,AA5DD,iBAAW,iBAAkB,CAAK,CrBktDlC,AqB/sDD,uBA4Dc,8BAAuC,CAAI,AC6VtD,yBDzZH,gBAJC,kBATc,CA6Eb,AAnED,sBAAW,iBAAkB,CAAK,CrB+tDlC,AqB5tDD,qBAoEc,wBAAyB,CAAK,AC+S1C,yBDnXF,cAJC,kBATc,CAqFb,AA3ED,oBAAW,iBAAkB,CAAK,CrB4uDlC,AqBzuDD,qBA2Ec,kCAAmD,CAAI,AC8UlE,+CDzZH,cAJC,kBATc,CA4Fb,AAlFD,oBAAW,iBAAkB,CAAK,CrByvDlC,AqBtvDD,0BAkFc,wCAAwD,CAAI,ACuUvE,+CDzZH,mBAJC,kBATc,CAmGb,AAzFD,yBAAW,iBAAkB,CAAK,CrBswDlC,AqBnwDD,wBA0Fc,2BAA4B,CAAK,ACyR7C,+CDnXF,iBAJC,kBATc,CA2Gb,AAjGD,uBAAW,iBAAkB,CAAK,CrBmxDlC,AqBhxDD,sBAiGc,mCAAmD,CAAI,ACwTlE,2CDzZH,eAJC,kBATc,CAkHb,AAxGD,qBAAW,iBAAkB,CAAK,CrBgyDlC,AqB7xDD,2BAwGc,yCAAyD,CAAI,ACiTxE,2CDzZH,oBAJC,kBATc,CAyHb,AA/GD,0BAAW,iBAAkB,CAAK,CrB6yDlC,AqB1yDD,yBAgHc,4BAA6B,CAAK,ACmQ9C,2CDnXF,kBAJC,kBATc,CAiIb,AAvHD,wBAAW,iBAAkB,CAAK,CrB0zDlC,AqBvzDD,wBA2Hc,+BAAwC,CAAI,AC8RvD,0BDzZH,iBAJC,kBATc,CA4Ib,AAlID,uBAAW,iBAAkB,CAAK,CrBu0DlC,AqBp0DD,2BAmIc,8BAA+B,CAAK,ACgPhD,0BDnXF,oBAJC,kBATc,CAoJb,AA1ID,0BAAW,iBAAkB,CAAK,CrBo1DlC,AqBj1DD,wBA0Ic,+BAAwC,CAAI,AC+QvD,0BDzZH,iBAJC,kBATc,CA2Jb,AAjJD,uBAAW,iBAAkB,CAAK,CrBi2DlC,AqB91DD,2BAkJc,8BAA+B,CAAK,ACiOhD,0BDnXF,oBAJC,kBATc,CAmKb,AAzJD,0BAAW,iBAAkB,CAAK,CrB82DlC,AqB32DD,2BAyJc,yCAAyD,CAAI,ACgQxE,iDDzZH,oBAJC,kBATc,CA0Kb,AAhKD,0BAAW,iBAAkB,CAAK,CrB23DlC,AqBx3DD,8BAiKc,iCAAkC,CAAK,ACkNnD,iDDnXF,uBAJC,kBATc,CAkLb,AAxKD,6BAAW,iBAAkB,CAAK,CrBw4DlC,AqBr4DD,4BAwKc,0CAA0D,CAAI,ACiPzE,6CDzZH,qBAJC,kBATc,CAyLb,AA/KD,2BAAW,iBAAkB,CAAK,CrBq5DlC,AqBl5DD,+BAgLc,kCAAmC,CAAK,ACmMpD,6CDnXF,wBAJC,kBATc,CAiMb,AAvLD,8BAAW,iBAAkB,CAAK,CrBk6DlC,AqB/5DD,oBA2Lc,4BAA6B,CAAK,AC8N7C,0BDzZH,aAJC,kBATc,CA4Mb,AAlMD,mBAAW,iBAAkB,CAAK,CrB+6DlC,AqB56DD,uBAmMc,0BAA2B,CAAK,ACgL5C,0BDnXF,gBAJC,kBATc,CAoNb,AA1MD,sBAAW,iBAAkB,CAAK,CrB47DlC,AqBz7DD,uBA0Mc,gCAAiC,CAAK,AC+MjD,8BDzZH,gBAJC,kBATc,CA2Nb,AAjND,sBAAW,iBAAkB,CAAK,CrBy8DlC,AqBt8DD,0BAkNc,6BAA8B,CAAK,ACiK/C,8BDnXF,mBAJC,kBATc,CAmOb,AAzND,yBAAW,iBAAkB,CAAK,CrBs9DlC,AqBn9DD,uBAyNc,gCAAiC,CAAK,ACgMjD,8BDzZH,gBAJC,kBATc,CA0Ob,AAhOD,sBAAW,iBAAkB,CAAK,CrBm+DlC,AqBh+DD,0BAiOc,6BAA8B,CAAK,ACkJ/C,8BDnXF,mBAJC,kBATc,CAkPb,AAxOD,yBAAW,iBAAkB,CAAK,CrBg/DlC,AqB7+DD,0BAwOc,4CAA6C,CAAK,ACiL7D,yDDzZH,mBAJC,kBATc,CAyPb,AA/OD,yBAAW,iBAAkB,CAAK,CrB6/DlC,AqB1/DD,6BAgPc,gCAAiC,CAAK,ACmIlD,yDDnXF,sBAJC,kBATc,CAiQb,AAvPD,4BAAW,iBAAkB,CAAK,CrB0gElC,AqBvgED,2BAuPc,6CAA8C,CAAK,ACkK9D,qDDzZH,oBAJC,kBATc,CAwQb,AA9PD,0BAAW,iBAAkB,CAAK,CrBuhElC,AqBphED,8BA+Pc,iCAAkC,CAAK,ACoHnD,qDDnXF,uBAJC,kBATc,CAgRb,AAtQD,6BAAW,iBAAkB,CAAK,CrBoiElC,AqBjiED,oCAwQc,uCAAwC,CAAK,AC2GzD,6CDnXF,6BAJC,kBATc,CAyRb,AA/QD,mCAAW,iBAAkB,CAAK,CrBijElC,AqB9iED,oCAiRc,uCAAwC,CAAK,ACkGzD,6CDnXF,6BAJC,kBATc,CAkSb,AAxRD,mCAAW,iBAAkB,CAAK,CrB8jElC,AqB3jED,oCAyRc,uCAAwC,CAAK,ACgIxD,6CDzZH,6BAJC,kBATc,CA0Sb,AAhSD,mCAAW,iBAAkB,CAAK,CrB2kElC,AqBxkED,0BAoSc,kCAA2C,CAAI,ACqH1D,oCDzZH,mBAJC,kBATc,CAqTb,AA3SD,yBAAW,iBAAkB,CAAK,CrBwlElC,AqBrlED,uBA2Sc,+BAAwC,CAAI,AC8GvD,wCDzZH,gBAJC,kBATc,CA4Tb,AAlTD,sBAAW,iBAAkB,CAAK,CrBqmElC,AqBlmED,wBAkTc,sBAAuB,CAAK,AC2FvC,cD7YH,iBAJC,kBATc,CAmUb,AAzTD,uBAAW,iBAAkB,CAAK,CrBknElC,AqB/mED,yBA+Tc,4BAA6B,CAAK,ACoD9C,gDDnXF,kBAJC,kBATc,CAgVb,AAtUD,wBAAW,iBAAkB,CAAK,CrB+nElC,AqB5nED,yBAuUc,yDAAkE,CAAI,AC4ClF,gDDnXF,kBAJC,kBATc,CAwVb,AA9UD,wBAAW,iBAAkB,CAAK,CrB4oElC,AqBzoED,4BA8Uc,wCAAiD,CAAI,ACqCjE,oCDnXF,qBAJC,kBATc,CA+Vb,AArVD,2BAAW,iBAAkB,CAAK,CrBypElC,AqBtpED,0BAsVc,6BAA8B,CAAK,AC6B/C,+GDnXF,mBAJC,kBATc,CAuWb,AA7VD,yBAAW,iBAAkB,CAAK,CrBsqElC,AqBnqED,+BA8Vc,kCAAmC,CAAK,ACqBpD,qGDnXF,wBAJC,kBATc,CA+Wb,AArWD,8BAAW,iBAAkB,CAAK,CrBmrElC,AqBhrED,wBA4Wc,2BAA4B,CAAK,ACO7C,8JDnXF,iBAJC,kBATc,CA8Xb,AApXD,uBAAW,iBAAkB,CAAK,CrBgsElC,AqB7rED,uBA4Xc,0BAA2B,CAAK,AA5X9C,wBAkYc,2BAA4B,CAAK,ACf7C,wGDnXF,iBAJC,kBATc,CAuZb,AA7YD,uBAAW,iBAAkB,CAAK,CrBitElC,AqB9sED,sBA6Yc,yBAA0B,CAAK,AC1B3C,wJDnXF,eAJC,kBATc,CAqab,AA3ZD,qBAAW,iBAAkB,CAAK,CrB8tElC,AqB3tED,0BA2Zc,6BAA8B,CAAK,ACxC/C,qKDnXF,mBAJC,kBATc,CAgbb,AAtaD,yBAAW,iBAAkB,CAAK,CrB2uElC,AsBr3DC,6CDqDD,KAAO,UAAW,CAAK,CrBs0DvB,AqBl0DD,aACC,aAAa,AACb,qBAAsB,CAgBtB,AAdA,mCAII,sBAAwB,CACxB,AALJ,kCAOI,gBAAoB,AACpB,gBAAiB,AACjB,eAAgB,CAChB,AAVJ,iCAII,oBAAwB,CACxB,AALJ,gCAOI,gBAAoB,AACpB,gBAAiB,AACjB,eAAgB,CAChB,AAVJ,kCAII,qBAAwB,CACxB,AALJ,iCAOI,gBAAoB,AACpB,gBAAiB,AACjB,eAAgB,CAChB,AAVJ,iCAII,oBAAwB,CACxB,AALJ,gCAOI,iBAAoB,AACpB,gBAAiB,AACjB,eAAgB,CAChB,AAVJ,gCAII,mBAAwB,CACxB,AALJ,+BAOI,iBAAoB,AACpB,gBAAiB,AACjB,eAAgB,CAChB","file":"main.css","sourcesContent":["\r\n@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i|Montserrat:400,700');\r\n\r\n//font families\r\n//Don't create variables like $openSans for custom fonts\r\n//Use generic variable names for better maintainability\r\n$sans-serif:\t'Cabin', Arial, sans-serif;\r\n$serif:\t\t\tTimes New Roman, Times, serif;\r\n$cursive:\t\tcursive;\r\n$code:\t\t\t\"Courier New\", Courier, monospace;\r\n\r\n//1 = primary\r\n//2 = secondary etc\r\n$font-1: $sans-serif;\r\n$font-2: 'Montserrat', sans-serif;\r\n","///*================================================*\\\r\n//\tBREAK POINTS\r\n//----------------------------------------------------\r\n//\tDefines the points at which the page design\r\n//\tcan snap and drastically change it's layout\r\n//\tthese values are global and can be used in\r\n//\tall modules.\r\n//*================================================*/\r\n\r\n$BP-minimum: 320px;\r\n\r\n$BP-small: 600px;\r\n$BP-medium: 800px;\r\n$BP-large: 1000px;\r\n\r\n$BP-page: 1200px;\r\n\r\n$breakpoints: (\r\n\tminimum: $BP-minimum,\r\n\tsmall: $BP-small,\r\n\tmedium: $BP-medium,\r\n\tlarge: $BP-large,\r\n\tpage: $BP-page,\r\n)\r\n\r\n:root {\r\n\t@each $name, $value in $breakpoints {\r\n\t\t--BP-#{$name}: $value;\r\n\t}\r\n}","/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","/*\r\n//apply color variations and overrides to specific modules more easily for stronger color application\r\n\r\n//usage:\r\n.module {\r\n\t@include brandColors((\r\n\t\tborder-left-color : 'text',\r\n\t\toutline-color: 'color'\r\n\t));\r\n}\r\n\r\n//equivalent to:\r\n\r\n.color-1 .module {\r\n\tborder-left-color : brand(1,'text');\r\n\toutline-color : brand(1);\r\n}\r\n.color-2 .module {\r\n\tborder-left-color : brand(2,'text');\r\n\toutline-color : brand(2);\r\n}\r\n\r\netc.\r\n\r\n*/\n@import url(\"https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i|Montserrat:400,700\");\n:root {\n --BP-minimum: 320px;\n --BP-small: 600px;\n --BP-medium: 800px;\n --BP-large: 1000px;\n --BP-page: 1200px;\n}\n\n/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers (opinionated).\n */\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\nfigcaption,\nfigure,\nmain {\n /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\na {\n background-color: transparent;\n /* 1 */\n -webkit-text-decoration-skip: objects;\n /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n */\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n display: inline-block;\n /* 1 */\n vertical-align: baseline;\n /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\ndetails,\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n */\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n/**\n * Add the correct display in IE 10-.\n */\n[hidden] {\n display: none;\n}\n\na:active, a:hover {\n outline-width: 1px;\n}\n\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\n/**\r\n * 1. Set default font family to sans-serif.\r\n * 2. Prevent iOS and IE text size adjust after device orientation change,\r\n * without disabling user zoom.\r\n */\nhtml {\n font-family: sans-serif;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/**\r\n * Remove default margin.\r\n */\nbody {\n margin: 0;\n}\n\n/* HTML5 display definitions\r\n ========================================================================== */\n/**\r\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\r\n * Correct `block` display not defined for `details` or `summary` in IE 10/11\r\n * and Firefox.\r\n * Correct `block` display not defined for `main` in IE 11.\r\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\r\n * 1. Correct `inline-block` display not defined in IE 8/9.\r\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\r\n */\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n /* 1 */\n vertical-align: baseline;\n /* 2 */\n}\n\n/**\r\n * Prevent modern browsers from displaying `audio` without controls.\r\n * Remove excess height in iOS 5 devices.\r\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\r\n * Address `[hidden]` styling not present in IE 8/9/10.\r\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\r\n */\n[hidden],\ntemplate {\n display: none;\n}\n\n/* Links\r\n ========================================================================== */\n/**\r\n * Remove the gray background color from active links in IE 10.\r\n */\na {\n background-color: transparent;\n}\n\n/* Text-level semantics\r\n ========================================================================== */\n/**\r\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\r\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\r\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n */\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\r\n * Address styling not present in Safari and Chrome.\r\n */\ndfn {\n font-style: italic;\n}\n\n/**\r\n * Address variable `h1` font-size and margin within `section` and `article`\r\n * contexts in Firefox 4+, Safari, and Chrome.\r\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\r\n * Address styling not present in IE 8/9.\r\n */\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\r\n * Address inconsistent and variable font size in all browsers.\r\n */\nsmall {\n font-size: 80%;\n}\n\n/**\r\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\r\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* Embedded content\r\n ========================================================================== */\n/**\r\n * Remove border when inside `a` element in IE 8/9/10.\r\n */\nimg {\n border: 0;\n}\n\n/**\r\n * Correct overflow not hidden in IE 9/10/11.\r\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Grouping content\r\n ========================================================================== */\n/**\r\n * Address margin not present in IE 8/9 and Safari.\r\n */\nfigure {\n margin: 1em 40px;\n}\n\n/**\r\n * Address differences between Firefox and other browsers.\r\n */\nhr {\n box-sizing: content-box;\n height: 0;\n}\n\n/**\r\n * Contain overflow in all browsers.\r\n */\npre {\n overflow: auto;\n}\n\n/**\r\n * Address odd `em`-unit font size rendering in all browsers.\r\n */\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\n/* Forms\r\n ========================================================================== */\n/**\r\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n * styling of `select`, unless a `border` property is set.\r\n */\n/**\r\n * 1. Correct color not being inherited.\r\n * Known issue: affects color of disabled elements.\r\n * 2. Correct font properties not being inherited.\r\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n /* 1 */\n font: inherit;\n /* 2 */\n margin: 0;\n /* 3 */\n}\n\n/**\r\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\r\n */\nbutton {\n overflow: visible;\n}\n\n/**\r\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n * All other form control elements do not inherit `text-transform` values.\r\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\r\n * Correct `select` style inheritance in Firefox.\r\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\r\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n * and `video` controls.\r\n * 2. Correct inability to style clickable `input` types in iOS.\r\n * 3. Improve usability and consistency of cursor style between image-type\r\n * `input` and others.\r\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n cursor: pointer;\n /* 3 */\n}\n\n/**\r\n * Re-set default cursor for disabled elements.\r\n */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\r\n * Remove inner padding and border in Firefox 4+.\r\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\r\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n * the UA stylesheet.\r\n */\ninput {\n line-height: normal;\n}\n\n/**\r\n * It's recommended that you don't attempt to style these elements.\r\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n *\r\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\r\n * 2. Remove excess padding in IE 8/9/10.\r\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\r\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\r\n * `font-size` values of the `input`, it causes the cursor style of the\r\n * decrement button to change from `default` to `text`.\r\n */\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\r\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\r\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\r\n */\ninput[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n box-sizing: content-box;\n /* 2 */\n}\n\n/**\r\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\r\n * Safari (but not Chrome) clips the cancel button when the search input has\r\n * padding (and `textfield` appearance).\r\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\r\n * Define consistent border, margin, and padding.\r\n */\nfieldset {\n border: 1px solid #c0c0c0;\n margin: 0 2px;\n padding: 0.35em 0.625em 0.75em;\n}\n\n/**\r\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\r\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\r\n */\nlegend {\n border: 0;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\r\n * Remove default vertical scrollbar in IE 8/9/10/11.\r\n */\ntextarea {\n overflow: auto;\n}\n\n/**\r\n * Don't inherit the `font-weight` (applied by a rule above).\r\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\r\n */\noptgroup {\n font-weight: bold;\n}\n\n/* Tables\r\n ========================================================================== */\n/**\r\n * Remove most spacing between table cells.\r\n */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n\n/*\r\n\r\nAtom One Dark by Daniel Gamage\r\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\r\n\r\nbase: #282c34\r\nmono-1: #abb2bf\r\nmono-2: #818896\r\nmono-3: #5c6370\r\nhue-1: #56b6c2\r\nhue-2: #61aeee\r\nhue-3: #c678dd\r\nhue-4: #98c379\r\nhue-5: #e06c75\r\nhue-5-2: #be5046\r\nhue-6: #d19a66\r\nhue-6-2: #e6c07b\r\n\r\n*/\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #abb2bf;\n background: #282c34;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #5c6370;\n font-style: italic;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-formula {\n color: #c678dd;\n}\n\n.hljs-section,\n.hljs-name,\n.hljs-selector-tag,\n.hljs-deletion,\n.hljs-subst {\n color: #e06c75;\n}\n\n.hljs-literal {\n color: #56b6c2;\n}\n\n.hljs-string,\n.hljs-regexp,\n.hljs-addition,\n.hljs-attribute,\n.hljs-meta-string {\n color: #98c379;\n}\n\n.hljs-built_in,\n.hljs-class .hljs-title {\n color: #e6c07b;\n}\n\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-type,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-number {\n color: #d19a66;\n}\n\n.hljs-symbol,\n.hljs-bullet,\n.hljs-link,\n.hljs-meta,\n.hljs-selector-id,\n.hljs-title {\n color: #61aeee;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n\n/*================================================* BASE ELEMENT STYLING\r\n//----------------------------------------------------\r\n// This file holds base styling for elements.\r\n// NO CLASSES ALLOWED!\r\n// these are essentially site resets\r\n\\*================================================*/\n*:before, *:after, * {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n box-sizing: inherit;\n}\n\nhtml, body {\n box-sizing: border-box;\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 62.5%;\n}\n\nspan,\nem,\nstrong,\na,\nb,\ni,\nlabel,\ninput,\ndiv,\ntextarea,\nselect,\nheader,\nfooter,\naside,\ntime,\nhtml,\nform,\nnav,\nnav li {\n margin-top: 0;\n}\n\nbody {\n background-color: #fff;\n position: relative;\n margin: 0;\n font-size: 16px;\n line-height: 1.5;\n color: #000;\n font-family: \"Cabin\", Arial, sans-serif;\n font-weight: 400;\n}\n\np, ul, ol {\n margin: 25px 0;\n}\n\np:first-child, ul:first-child, ol:first-child {\n margin-top: 0;\n}\n\np:last-child, ul:last-child, ol:last-child {\n margin-bottom: 0;\n}\n\n/*HEADINGS*/\nh1, h2, h3, h4, h5, h6 {\n font-family: \"Montserrat\", sans-serif;\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.5px;\n margin-bottom: 15px;\n margin-top: 25px;\n}\n\nh1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {\n margin-top: 0;\n}\n\nh1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {\n margin-bottom: 0;\n}\n\nh1 + p, h1 + ul, h1 + ol, h2 + p, h2 + ul, h2 + ol, h3 + p, h3 + ul, h3 + ol, h4 + p, h4 + ul, h4 + ol, h5 + p, h5 + ul, h5 + ol, h6 + p, h6 + ul, h6 + ol {\n margin-top: 0;\n}\n\n.-theme--dark h1, .-theme--dark h2, .-theme--dark h3, .-theme--dark h4, .-theme--dark h5, .-theme--dark h6 {\n color: #b9d48b;\n}\n\nh1 {\n font-size: 30px;\n text-align: center;\n}\n\nh1 + h2 {\n margin-top: 30px;\n}\n\nh2 {\n font-size: 25px;\n margin-top: 75px;\n}\n\nh3 {\n font-size: 20px;\n}\n\nh4 {\n font-size: 18px;\n text-transform: uppercase;\n}\n\na {\n text-decoration: none;\n color: #CF1730;\n transition: 0.3s;\n}\n\na:hover, a:focus {\n text-decoration: underline;\n}\n\na[disabled] {\n cursor: default;\n pointer-events: none;\n opacity: 0.2;\n}\n\n.no-csspointerevents a[disabled] {\n display: none;\n}\n\nlabel, input[type=radio], input[type=checkbox] {\n cursor: pointer;\n}\n\nimg {\n display: block;\n max-width: 100%;\n width: 100%;\n}\n\na > img {\n transition: 0.3s;\n}\n\na:hover > img, a:focus > img {\n transform: scale(1.05);\n}\n\nblockquote {\n background-color: transparent;\n border-left: 0;\n border-left: 6px solid #000;\n font-style: normal;\n margin: 0;\n margin-left: 30px;\n padding: 55px 25px 40px;\n}\n\nblockquote:before {\n display: none;\n}\n\nblockquote p {\n font-size: 22px;\n line-height: 1.25;\n}\n\npre {\n padding: 10px 70px 10px 0;\n margin-left: -20px;\n margin-right: -20px;\n font-family: 'Monaco', 'Lucida Console', monospace;\n font-size: 13px;\n line-height: 20px;\n box-shadow: inset 0 0 5px #000;\n word-wrap: break-word;\n color: #d6d6d6;\n background-color: #282c34;\n padding: 0;\n}\n\npre, pre.lines {\n margin: 0;\n padding-left: 0;\n padding-right: 0;\n}\n\npre.lines {\n font-size: 12px;\n padding: 10px;\n float: left;\n display: block !important;\n box-shadow: none;\n color: #d6d6d6;\n background-color: #000;\n width: 40px;\n padding-top: 7px;\n padding-bottom: 7px;\n text-align: center !important;\n}\n\npre code {\n padding: 10px 5px;\n font-size: 1em;\n}\n\n.no-flexbox pre {\n max-width: 780px;\n}\n\ncode {\n max-width: 100%;\n}\n\np code, li code, h1 code, h2 code, h3 code, h4 code, h5 code {\n background-color: #c5c7cc;\n padding: 3px 4px;\n font-size: .85em;\n}\n\n.-color-1 {\n background-color: #CF1730;\n}\n\n.-color-1, .-color-1 * {\n color: #fff;\n}\n\n.-color-1, .-color-1 svg {\n fill: #fff;\n}\n\n.-color-text-1, .-color-text-1 * {\n color: #CF1730;\n fill: #CF1730;\n}\n\n.-color-2 {\n background-color: #b9d48b;\n}\n\n.-color-2, .-color-2 * {\n color: #000;\n}\n\n.-color-2, .-color-2 svg {\n fill: #000;\n}\n\n.-color-text-2, .-color-text-2 * {\n color: #b9d48b;\n fill: #b9d48b;\n}\n\n.-color-3 {\n background-color: #7FD6CD;\n}\n\n.-color-3, .-color-3 * {\n color: #000;\n}\n\n.-color-3, .-color-3 svg {\n fill: #000;\n}\n\n.-color-text-3, .-color-text-3 * {\n color: #7FD6CD;\n fill: #7FD6CD;\n}\n\n.-color-4 {\n background-color: #0CCBEE;\n}\n\n.-color-4, .-color-4 * {\n color: #000;\n}\n\n.-color-4, .-color-4 svg {\n fill: #000;\n}\n\n.-color-text-4, .-color-text-4 * {\n color: #0CCBEE;\n fill: #0CCBEE;\n}\n\n.-color-5 {\n background-color: #08705e;\n}\n\n.-color-5, .-color-5 * {\n color: #fff;\n}\n\n.-color-5, .-color-5 svg {\n fill: #fff;\n}\n\n.-color-text-5, .-color-text-5 * {\n color: #08705e;\n fill: #08705e;\n}\n\nnav ul, .TK-noDots {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.no-js .TK-noJsHide {\n display: none;\n}\n\n.js .TK-jsHide {\n display: none !important;\n}\n\n.no-js .TK-jsHide {\n display: block;\n}\n\n.TK-skipLink {\n border: 0;\n clip: rect(0 0 0 0);\n width: 0;\n height: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n opacity: 0;\n}\n\n.TK-skipLink:active, .TK-skipLink:focus {\n clip: auto;\n width: auto;\n height: auto;\n position: static;\n opacity: 1;\n}\n\n.pageContainer {\n padding-left: 20px !important;\n padding-right: 20px !important;\n}\n\n.pageContainer.-wide {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.pageContainer__width {\n margin: 0 auto;\n max-width: 1200px;\n min-width: 280px;\n display: block;\n pointer-events: auto;\n width: 100%;\n}\n\n.pageContainer__width:after {\n display: block;\n content: '';\n clear: both;\n}\n\n.-wide .pageContainer__width {\n max-width: 1240px;\n}\n\n.-thin .pageContainer__width {\n max-width: 1160px;\n}\n\n.demo {\n padding: 5px;\n border: 2px solid #000;\n}\n\n.demo__segment {\n position: relative;\n margin-top: 35px;\n margin-bottom: 10px;\n}\n\n.demo__segment:last-child, .demo__segment.grid__cell {\n margin-bottom: 0;\n}\n\n.demo__segment:before {\n position: absolute;\n bottom: 100%;\n left: 0;\n padding: 5px 10px;\n background: #000;\n color: #fff;\n border-radius: 5px 5px 0 0;\n}\n\n.demo__summary {\n background-color: #CDDEC4;\n padding: 20px;\n margin-bottom: 10px;\n margin-top: 60px;\n}\n\n.demo__summary:before {\n content: 'Summary';\n}\n\n.demo__summary + .demo__result {\n margin-top: 45px;\n}\n\n.demo__result:before {\n content: 'Example';\n}\n\n.-false .demo__result:before {\n content: 'Not Gutter Grid';\n}\n\n.demo__result .grid {\n padding: 0;\n}\n\n.demo__result .grid__cell, .demo__result .mixin__cell {\n min-height: 100px;\n margin: 0;\n}\n\n.-noHeight .demo__result .grid__cell, .-noHeight .demo__result .mixin__cell {\n min-height: 0;\n}\n\n.demo__markup {\n background-color: #282c34;\n position: relative;\n padding-left: 40px;\n display: flex;\n}\n\n.demo__markup.html:before {\n content: 'HTML';\n}\n\n.demo__markup.scss:before {\n content: 'Sass';\n}\n\n.demo__markup.js:before {\n content: 'JavaScript';\n}\n\n.demo__markup.json:before {\n content: 'JSON';\n}\n\n.demo__markup pre {\n display: flex;\n flex-grow: 1;\n}\n\n.demo__markup pre, .demo__markup pre.lines {\n margin: 0;\n}\n\n.demo__markup pre.lines {\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n background: #000;\n padding-top: 12px;\n}\n\n.demo__markup code {\n margin-top: -20px;\n padding-bottom: 10px;\n padding-top: 10px;\n}\n\n.demo .example ul, .demo .example li {\n list-style: none;\n padding-left: 0 !important;\n}\n\n.tabs {\n padding-top: 1px;\n}\n\n.tabs__link {\n text-align: center;\n text-transform: capitalize;\n}\n\n.js .tabs__content {\n display: none;\n}\n\n.no-flexbox .tabs {\n width: 780px;\n}\n\n.bodyContent {\n padding-bottom: 100px;\n}\n\n.bodyContent, .bodyContent td {\n text-align: left;\n}\n\n.bodyContent strong, .bodyContent b, .bodyContent td strong, .bodyContent td b {\n font-weight: 700;\n}\n\n.bodyContent sup, .bodyContent sub, .bodyContent td sup, .bodyContent td sub {\n font-size: 0.6em;\n}\n\n.bodyContent a:not(.btn), .bodyContent td a:not(.btn) {\n font-weight: 400;\n text-decoration: underline;\n color: #CF1730;\n}\n\n.bodyContent a:not(.btn):hover, .bodyContent a:not(.btn):focus, .bodyContent td a:not(.btn):hover, .bodyContent td a:not(.btn):focus {\n text-decoration: none;\n}\n\n.bodyContent ul ul, .bodyContent ul ol, .bodyContent ol ul, .bodyContent ol ol, .bodyContent td ul ul, .bodyContent td ul ol, .bodyContent td ol ul, .bodyContent td ol ol {\n margin: 0;\n}\n\n.bodyContent ul li, .bodyContent ol li, .bodyContent td ul li, .bodyContent td ol li {\n margin-top: 10px;\n}\n\n.bodyContent > ul:not(.TK-noDots):not(:first-child), .bodyContent > ol:not(.TK-noDots):not(:first-child), .bodyContent td > ul:not(.TK-noDots):not(:first-child), .bodyContent td > ol:not(.TK-noDots):not(:first-child) {\n margin-top: 25px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li, .bodyContent > ol:not(.TK-noDots) > li, .bodyContent td > ul:not(.TK-noDots) > li, .bodyContent td > ol:not(.TK-noDots) > li {\n margin: 0;\n padding-bottom: 11px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:first-child, .bodyContent > ol:not(.TK-noDots) > li:first-child, .bodyContent td > ul:not(.TK-noDots) > li:first-child, .bodyContent td > ol:not(.TK-noDots) > li:first-child {\n border-top: none;\n padding-top: 0;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:last-child, .bodyContent > ol:not(.TK-noDots) > li:last-child, .bodyContent td > ul:not(.TK-noDots) > li:last-child, .bodyContent td > ol:not(.TK-noDots) > li:last-child {\n padding-bottom: 0;\n}\n\n.bodyContent ul:not(.TK-noDots), .bodyContent td ul:not(.TK-noDots) {\n padding: 0;\n}\n\n.bodyContent ul:not(.TK-noDots) li, .bodyContent td ul:not(.TK-noDots) li {\n list-style: none;\n padding-left: 25px;\n position: relative;\n}\n\n.bodyContent ul:not(.TK-noDots) li:before, .bodyContent td ul:not(.TK-noDots) li:before {\n content: '';\n display: block;\n position: absolute;\n top: 15px;\n left: 0;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:before, .bodyContent td > ul:not(.TK-noDots) > li:before {\n border-radius: 50%;\n height: 6px;\n width: 6px;\n background: #CF1730;\n top: 6px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li > ul > li:before, .bodyContent td > ul:not(.TK-noDots) > li > ul > li:before {\n height: 2px;\n width: 10px;\n background: #CF1730;\n top: 9px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li > ul > li > ul > li:before, .bodyContent td > ul:not(.TK-noDots) > li > ul > li > ul > li:before {\n border-radius: 50%;\n height: 6px;\n width: 6px;\n border: 1px solid #CF1730;\n top: 5px;\n}\n\n.bodyContent ol:not(.TK-noDots), .bodyContent td ol:not(.TK-noDots) {\n counter-reset: li;\n list-style: none;\n padding-left: 0;\n}\n\n.bodyContent ol:not(.TK-noDots) li, .bodyContent td ol:not(.TK-noDots) li {\n padding-left: 25px;\n position: relative;\n}\n\n.bodyContent ol:not(.TK-noDots) li:before, .bodyContent td ol:not(.TK-noDots) li:before {\n content: counter(li) \".\";\n counter-increment: li;\n position: absolute;\n left: 0;\n font-weight: 700;\n color: #CF1730;\n}\n\n.bodyContent ol:not(.TK-noDots) li ol li:before, .bodyContent td ol:not(.TK-noDots) li ol li:before {\n content: counter(li, lower-alpha) \".\";\n}\n\n.bodyContent ol:not(.TK-noDots) li ol li ol li:before, .bodyContent td ol:not(.TK-noDots) li ol li ol li:before {\n content: counter(li, lower-roman) \".\";\n left: auto;\n right: 100%;\n margin-right: -15px;\n}\n\n.bodyContent img, .bodyContent td img {\n display: inline-block;\n}\n\n.btn {\n font-family: \"Montserrat\", sans-serif;\n font-weight: 700;\n font-size: 14px;\n background-color: #5B1223;\n color: #fff;\n transition: 0.3s;\n padding: 15px 20px;\n display: inline-block;\n transition: all 0.25s ease-in-out;\n position: relative;\n text-align: left;\n line-height: 1;\n letter-spacing: 0.5px;\n border: 3px solid #CF1730;\n text-decoration: none !important;\n}\n\n.btn:hover {\n background-color: #000;\n color: #fff;\n}\n\n.btn:hover svg {\n fill: #CF1730;\n}\n\n.btn svg {\n fill: #CF1730;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n right: 20px;\n height: 10px;\n width: 10px;\n fill: transparent;\n fill: #fff;\n fill-width: 15px;\n transition: 0.3s;\n}\n\n.btn.-hasIcon {\n padding-right: 55px;\n}\n\n.btn.-active {\n background-color: #b9d48b;\n color: #000;\n}\n\n.btn.-active:hover {\n background-color: #94aa6f;\n}\n\n.btn.-inactive {\n background-color: lightgray;\n color: #000;\n}\n\n.btn.-inactive:hover {\n background-color: gray;\n}\n\n.header {\n margin-bottom: 30px;\n}\n\n.header h1 {\n margin: 50px 0 10px;\n}\n\n.header .version {\n text-align: center;\n font-style: italic;\n margin-bottom: 10px;\n}\n\n.tests {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-gap: 20px;\n}\n\n.test {\n padding: 30px;\n border: 2px solid #000;\n background: #6D0808;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.test h3 {\n margin-bottom: 0;\n}\n\n.test::before, .test::after {\n color: #fff;\n white-space: pre;\n}\n\n.test::before {\n font-size: 20px;\n}\n\n.test::after {\n content: ' = false';\n}\n\n.test.-max::before {\n content: \"mq(max, 800px)\";\n}\n\n@media (max-width: 800px) {\n .test.-max {\n background: #004700;\n }\n .test.-max::after {\n content: ' = true';\n }\n}\n\n.test.-maxWidth::before {\n content: \"mq(max-width, 800px)\";\n}\n\n@media (max-width: 800px) {\n .test.-maxWidth {\n background: #004700;\n }\n .test.-maxWidth::after {\n content: ' = true';\n }\n}\n\n.test.-maxVar::before {\n content: 'mq($MQ-maxVar)';\n}\n\n@media (max-width: 800px) {\n .test.-maxVar {\n background: #004700;\n }\n .test.-maxVar::after {\n content: ' = true';\n }\n}\n\n.test.-min::before {\n content: \"mq(min, 800px)\";\n}\n\n@media (min-width: 801px) {\n .test.-min {\n background: #004700;\n }\n .test.-min::after {\n content: ' = true';\n }\n}\n\n.test.-minWidth::before {\n content: \"mq(min-width, 800px)\";\n}\n\n@media (min-width: 801px) {\n .test.-minWidth {\n background: #004700;\n }\n .test.-minWidth::after {\n content: ' = true';\n }\n}\n\n.test.-minVar::before {\n content: 'mq($MQ-minVar)';\n}\n\n@media (min-width: 801px) {\n .test.-minVar {\n background: #004700;\n }\n .test.-minVar::after {\n content: ' = true';\n }\n}\n\n.test.-inside::before {\n content: \"mq(inside, 800px, 800px)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-inside {\n background: #004700;\n }\n .test.-inside::after {\n content: ' = true';\n }\n}\n\n.test.-insideWidth::before {\n content: \"mq(inside-width, 600px, 800px)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-insideWidth {\n background: #004700;\n }\n .test.-insideWidth::after {\n content: ' = true';\n }\n}\n\n.test.-insideVar::before {\n content: 'mq($MQ-insideVar)';\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-insideVar {\n background: #004700;\n }\n .test.-insideVar::after {\n content: ' = true';\n }\n}\n\n.test.-outside::before {\n content: \"mq(outside, 800px, 600px)\";\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outside {\n background: #004700;\n }\n .test.-outside::after {\n content: ' = true';\n }\n}\n\n.test.-outsideWidth::before {\n content: \"mq(outside-width, 600px, 800px)\";\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outsideWidth {\n background: #004700;\n }\n .test.-outsideWidth::after {\n content: ' = true';\n }\n}\n\n.test.-outsideVar::before {\n content: 'mq($MQ-outsideVar)';\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outsideVar {\n background: #004700;\n }\n .test.-outsideVar::after {\n content: ' = true';\n }\n}\n\n.test.-maxHeight::before {\n content: \"mq(max-height, 800px)\";\n}\n\n@media (max-height: 800px) {\n .test.-maxHeight {\n background: #004700;\n }\n .test.-maxHeight::after {\n content: ' = true';\n }\n}\n\n.test.-maxHeightVar::before {\n content: 'mq($MQ-maxHeightVar)';\n}\n\n@media (max-height: 800px) {\n .test.-maxHeightVar {\n background: #004700;\n }\n .test.-maxHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-minHeight::before {\n content: \"mq(min-height, 800px)\";\n}\n\n@media (min-height: 801px) {\n .test.-minHeight {\n background: #004700;\n }\n .test.-minHeight::after {\n content: ' = true';\n }\n}\n\n.test.-minHeightVar::before {\n content: 'mq($MQ-minHeightVar)';\n}\n\n@media (min-height: 801px) {\n .test.-minHeightVar {\n background: #004700;\n }\n .test.-minHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-insideHeight::before {\n content: \"mq(inside-height, 600px, 800px)\";\n}\n\n@media (max-height: 800px) and (min-height: 601px) {\n .test.-insideHeight {\n background: #004700;\n }\n .test.-insideHeight::after {\n content: ' = true';\n }\n}\n\n.test.-insideHeightVar::before {\n content: 'mq($MQ-insideHeightVar)';\n}\n\n@media (max-height: 800px) and (min-height: 601px) {\n .test.-insideHeightVar {\n background: #004700;\n }\n .test.-insideHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-outsideHeight::before {\n content: \"mq(outside-height, 600px, 800px)\";\n}\n\n@media (max-height: 600px), (min-height: 801px) {\n .test.-outsideHeight {\n background: #004700;\n }\n .test.-outsideHeight::after {\n content: ' = true';\n }\n}\n\n.test.-outsideHeightVar::before {\n content: 'mq($MQ-outsideHeightVar)';\n}\n\n@media (max-height: 600px), (min-height: 801px) {\n .test.-outsideHeightVar {\n background: #004700;\n }\n .test.-outsideHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-ratio::before {\n content: 'mq(ratio, \"2 / 1\")';\n}\n\n@media (aspect-ratio: 2 / 1) {\n .test.-ratio {\n background: #004700;\n }\n .test.-ratio::after {\n content: ' = true';\n }\n}\n\n.test.-ratioVar::before {\n content: 'mq($MQ-ratioVar)';\n}\n\n@media (aspect-ratio: 2 / 1) {\n .test.-ratioVar {\n background: #004700;\n }\n .test.-ratioVar::after {\n content: ' = true';\n }\n}\n\n.test.-minRatio::before {\n content: 'mq(min-ratio, \"2 / 1\")';\n}\n\n@media (min-aspect-ratio: 2 / 1) {\n .test.-minRatio {\n background: #004700;\n }\n .test.-minRatio::after {\n content: ' = true';\n }\n}\n\n.test.-minRatioVar::before {\n content: 'mq($MQ-minRatioVar)';\n}\n\n@media (min-aspect-ratio: 2 / 1) {\n .test.-minRatioVar {\n background: #004700;\n }\n .test.-minRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-maxRatio::before {\n content: 'mq(max-ratio, \"2 / 1\")';\n}\n\n@media (max-aspect-ratio: 2 / 1) {\n .test.-maxRatio {\n background: #004700;\n }\n .test.-maxRatio::after {\n content: ' = true';\n }\n}\n\n.test.-maxRatioVar::before {\n content: 'mq($MQ-minRatioVar)';\n}\n\n@media (max-aspect-ratio: 2 / 1) {\n .test.-maxRatioVar {\n background: #004700;\n }\n .test.-maxRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-insideRatio::before {\n content: 'mq(inside-ratio, \"2 / 1\", \"1 / 1\")';\n}\n\n@media (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-insideRatio {\n background: #004700;\n }\n .test.-insideRatio::after {\n content: ' = true';\n }\n}\n\n.test.-insideRatioVar::before {\n content: 'mq($MQ-insideRatioVar)';\n}\n\n@media (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-insideRatioVar {\n background: #004700;\n }\n .test.-insideRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-outsideRatio::before {\n content: 'mq(outside-ratio, \"1 / 1\", \"2 / 1\")';\n}\n\n@media (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-outsideRatio {\n background: #004700;\n }\n .test.-outsideRatio::after {\n content: ' = true';\n }\n}\n\n.test.-outsideRatioVar::before {\n content: 'mq($MQ-outsideRatioVar)';\n}\n\n@media (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-outsideRatioVar {\n background: #004700;\n }\n .test.-outsideRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround1::before {\n content: 'mq($MQ-exactRatioWorkAround1)';\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround1 {\n background: #004700;\n }\n .test.-exactRatioWorkAround1::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround2::before {\n content: 'mq($MQ-exactRatioWorkAround2)';\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround2 {\n background: #004700;\n }\n .test.-exactRatioWorkAround2::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround3::before {\n content: \"mq(max-ratio, '2 / 1', 'not')\";\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround3 {\n background: #004700;\n }\n .test.-exactRatioWorkAround3::after {\n content: ' = true';\n }\n}\n\n.test.-simpleMedia::before {\n content: \"mq(min, 800px, 'screen')\";\n}\n\n@media screen and (min-width: 801px) {\n .test.-simpleMedia {\n background: #004700;\n }\n .test.-simpleMedia::after {\n content: ' = true';\n }\n}\n\n.test.-notMedia::before {\n content: \"mq(min, 800px, 'not')\";\n}\n\n@media not screen and (min-width: 801px) {\n .test.-notMedia {\n background: #004700;\n }\n .test.-notMedia::after {\n content: ' = true';\n }\n}\n\n.test.-onlyMedia::before {\n content: \"mq('screen')\";\n}\n\n@media screen {\n .test.-onlyMedia {\n background: #004700;\n }\n .test.-onlyMedia::after {\n content: ' = true';\n }\n}\n\n.test.-simplePlus::before {\n content: \"mq($MQ-simplePlus)\";\n}\n\n@media (min-width: 801px) and (min-height: 601px) {\n .test.-simplePlus {\n background: #004700;\n }\n .test.-simplePlus::after {\n content: ' = true';\n }\n}\n\n.test.-inlinePlus::before {\n content: \"mq((min-width, 800px) plus (min-height, 600px))\";\n}\n\n@media (min-width: 801px) and (min-height: 601px) {\n .test.-inlinePlus {\n background: #004700;\n }\n .test.-inlinePlus::after {\n content: ' = true';\n }\n}\n\n.test.-mediaOnlyPlus::before {\n content: \"mq('screen' plus (min, 800px))\";\n}\n\n@media screen and (min-width: 801px) {\n .test.-mediaOnlyPlus {\n background: #004700;\n }\n .test.-mediaOnlyPlus::after {\n content: ' = true';\n }\n}\n\n.test.-complexPlus::before {\n content: \"mq($MQ-complexPlus)\";\n}\n\n@media print and (max-width: 800px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-complexPlus {\n background: #004700;\n }\n .test.-complexPlus::after {\n content: ' = true';\n }\n}\n\n.test.-ignoredMediaType::before {\n content: \"mq($MQ-ignoredMediaType)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-ignoredMediaType {\n background: #004700;\n }\n .test.-ignoredMediaType::after {\n content: ' = true';\n }\n}\n\n.test.-multiPlus::before {\n content: \"mq($MQ-multiPlus)\";\n}\n\n@media screen and (min-width: 801px) and (min-height: 401px) and (max-width: 1000px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-multiPlus {\n background: #004700;\n }\n .test.-multiPlus::after {\n content: ' = true';\n }\n}\n\n.test.-simpleOr::before {\n content: \"mq($MQ-simpleOr)\";\n}\n\n.test.-complexOr::before {\n content: \"mq($MQ-complexOr)\";\n}\n\n@media screen and (max-width: 800px) and (min-width: 601px), (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-complexOr {\n background: #004700;\n }\n .test.-complexOr::after {\n content: ' = true';\n }\n}\n\n.test.-multiOr::before {\n content: \"mq($MQ-multiOr)\";\n}\n\n@media screen and (min-width: 801px), (min-height: 801px), (max-width: 1000px) and (min-width: 601px), (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1), print {\n .test.-multiOr {\n background: #004700;\n }\n .test.-multiOr::after {\n content: ' = true';\n }\n}\n\n.test.-orPlusCombo::before {\n content: \"mq($MQ-orPlusCombo)\";\n}\n\n@media screen and (min-width: 801px) and (min-height: 801px), screen and (max-width: 1000px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-orPlusCombo {\n background: #004700;\n }\n .test.-orPlusCombo::after {\n content: ' = true';\n }\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n body {\n color: #000;\n }\n}\n\n.breakpoints {\n padding: 20px;\n border: 2px solid #000;\n}\n\n.breakpoints__size.-minimum::before {\n content: \"BP-minimum: \";\n}\n\n.breakpoints__size.-minimum::after {\n content: \"320px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-small::before {\n content: \"BP-small: \";\n}\n\n.breakpoints__size.-small::after {\n content: \"600px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-medium::before {\n content: \"BP-medium: \";\n}\n\n.breakpoints__size.-medium::after {\n content: \"800px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-large::before {\n content: \"BP-large: \";\n}\n\n.breakpoints__size.-large::after {\n content: \"1000px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-page::before {\n content: \"BP-page: \";\n}\n\n.breakpoints__size.-page::after {\n content: \"1200px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n","//NPM installed things are loaded from this file\r\n\r\n// Normalize Styles\r\n@import 'normalize.css/normalize';\r\n//restores outlines to links for improved accessibility\r\na:active, a:hover { outline-width: 1px; }\r\n\r\n//mq-scss\r\n@import '../../../_mq.scss';\r\n","//This file has been altered.\r\n// The following rule has been removed for the sake of keyboard accessibility\r\n// a:active,\r\n// a:hover {\r\n// outline: 0;\r\n// }\r\n\r\n\r\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/**\r\n * 1. Set default font family to sans-serif.\r\n * 2. Prevent iOS and IE text size adjust after device orientation change,\r\n * without disabling user zoom.\r\n */\r\n\r\nhtml {\r\n font-family: sans-serif; /* 1 */\r\n -ms-text-size-adjust: 100%; /* 2 */\r\n -webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove default margin.\r\n */\r\n\r\nbody {\r\n margin: 0;\r\n}\r\n\r\n/* HTML5 display definitions\r\n ========================================================================== */\r\n\r\n/**\r\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\r\n * Correct `block` display not defined for `details` or `summary` in IE 10/11\r\n * and Firefox.\r\n * Correct `block` display not defined for `main` in IE 11.\r\n */\r\n\r\narticle,\r\naside,\r\ndetails,\r\nfigcaption,\r\nfigure,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmain,\r\nmenu,\r\nnav,\r\nsection,\r\nsummary {\r\n display: block;\r\n}\r\n\r\n/**\r\n * 1. Correct `inline-block` display not defined in IE 8/9.\r\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\r\n */\r\n\r\naudio,\r\ncanvas,\r\nprogress,\r\nvideo {\r\n display: inline-block; /* 1 */\r\n vertical-align: baseline; /* 2 */\r\n}\r\n\r\n/**\r\n * Prevent modern browsers from displaying `audio` without controls.\r\n * Remove excess height in iOS 5 devices.\r\n */\r\n\r\naudio:not([controls]) {\r\n display: none;\r\n height: 0;\r\n}\r\n\r\n/**\r\n * Address `[hidden]` styling not present in IE 8/9/10.\r\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\r\n */\r\n\r\n[hidden],\r\ntemplate {\r\n display: none;\r\n}\r\n\r\n/* Links\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background color from active links in IE 10.\r\n */\r\n\r\na {\r\n background-color: transparent;\r\n}\r\n\r\n// *\r\n// * Improve readability of focused elements when they are also in an\r\n// * active/hover state.\r\n \r\n\r\n//Removing due to causing keyboard accessibility issue\r\n\r\n// a:active,\r\n// a:hover {\r\n// outline: 0;\r\n// }\r\n\r\n\r\n/* Text-level semantics\r\n ========================================================================== */\r\n\r\n/**\r\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\r\n */\r\n\r\nabbr[title] {\r\n border-bottom: 1px dotted;\r\n}\r\n\r\n/**\r\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nb,\r\nstrong {\r\n font-weight: bold;\r\n}\r\n\r\n/**\r\n * Address styling not present in Safari and Chrome.\r\n */\r\n\r\ndfn {\r\n font-style: italic;\r\n}\r\n\r\n/**\r\n * Address variable `h1` font-size and margin within `section` and `article`\r\n * contexts in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nh1 {\r\n font-size: 2em;\r\n margin: 0.67em 0;\r\n}\r\n\r\n/**\r\n * Address styling not present in IE 8/9.\r\n */\r\n\r\nmark {\r\n background: #ff0;\r\n color: #000;\r\n}\r\n\r\n/**\r\n * Address inconsistent and variable font size in all browsers.\r\n */\r\n\r\nsmall {\r\n font-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n font-size: 75%;\r\n line-height: 0;\r\n position: relative;\r\n vertical-align: baseline;\r\n}\r\n\r\nsup {\r\n top: -0.5em;\r\n}\r\n\r\nsub {\r\n bottom: -0.25em;\r\n}\r\n\r\n/* Embedded content\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove border when inside `a` element in IE 8/9/10.\r\n */\r\n\r\nimg {\r\n border: 0;\r\n}\r\n\r\n/**\r\n * Correct overflow not hidden in IE 9/10/11.\r\n */\r\n\r\nsvg:not(:root) {\r\n overflow: hidden;\r\n}\r\n\r\n/* Grouping content\r\n ========================================================================== */\r\n\r\n/**\r\n * Address margin not present in IE 8/9 and Safari.\r\n */\r\n\r\nfigure {\r\n margin: 1em 40px;\r\n}\r\n\r\n/**\r\n * Address differences between Firefox and other browsers.\r\n */\r\n\r\nhr {\r\n box-sizing: content-box;\r\n height: 0;\r\n}\r\n\r\n/**\r\n * Contain overflow in all browsers.\r\n */\r\n\r\npre {\r\n overflow: auto;\r\n}\r\n\r\n/**\r\n * Address odd `em`-unit font size rendering in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\npre,\r\nsamp {\r\n font-family: monospace, monospace;\r\n font-size: 1em;\r\n}\r\n\r\n/* Forms\r\n ========================================================================== */\r\n\r\n/**\r\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n * styling of `select`, unless a `border` property is set.\r\n */\r\n\r\n/**\r\n * 1. Correct color not being inherited.\r\n * Known issue: affects color of disabled elements.\r\n * 2. Correct font properties not being inherited.\r\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n color: inherit; /* 1 */\r\n font: inherit; /* 2 */\r\n margin: 0; /* 3 */\r\n}\r\n\r\n/**\r\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\r\n */\r\n\r\nbutton {\r\n overflow: visible;\r\n}\r\n\r\n/**\r\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n * All other form control elements do not inherit `text-transform` values.\r\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\r\n * Correct `select` style inheritance in Firefox.\r\n */\r\n\r\nbutton,\r\nselect {\r\n text-transform: none;\r\n}\r\n\r\n/**\r\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n * and `video` controls.\r\n * 2. Correct inability to style clickable `input` types in iOS.\r\n * 3. Improve usability and consistency of cursor style between image-type\r\n * `input` and others.\r\n */\r\n\r\nbutton,\r\nhtml input[type=\"button\"], /* 1 */\r\ninput[type=\"reset\"],\r\ninput[type=\"submit\"] {\r\n -webkit-appearance: button; /* 2 */\r\n cursor: pointer; /* 3 */\r\n}\r\n\r\n/**\r\n * Re-set default cursor for disabled elements.\r\n */\r\n\r\nbutton[disabled],\r\nhtml input[disabled] {\r\n cursor: default;\r\n}\r\n\r\n/**\r\n * Remove inner padding and border in Firefox 4+.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\ninput::-moz-focus-inner {\r\n border: 0;\r\n padding: 0;\r\n}\r\n\r\n/**\r\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n * the UA stylesheet.\r\n */\r\n\r\ninput {\r\n line-height: normal;\r\n}\r\n\r\n/**\r\n * It's recommended that you don't attempt to style these elements.\r\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n *\r\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\r\n * 2. Remove excess padding in IE 8/9/10.\r\n */\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"] {\r\n box-sizing: border-box; /* 1 */\r\n padding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\r\n * `font-size` values of the `input`, it causes the cursor style of the\r\n * decrement button to change from `default` to `text`.\r\n */\r\n\r\ninput[type=\"number\"]::-webkit-inner-spin-button,\r\ninput[type=\"number\"]::-webkit-outer-spin-button {\r\n height: auto;\r\n}\r\n\r\n/**\r\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\r\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\r\n */\r\n\r\ninput[type=\"search\"] {\r\n -webkit-appearance: textfield; /* 1 */\r\n box-sizing: content-box; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\r\n * Safari (but not Chrome) clips the cancel button when the search input has\r\n * padding (and `textfield` appearance).\r\n */\r\n\r\ninput[type=\"search\"]::-webkit-search-cancel-button,\r\ninput[type=\"search\"]::-webkit-search-decoration {\r\n -webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * Define consistent border, margin, and padding.\r\n */\r\n\r\nfieldset {\r\n border: 1px solid #c0c0c0;\r\n margin: 0 2px;\r\n padding: 0.35em 0.625em 0.75em;\r\n}\r\n\r\n/**\r\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\r\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\r\n */\r\n\r\nlegend {\r\n border: 0; /* 1 */\r\n padding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove default vertical scrollbar in IE 8/9/10/11.\r\n */\r\n\r\ntextarea {\r\n overflow: auto;\r\n}\r\n\r\n/**\r\n * Don't inherit the `font-weight` (applied by a rule above).\r\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\r\n */\r\n\r\noptgroup {\r\n font-weight: bold;\r\n}\r\n\r\n/* Tables\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove most spacing between table cells.\r\n */\r\n\r\ntable {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n}\r\n\r\ntd,\r\nth {\r\n padding: 0;\r\n}\r\n","/*\r\n\r\nAtom One Dark by Daniel Gamage\r\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\r\n\r\nbase: #282c34\r\nmono-1: #abb2bf\r\nmono-2: #818896\r\nmono-3: #5c6370\r\nhue-1: #56b6c2\r\nhue-2: #61aeee\r\nhue-3: #c678dd\r\nhue-4: #98c379\r\nhue-5: #e06c75\r\nhue-5-2: #be5046\r\nhue-6: #d19a66\r\nhue-6-2: #e6c07b\r\n\r\n*/\r\n\r\n.hljs {\r\n display: block;\r\n overflow-x: auto;\r\n padding: 0.5em;\r\n color: #abb2bf;\r\n background: #282c34;\r\n}\r\n\r\n.hljs-comment,\r\n.hljs-quote {\r\n color: #5c6370;\r\n font-style: italic;\r\n}\r\n\r\n.hljs-doctag,\r\n.hljs-keyword,\r\n.hljs-formula {\r\n color: #c678dd;\r\n}\r\n\r\n.hljs-section,\r\n.hljs-name,\r\n.hljs-selector-tag,\r\n.hljs-deletion,\r\n.hljs-subst {\r\n color: #e06c75;\r\n}\r\n\r\n.hljs-literal {\r\n color: #56b6c2;\r\n}\r\n\r\n.hljs-string,\r\n.hljs-regexp,\r\n.hljs-addition,\r\n.hljs-attribute,\r\n.hljs-meta-string {\r\n color: #98c379;\r\n}\r\n\r\n.hljs-built_in,\r\n.hljs-class .hljs-title {\r\n color: #e6c07b;\r\n}\r\n\r\n.hljs-attr,\r\n.hljs-variable,\r\n.hljs-template-variable,\r\n.hljs-type,\r\n.hljs-selector-class,\r\n.hljs-selector-attr,\r\n.hljs-selector-pseudo,\r\n.hljs-number {\r\n color: #d19a66;\r\n}\r\n\r\n.hljs-symbol,\r\n.hljs-bullet,\r\n.hljs-link,\r\n.hljs-meta,\r\n.hljs-selector-id,\r\n.hljs-title {\r\n color: #61aeee;\r\n}\r\n\r\n.hljs-emphasis {\r\n font-style: italic;\r\n}\r\n\r\n.hljs-strong {\r\n font-weight: bold;\r\n}\r\n\r\n.hljs-link {\r\n text-decoration: underline;\r\n}\r\n","\r\n/*================================================*\\\r\n BASE ELEMENT STYLING\r\n//----------------------------------------------------\r\n// This file holds base styling for elements.\r\n// NO CLASSES ALLOWED!\r\n// these are essentially site resets\r\n\\*================================================*/\r\n\r\n* {\r\n &:before, &:after, & {\r\n //Makes fonts smoother\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n font-smoothing: antialiased;\r\n\r\n //supposedly this makes fonts cleaner but it makes fonts not appear in safari\r\n //text-rendering: optimizeLegibility;\r\n\r\n //all elements are given their parents box-sizing\r\n box-sizing: inherit;\r\n }\r\n}\r\n\r\nhtml, body {\r\n //unless set otherwise, all elements will recieve border box box sizing\r\n box-sizing: border-box;\r\n\r\n //required for best scroll animation results\r\n height: 100%;\r\n\r\n //removes default spacing around the edges of the web page\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nhtml {\r\n //Makes it easier to alter font size with rem's. 1.3rem = 13px\r\n font-size: 62.5%;\r\n}\r\n\r\n//counteracts * margin styling\r\nspan,\r\nem,\r\nstrong,\r\na,\r\nb,\r\ni,\r\nlabel,\r\ninput,\r\ndiv,\r\ntextarea,\r\nselect,\r\nheader,\r\nfooter,\r\naside,\r\ntime,\r\nhtml,\r\nform,\r\nnav,\r\nnav li { margin-top: 0; }\r\n\r\n//Sets default font size for the site to 1.4rem with a 14px backup.\r\n//Setting the font-size using the mixin is the best way to set font size.\r\nbody {\r\n background-color: $CF-body__bg;\r\n position: relative;\r\n margin: 0;\r\n font-size: 16px;\r\n line-height: 1.5;\r\n color: $CF-body__text;\r\n font-family: $font-1;\r\n font-weight: $normal;\r\n}\r\n\r\np, ul, ol {\r\n //margin top becomes the default paragraph spacer\r\n margin: $VG-p__spacing 0;\r\n\r\n //allows body elements to sit hard up against their parent element top and bottom sides\r\n &:first-child { margin-top: 0; }\r\n &:last-child { margin-bottom: 0; }\r\n}\r\n\r\n/*HEADINGS*/\r\nh1, h2, h3, h4, h5, h6 {\r\n font-family: $font-2;\r\n font-weight: $bold;\r\n line-height: 1;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 15px;\r\n margin-top: $VG-p__spacing;\r\n\r\n &:first-child { margin-top: 0; }\r\n &:last-child { margin-bottom: 0; }\r\n + {\r\n p, ul, ol { margin-top: 0; }\r\n }\r\n .-theme--dark & {\r\n color: brand(2);\r\n }\r\n\r\n}\r\nh1 {\r\n font-size: 30px;\r\n text-align: center;\r\n + h2 { margin-top: 30px; }\r\n}\r\nh2 { font-size: 25px; margin-top: 75px; }\r\nh3 { font-size: 20px; }\r\nh4 { font-size: 18px; text-transform: uppercase; }\r\n\r\n\r\na {\r\n text-decoration: none;\r\n color: $CF-links;\r\n transition: 0.3s;\r\n\r\n &:hover, &:focus {\r\n text-decoration: underline;\r\n }\r\n\r\n &[disabled] {\r\n cursor: default;\r\n pointer-events: none;\r\n opacity: 0.2;\r\n\r\n .no-csspointerevents & {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n//makes nav default to not having dot points\r\nnav ul { @extend %TK-noDots; }\r\n\r\nlabel, input[type=radio], input[type=checkbox] { cursor: pointer; }\r\n\r\nimg { display: block; max-width: 100%; width: 100%; }\r\n\r\na > img {\r\n transition: 0.3s;\r\n}\r\na:hover, a:focus {\r\n > img { transform: scale(1.05); }\r\n}\r\n\r\nblockquote {\r\n background-color: transparent;\r\n border-left: 0;\r\n border-left: 6px solid #000;\r\n font-style: normal;\r\n margin: 0;\r\n margin-left: 30px;\r\n padding: 55px 25px 40px;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n\r\n p {\r\n font-size: 22px;\r\n line-height: 1.25;\r\n }\r\n}\r\n\r\npre {\r\n padding: 10px 70px 10px 0;\r\n margin-left: -20px;\r\n margin-right: -20px;\r\n font-family: 'Monaco', 'Lucida Console', monospace;\r\n font-size: 13px;\r\n line-height: 20px;\r\n box-shadow: inset 0 0 5px #000;\r\n word-wrap: break-word;\r\n color: #d6d6d6;\r\n background-color: #282c34;\r\n padding: 0;\r\n\r\n &, &.lines {\r\n margin: 0;\r\n padding:{left: 0; right: 0;}\r\n }\r\n\r\n &.lines {\r\n font-size: 12px;\r\n padding: 10px;\r\n float: left;\r\n display: block !important;\r\n box-shadow: none;\r\n color: #d6d6d6;\r\n background-color: #000;\r\n width: 40px;\r\n padding: {top: 7px; bottom: 7px;}\r\n text-align: center !important;\r\n }\r\n\r\n code {\r\n padding: 10px 5px;\r\n font-size: 1em;\r\n }\r\n\r\n .no-flexbox & {\r\n max-width: 780px;\r\n }\r\n}\r\n\r\ncode {\r\n max-width: 100%;\r\n}\r\n\r\np, li, h1, h2, h3, h4, h5 {\r\n code {\r\n background-color: #c5c7cc;\r\n padding: 3px 4px;\r\n font-size: .85em;\r\n }\r\n}\r\n","/////////////////////////////////\r\n// functional color variables //\r\n///////////////////////////////\r\n\r\n//CF- for color-functional-\r\n\r\n$CF-body__text: $CB-grey-x-dark;\r\n$CF-body__bg: #fff;\r\n\r\n$CF-border-1: $CB-grey-light;\r\n$CF-border-2: $CF-body__bg;\r\n$CF-border-3: #d2d2d2;\r\n\r\n$CF-links: brand(1);\r\n$CF-links--hover: brand(2);\r\n\r\n$CF-heading: $CF-body__text;\r\n\r\n$CF-error__text: $CB-red-dim;\r\n$CF-error__bg: $CB-grey-pale;\r\n$CF-error__border: $CF-error__text;\r\n\t$CF-error__text--hover: $CB-red-dim--hover;\r\n\t$CF-error__bg--hover: $CB-grey-pale--hover;\r\n\t$CF-error__border--hover: $CF-error__text--hover;\r\n\r\n$CF-input: $CB-grey-dark;\r\n$CF-input__placeholder: #767676;//#767676 is the lightest possible grey against a white bg that passes AA for small text\r\n$CF-input__border: $CF-border-1;\r\n$CF-input--focus: $CB-grey-pale;\r\n","///*================================================*\\\r\n//\tCOLORS\r\n//----------------------------------------------------\r\n//\tAll color variables are listed here\r\n//*================================================*/\r\n\r\n//CB- for \"Color-Base-\"\r\n\r\n///////////////////////////\r\n// Name color variables //\r\n/////////////////////////\r\n\r\n//changes the intensity of color change on hover\r\n$hoverModifier: 60%;\r\n$hoverModifier--large: 80%;\r\n$hoverModifier--small: 20%;\r\n\r\n//green\r\n$CB-green-light: #b9d48b;\r\n$CB-green-bright: #00C000;\r\n$CB-green-dark: #08705e;//quaternary\r\n\t//green hover states\r\n\t$CB-green-light--hover: shade($CB-green-light, 20%);\r\n\t$CB-green-dark--hover: shade($CB-green-dark, $hoverModifier);\r\n\r\n//aqua\r\n$CB-aqua-light: #7FD6CD;//tertiary\r\n//$CB-aqua-mid: #2590C0;\r\n//$CB-aqua-dim: #1E4E91;\r\n//$CB-aqua-dimmer: #15354A;\r\n//$CB-aqua-dark: #0E283B;\r\n\t//aqua hover states\r\n\t$CB-aqua-light--hover: tint($CB-aqua-light, $hoverModifier);\r\n\t//$CB-aqua-mid--hover: tint($CB-aqua-mid, $hoverModifier);\r\n\t//$CB-aqua-dim--hover: tint($CB-aqua-dim, $hoverModifier);\r\n\t//$CB-aqua-dark--hover: shade($CB-aqua-dark, $hoverModifier);\r\n\r\n//blue\r\n$CB-blue-light: #0CCBEE;\r\n\t$CB-blue-light--hover: tint($CB-blue-light, $hoverModifier);\r\n\r\n//red\r\n//$CB-red-pale: #FFD1D1;\r\n//$CB-red-light: #D76860;\r\n$CB-red-mid: #CF1730; //primary\r\n$CB-red-dim: #B11235;\r\n$CB-red-dark: #5B1223;\r\n\t//red hover states\r\n//\t$CB-red-pale--hover: tint($CB-red-pale, $hoverModifier);\r\n//\t$CB-red-light--hover: tint($CB-red-light, $hoverModifier);\r\n\t$CB-red-mid--hover: $CB-red-dark;\r\n\t$CB-red-dim--hover: shade($CB-red-dim, $hoverModifier);\r\n\t$CB-red-dark--hover: shade($CB-red-dark, $hoverModifier);\r\n\r\n//grey\r\n//$CB-grey-paler: #FAFAFA;\r\n$CB-grey-pale: #F0F0F0;\r\n$CB-grey-light: #cbcbce;\r\n$CB-grey-mid: #898989;\r\n$CB-grey-dim: #555555;\r\n$CB-grey-dark: #231f20;\r\n$CB-grey-x-dark: #000;//secondary\r\n\t//grey hover states\r\n\t$CB-grey-pale--hover: shade($CB-grey-pale, $hoverModifier);\r\n\t$CB-grey-light--hover: shade($CB-grey-light, $hoverModifier);\r\n\t$CB-grey-mid--hover: $CB-grey-x-dark;\r\n\t$CB-grey-dim--hover: tint($CB-grey-dim, $hoverModifier);\r\n\t$CB-grey-dark--hover: tint($CB-grey-dark, $hoverModifier);\r\n\t$CB-grey-x-dark--hover: tint($CB-grey-x-dark, $hoverModifier);\r\n","// Font weights (based on Google Fonts)\r\n//$thin: 100;\r\n//$light: 300;\r\n$normal: 400;\r\n//$medium: 500;\r\n//$semi-bold: 600;\r\n$bold:\t700;\r\n//$extra-bold: 800;\r\n//$ultra: 900;\r\n","/////////////////////////////\r\n// global value variables //\r\n///////////////////////////\r\n//V- for value-\r\n\r\n$VG-p__spacing : 25px;\r\n\r\n$VG-common__shadow: 0 2px 5px rgba(#0f134a,0.2);\r\n$VG-common__radius: 5px;\r\n\r\n$VG-border-1: 1px solid $CF-border-1;\r\n$VG-border-2: 1px solid $CF-border-2;\r\n$VG-border-dashed: 1px dashed $CB-grey-light;\r\n\r\n//when the design meets the edge of the screen,\r\n//this will determine how much space there is between the text and the edge of the screen\r\n$VG-screen__padding: 20px;\r\n\r\n//The height of the mobile toolbar\r\n$VG-toolbar__height: 55px;\r\n","//easily apply customizable background colors based on brand colors\r\n.-color {\r\n\t@for $i from 1 through length($brand) {\r\n\t\t&-#{$i} {\r\n\t\t\tbackground-color: brand($i);\r\n\r\n\t\t\t&, * { color: brand($i, 'text'); }\r\n\t\t\t&, svg { fill: brand($i, 'text'); }\r\n\t\t}\r\n\r\n\t\t&-text-#{$i} {\r\n\t\t\t&, * {\r\n\t\t\t\tcolor: brand($i);\r\n\t\t\t\tfill: brand($i);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","//changes the intensity of color change on hover\r\n$V-hoverModifier: 60%;\r\n\r\n//lists the primary brand colors of the site.\r\n//Greys do not belong in this list unless it is a MAJOR brand color\r\n$brand: (\r\n\t//*Main color*/\r\n\tcolor: $CB-red-mid,\r\n\r\n\t//*Most likely hover state color for the main color*/\r\n\thover: $CB-red-mid--hover,\r\n\r\n\t/*if set as a background color, the text inside will most likely be this color*/\r\n\ttext: #fff,\r\n),\r\n\r\n//*Second most prominent brand color etc. */\r\n(\r\n\tcolor: $CB-green-light,\r\n\thover: $CB-green-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-aqua-light,\r\n\thover: $CB-aqua-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-blue-light,\r\n\thover: $CB-blue-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-green-dark,\r\n\thover: $CB-green-dark--hover,\r\n\ttext: #fff,\r\n);\r\n\r\n\r\n//Get prominent colors easily\r\n// usage standard: brand(1);\r\n// usage for hover state: brand(1, 'hover')\r\n// usage for partner: brand(1, 'partner')\r\n@function brand($prominance, $type: color){\r\n\t$colorGroup: nth($brand,$prominance);\r\n\t@if (not map-has-key($colorGroup, $type)){\r\n\t\t@warn '\"#{$type}\" is not a valid color type for \"brand(#{$prominance})\"';\r\n\t\t$type: color;\r\n\t}\r\n\t@return map-get($colorGroup, $type);\r\n}\r\n\r\n\r\n\r\n/*\r\n//apply color variations and overrides to specific modules more easily for stronger color application\r\n\r\n//usage:\r\n.module {\r\n\t@include brandColors((\r\n\t\tborder-left-color : 'text',\r\n\t\toutline-color: 'color'\r\n\t));\r\n}\r\n\r\n//equivalent to:\r\n\r\n.color-1 .module {\r\n\tborder-left-color : brand(1,'text');\r\n\toutline-color : brand(1);\r\n}\r\n.color-2 .module {\r\n\tborder-left-color : brand(2,'text');\r\n\toutline-color : brand(2);\r\n}\r\n\r\netc.\r\n\r\n*/\r\n\r\n@mixin brandColors($rules){\r\n\t@for $i from 1 through length($brand) {\r\n\t\t.color-#{$i} & {\r\n\t\t\t@each $attribute, $colorType in $rules {\r\n\t\t\t\t#{$attribute} : brand($i, $colorType);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n","\r\n%TK-noDots { list-style: none; margin: 0; padding: 0; }\r\n\r\n//these are the same styles as drupal\r\n%TK-visHid {position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal;}\r\n\r\n.TK {\r\n\t//remove dot points from a list\r\n\t&-noDots { @extend %TK-noDots; }\r\n\r\n\t//HIDE the element if JS is DISABLED,\r\n\t//SHOW the element if JS is ENABLED\r\n\t&-noJsHide {\r\n\t\t.no-js & { display: none; }\r\n\t}\r\n\r\n\t&-jsHide {\r\n\t\t.js & { display: none!important; }\r\n\t\t.no-js & { display: block; }\r\n\t}\r\n\r\n\t//A link that only appears when the user focuses on it\r\n\t&-skipLink {\r\n\t\tborder:0;\r\n\t\tclip:rect(0 0 0 0);\r\n\t\twidth:0;\r\n\t\theight:0;\r\n\t\tpadding:0;\r\n\t\toverflow:hidden;\r\n\t\tposition:absolute;\r\n\t\topacity: 0;\r\n\r\n\t\t&:active, &:focus {\r\n\t\t\tclip: auto;\r\n\t\t\twidth:auto;\r\n\t\t\theight:auto;\r\n\t\t\tposition: static;\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t}\r\n\r\n}","// pagelayout styles\r\n.pageContainer {\r\n\t//to be used as a parent to pageWidth;\r\n\r\n\tpadding: {\r\n\t\tleft: $VG-screen__padding !important;\r\n\t\tright: $VG-screen__padding !important;\r\n\t}\r\n\r\n\t&.-wide {\r\n\t\tpadding: {\r\n\t\t\tleft: 0 !important;\r\n\t\t\tright: 0 !important;\r\n\t\t};\r\n\t}\r\n\r\n\t//Styles the element to take up the max-width of the design\r\n\t&__width {\r\n\t\t@include clearfix;\r\n\r\n\t\tmargin:0 auto;\r\n\t\tmax-width: $BP-page;\r\n\t\tmin-width: $BP-minimum - ($VG-screen__padding * 2);\r\n\t\tdisplay: block;\r\n\t\tpointer-events: auto;\r\n\t\twidth: 100%;\r\n\r\n\t\t.-wide & {\r\n\t\t\tmax-width: $BP-page + ($VG-screen__padding * 2);\r\n\t\t}\r\n\r\n\t\t.-thin & {\r\n\t\t\tmax-width: $BP-page - ($VG-screen__padding * 2);\r\n\t\t}\r\n\t}\r\n}\r\n","@mixin clearfix(){\r\n\t&:after {\r\n\t\tdisplay: block;\r\n\t\tcontent: '';\r\n\t\tclear: both;\r\n\t}\r\n}",".demo {\r\n\tpadding: 5px;\r\n\tborder: 2px solid #000;\r\n\r\n\t&__segment {\r\n\t\tposition: relative;\r\n\t\tmargin-top: 35px;\r\n\t\tmargin-bottom: 10px;\r\n\t\t&:last-child, &.grid__cell {\r\n\t\t\tmargin-bottom: 0;\r\n\t\t}\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: 100%;\r\n\t\t\tleft: 0;\r\n\t\t\tpadding: 5px 10px;\r\n\t\t\tbackground: #000;\r\n\t\t\tcolor: #fff;\r\n\t\t\tborder-radius: 5px 5px 0 0;\r\n\t\t}\r\n\t}\r\n\t&__summary {\r\n\t\tbackground-color: #CDDEC4;\r\n\t\tpadding: 20px;\r\n\t\tmargin-bottom: 10px;\r\n\t\tmargin-top: 60px;\r\n\t\t&:before {\r\n\t\t\tcontent: 'Summary';\r\n\t\t}\r\n\r\n\t\t+ .demo__result {\r\n\t\t\tmargin-top: 45px;\r\n\t\t}\r\n\t}\r\n\t&__result {\r\n\t\t&:before {\r\n\t\t\tcontent: 'Example';\r\n\r\n\t\t\t.-false & {\r\n\t\t\t\tcontent: 'Not Gutter Grid'\r\n\t\t\t}\r\n\t\t}\r\n\t\t.grid {\r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\r\n\t\t.grid__cell, .mixin__cell {\r\n\t\t\tmin-height: 100px;\r\n\t\t\tmargin: 0;\r\n\r\n\t\t\t.-noHeight & {\r\n\t\t\t\tmin-height: 0;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&__markup {\r\n\t\tbackground-color: #282c34;\r\n\t\tposition: relative;\r\n\t\tpadding-left: 40px;\r\n\t\tdisplay: flex;\r\n &.html:before {\r\n content: 'HTML';\r\n }\r\n\t\t&.scss:before {\r\n\t\t\tcontent: 'Sass';\r\n\t\t}\r\n &.js:before {\r\n content: 'JavaScript';\r\n }\r\n &.json:before {\r\n content: 'JSON';\r\n }\r\n\r\n pre {\r\n display: flex;\r\n flex-grow: 1;\r\n &, &.lines {\r\n margin: 0;\r\n }\r\n\r\n &.lines {\r\n overflow: hidden;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n background: #000;\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n code {\r\n margin-top: -20px;\r\n padding: {bottom: 10px; top: 10px; }\r\n }\r\n\t}\r\n\r\n\t.example {\r\n\t\tul, li {\r\n\t\t\tlist-style: none;\r\n\t\t\tpadding-left: 0 !important;\r\n\t\t}\r\n\t}\r\n}\r\n","\r\n.tabs {\r\n\tpadding-top: 1px;\r\n\t&__link {\r\n\t\ttext-align: center;\r\n\t\ttext-transform: capitalize;\r\n\t}\r\n\r\n\t&__content {\r\n\t\t.js & {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.no-flexbox & {\r\n\t\twidth: 780px;\r\n\t}\r\n}\r\n","\r\n//this module wraps around text spat out by a CMS editor.\r\n//Elements inside this module can't have classes attatched\r\n\r\n$C-numbers: brand(1);//$CB-blue-dim;\r\n$C-dots: $C-numbers;\r\n\r\n.bodyContent {\r\n padding-bottom: 100px;\r\n\r\n\t&, & td {\r\n\r\n\t\ttext-align: left;\r\n\r\n\t\tstrong, b { font-weight: $bold; }\r\n\r\n\t\tsup, sub {\r\n\t\t\tfont-size: 0.6em;\r\n\t\t}\r\n\r\n\t\ta:not(.btn) {\r\n\t\t\tfont-weight: $normal;\r\n\t\t\ttext-decoration: underline;\r\n\t\t\tcolor: $CF-links;\r\n\t\t\t&:hover, &:focus {\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t//custom dot points do not appear in IE8 or print\r\n\t\t// @media screen and (min-width: 0px) {\r\n\t\t\tul, ol {\r\n\t\t\t\tul, ol {\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t}\r\n\t\t\t\tli {\r\n\t\t\t\t\tmargin-top: 10px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> ul, > ol {\r\n\t\t\t\t&:not(.TK-noDots) {\r\n\t\t\t\t\t&:not(:first-child){\r\n\t\t\t\t\t\tmargin-top: $VG-p__spacing;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t> li {\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\tpadding-bottom: 11px;\r\n\t\t\t\t\t\t&:first-child {\r\n\t\t\t\t\t\t\tborder-top: none;\r\n\t\t\t\t\t\t\tpadding-top: 0;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t\tpadding-bottom: 0;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tul:not(.TK-noDots) {\r\n\t\t\t\tpadding: 0;\r\n\t\t\t\tli {\r\n\t\t\t\t\tlist-style: none;\r\n\t\t\t\t\tpadding-left: 25px;\r\n\t\t\t\t\t//padding: 5px 5px 5px 25px;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tcontent: '';\r\n\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\ttop: 15px;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> ul:not(.TK-noDots) {\r\n\t\t\t\t> li {\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\t\theight: 6px;\r\n\t\t\t\t\t\twidth: 6px;\r\n\t\t\t\t\t\tbackground: $C-dots;\r\n\t\t\t\t\t\ttop: 6px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t> ul > li {\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\theight: 2px;\r\n\t\t\t\t\t\t\twidth: 10px;\r\n\t\t\t\t\t\t\tbackground: $C-dots;\r\n\t\t\t\t\t\t\ttop: 9px;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t> ul > li {\r\n\t\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\t\t\t\theight: 6px;\r\n\t\t\t\t\t\t\t\twidth: 6px;\r\n\t\t\t\t\t\t\t\tborder: 1px solid $C-dots;\r\n\t\t\t\t\t\t\t\ttop: 5px;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tol:not(.TK-noDots) {\r\n\t\t\t\tcounter-reset: li;\r\n\t\t\t\tlist-style: none;\r\n\t\t\t\tpadding-left: 0;\r\n\t\t\t\tli {\r\n\t\t\t\t\tpadding-left: 25px;\r\n\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tcontent:counter(li)'.'; //* Use the counter as content */\r\n\t\t\t\t\t\tcounter-increment:li; //* Increment the counter by 1 */\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t\tfont-weight: $bold;\r\n\t\t\t\t\t\tcolor: $C-numbers;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tol li {\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\tcontent:counter(li,lower-alpha)'.';\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tol li {\r\n\t\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t\tcontent:counter(li,lower-roman)'.';\r\n\t\t\t\t\t\t\t\tleft: auto;\r\n\t\t\t\t\t\t\t\tright: 100%;\r\n\t\t\t\t\t\t\t\tmargin-right: -15px;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t// }\r\n\r\n\t\t> blockquote {\r\n\r\n\t\t}\r\n\r\n\t\timg { display: inline-block; }\r\n\r\n\t}\r\n}\r\n","\r\n.btn {\r\n font-family: $font-2;\r\n font-weight: $bold;\r\n font-size: 14px;\r\n background-color: $CB-red-dark;\r\n color: #fff;\r\n transition: 0.3s;\r\n padding: 15px 20px;\r\n display: inline-block;\r\n transition: all 0.25s ease-in-out;\r\n position: relative;\r\n text-align: left;\r\n line-height: 1;\r\n letter-spacing: 0.5px;\r\n border: 3px solid brand(1);\r\n text-decoration: none !important;\r\n\r\n &:hover {\r\n background-color: #000;\r\n color: #fff;\r\n\r\n svg {\r\n fill: brand(1);\r\n }\r\n }\r\n\r\n\tsvg {\r\n\t\tfill: brand(1);\r\n\t\t@include centered(v);\r\n\t\tright: 20px;\r\n\t\theight: 10px;\r\n\t\twidth: 10px;\r\n\t\tfill: transparent;\r\n\t\tfill: brand(1, 'text');\r\n\t\tfill-width: 15px;\r\n\t\ttransition: 0.3s;\r\n\t}\r\n\r\n\t&.-hasIcon {\r\n\t\tpadding-right: 55px;\r\n\t}\r\n\r\n &.-active {\r\n background-color: brand(2);\r\n color: brand(2, text);\r\n &:hover {\r\n background-color: brand(2, hover);\r\n }\r\n }\r\n\r\n &.-inactive {\r\n background-color: lightgray;\r\n color: brand(2, text);\r\n &:hover {\r\n background-color: gray;\r\n }\r\n }\r\n\r\n}\r\n","//CENTER AN ELEMENT BOTH VERTICALLY AND HORIZONTALLY (or only one of the two)\r\n//Element must have a set width and height to work\r\n\r\n//usage:\r\n//@include MG-centered; //center both horizontally and vertically\r\n//@include MG-centered(v); // only center vertically\r\n//@include MG-centered(h); // only center horizontally\r\n\r\n@mixin centered($type: both, $isModern: 'not-modern') {\r\n\r\n\tposition: absolute;\r\n\r\n\t@if ($isModern == 'modern') {\r\n\t\t@if ($type == both) {\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateY(-50%) translateX(-50%);\r\n\t\t} @else if ($type == v) {\r\n\t\t\ttop: 50%;\r\n\t\t\ttransform: translateY(-50%);\r\n\t\t} @else if ($type == h) {\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateX(-50%);\r\n\t\t}\r\n\t} @else {\r\n\t\t@if ($type == both) {\r\n\t\t\ttop: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tmargin: auto;\r\n\t\t} @else if ($type == v) {\r\n\t\t\ttop: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tmargin: auto 0;\r\n\t\t} @else if ($type == h) {\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tmargin: 0 auto;\r\n\t\t}\r\n\t}\r\n}\r\n","// Add percentage of white to a color\r\n//https://gist.github.com/benfrain/7545629\r\n@function tint($color, $percent){\r\n\t@return mix(white, $color, $percent);\r\n}\r\n\r\n// Add percentage of black to a color\r\n//https://gist.github.com/benfrain/7545629\r\n@function shade($color, $percent){\r\n\t@return mix(black, $color, $percent);\r\n}\r\n\r\n//Generate a grey color based on a percentage of black\r\n@function grey($percentage){\r\n\t@return mix(#000, #fff, $percentage);\r\n}",".header {\r\n margin-bottom: 30px;\r\n h1 {\r\n margin: 50px 0 10px;\r\n }\r\n\r\n .version {\r\n text-align: center;\r\n font-style: italic;\r\n margin-bottom: 10px;\r\n }\r\n}\r\n","$red: #6D0808;\r\n$green: #004700;\r\n\r\n.tests {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: minmax(0,1fr);\r\n\tgrid-gap: 20px;\r\n}\r\n\r\n@mixin isActive {\r\n\tbackground: $green;\r\n\t&::after { content: ' = true'; }\r\n}\r\n\r\n.test {\r\n\tpadding: 30px;\r\n\tborder: 2px solid #000;\r\n\tbackground: $red;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tmargin-bottom: 20px;\r\n\r\n\th3 {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t&::before, &::after {\r\n\t\tcolor: #fff;\r\n\t\twhite-space: pre;\r\n\t}\r\n\r\n\t&::before {\r\n\t\tfont-size: 20px;\r\n\t\t//Use \"\\A\" to create new lines\r\n\t}\r\n\r\n\t&::after {\r\n\t\tcontent: ' = false';\r\n\t}\r\n\r\n\t// =====\r\n\t// WIDTH\r\n\t// =====\r\n\r\n\t&.-max {\r\n\t\t&::before { content: 'mq(max, #{$BP-medium})'; }\r\n\t\t@include mq(max, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\t&.-maxWidth {\r\n\t\t&::before { content: 'mq(max-width, #{$BP-medium})'; }\r\n\t\t@include mq(max-width, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxVar {\r\n\t\t$MQ-maxVar: (max, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-maxVar)'; }\r\n\t\t@include mq($MQ-maxVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-min {\r\n\t\t&::before { content: 'mq(min, #{$BP-medium})'; }\r\n\t\t@include mq(min, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minWidth {\r\n\t\t&::before { content: 'mq(min-width, #{$BP-medium})'; }\r\n\t\t@include mq(min-width, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minVar {\r\n\t\t$MQ-minVar: (min, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-minVar)'; }\r\n\t\t@include mq($MQ-minVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-inside {\r\n\t\t&::before { content: 'mq(inside, #{$BP-medium}, #{$BP-medium})'; }\r\n\t\t@include mq(inside, $BP-medium, $BP-small) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideWidth {\r\n\t\t&::before { content: 'mq(inside-width, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(inside-width, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideVar {\r\n\t\t$MQ-insideVar: (inside, $BP-medium, $BP-small);\r\n\t\t&::before { content: 'mq($MQ-insideVar)'; }\r\n\t\t@include mq($MQ-insideVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outside {\r\n\t\t&::before { content: 'mq(outside, #{$BP-medium}, #{$BP-small})'; }\r\n\t\t@include mq(outside, $BP-medium, $BP-small) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideWidth {\r\n\t\t&::before { content: 'mq(outside-width, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(outside-width, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideVar {\r\n\t\t$MQ-outsideVar: (outside, $BP-medium, $BP-small);\r\n\t\t&::before { content: 'mq($MQ-outsideVar)'; }\r\n\t\t@include mq($MQ-outsideVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// HEIGHT\r\n\t// ======\r\n\r\n\t&.-maxHeight {\r\n\t\t&::before { content: 'mq(max-height, #{$BP-medium})'; }\r\n\t\t@include mq(max-height, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxHeightVar {\r\n\t\t$MQ-maxHeightVar: (max-height, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-maxHeightVar)'; }\r\n\t\t@include mq($MQ-maxHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minHeight {\r\n\t\t&::before { content: 'mq(min-height, #{$BP-medium})'; }\r\n\t\t@include mq(min-height, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minHeightVar {\r\n\t\t$MQ-minHeightVar: (min-height, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-minHeightVar)'; }\r\n\t\t@include mq($MQ-minHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideHeight {\r\n\t\t&::before { content: 'mq(inside-height, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(inside-height, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideHeightVar {\r\n\t\t$MQ-insideHeightVar: (inside-height, $BP-small, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-insideHeightVar)'; }\r\n\t\t@include mq($MQ-insideHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideHeight {\r\n\t\t&::before { content: 'mq(outside-height, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(outside-height, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideHeightVar {\r\n\t\t$MQ-outsideHeightVar: (outside-height, $BP-small, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-outsideHeightVar)'; }\r\n\t\t@include mq($MQ-outsideHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// RATIO\r\n\t// ======\r\n\r\n\t&.-ratio {\r\n\t\t&::before { content: 'mq(ratio, \"2 / 1\")'; }\r\n\t\t@include mq(ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-ratioVar {\r\n\t\t$MQ-ratioVar: (ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-ratioVar)'; }\r\n\t\t@include mq($MQ-ratioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minRatio {\r\n\t\t&::before { content: 'mq(min-ratio, \"2 / 1\")'; }\r\n\t\t@include mq(min-ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minRatioVar {\r\n\t\t$MQ-minRatioVar: (min-ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-minRatioVar)'; }\r\n\t\t@include mq($MQ-minRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxRatio {\r\n\t\t&::before { content: 'mq(max-ratio, \"2 / 1\")'; }\r\n\t\t@include mq(max-ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxRatioVar {\r\n\t\t$MQ-maxRatioVar: (max-ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-minRatioVar)'; }\r\n\t\t@include mq($MQ-maxRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideRatio {\r\n\t\t&::before { content: 'mq(inside-ratio, \"2 / 1\", \"1 / 1\")'; }\r\n\t\t@include mq(inside-ratio, \"2 / 1\", \"1 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideRatioVar {\r\n\t\t$MQ-insideRatioVar: (inside-ratio, \"2 / 1\", \"1 / 1\");\r\n\t\t&::before { content: 'mq($MQ-insideRatioVar)'; }\r\n\t\t@include mq($MQ-insideRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideRatio {\r\n\t\t&::before { content: 'mq(outside-ratio, \"1 / 1\", \"2 / 1\")'; }\r\n\t\t@include mq(outside-ratio, \"1 / 1\", \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideRatioVar {\r\n\t\t$MQ-outsideRatioVar: (outside-ratio, \"2 / 1\", \"1 / 1\");\r\n\t\t&::before { content: 'mq($MQ-outsideRatioVar)'; }\r\n\t\t@include mq($MQ-outsideRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround1 {\r\n\t\t//equivalent to (min-ratio, '2 / 1') but without the 1px sour spot\r\n\t\t$MQ-exactRatioWorkAround1: (max-ratio, '2 / 1', 'not');\r\n\t\t&::before { content: 'mq($MQ-exactRatioWorkAround1)'; }\r\n\t\t@include mq($MQ-exactRatioWorkAround1) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround2 {\r\n\t\t//Exactly the same as above but formatted differently\r\n\t\t$MQ-exactRatioWorkAround2: 'not' plus (max-ratio, '2 / 1');\r\n\t\t&::before { content: 'mq($MQ-exactRatioWorkAround2)'; }\r\n\t\t@include mq($MQ-exactRatioWorkAround2) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround3 {\r\n\t\t//The same again this time inline\r\n\t\t&::before { content: \"mq(max-ratio, '2 / 1', 'not')\"; }\r\n\t\t@include mq(max-ratio, '2 / 1', 'not') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// MEDIA\r\n\t// ======\r\n\r\n\t&.-simpleMedia {\r\n\t\t&::before { content: \"mq(min, #{$BP-medium}, 'screen')\"; }\r\n\t\t@include mq(min, $BP-medium, 'screen') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-notMedia {\r\n\t\t&::before { content: \"mq(min, #{$BP-medium}, 'not')\"; }\r\n\t\t@include mq(min, $BP-medium, 'not') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-onlyMedia {\r\n\t\t&::before { content: \"mq('screen')\"; }\r\n\t\t@include mq('screen') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\r\n\t//- =====\r\n\t//- PLUS\r\n\t//- =====\r\n\r\n\t&.-simplePlus {\r\n\t\t$MQ-simplePlus: (min-width, $BP-medium) plus (min-height, 600px);\r\n\t\t&::before { content: \"mq($MQ-simplePlus)\"; }\r\n\t\t@include mq($MQ-simplePlus) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-inlinePlus {\r\n\t\t$MQ-simplePlus: (min-width, $BP-medium) plus (min-height, 600px);\r\n\t\t&::before { content: \"mq((min-width, #{$BP-medium}) plus (min-height, 600px))\"; }\r\n\t\t@include mq((min-width, $BP-medium) plus (min-height, 600px)) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-mediaOnlyPlus {\r\n\t\t&::before { content: \"mq('screen' plus (min, #{$BP-medium}))\"; }\r\n\t\t@include mq('screen' plus (min, $BP-medium)) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-complexPlus {\r\n\t\t$MQ-complexPlus: (inside-width, $BP-small, $BP-medium, 'print') plus (inside-ratio, '2/1', '1/1');\r\n\t\t&::before { content: \"mq($MQ-complexPlus)\"; }\r\n\t\t@include mq($MQ-complexPlus) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-ignoredMediaType {\r\n\t\t$MQ-ignoredMediaType: (inside-width, $BP-small, $BP-medium) plus (inside-ratio, '2/1', '1/1', 'print');\r\n\t\t&::before { content: \"mq($MQ-ignoredMediaType)\"; }\r\n\t\t@include mq($MQ-ignoredMediaType) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-multiPlus {\r\n\t\t$MQ-multiPlus: (\r\n\t\t\t('screen') plus\r\n\t\t\t(min-width, $BP-medium) plus\r\n\t\t\t(min-height, 400px) plus\r\n\t\t\t(inside, $BP-small, $BP-large) plus\r\n\t\t\t(inside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t&::before { content: \"mq($MQ-multiPlus)\"; }\r\n\r\n\t\t@include mq($MQ-multiPlus) {\r\n\t\t\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t//- =====\r\n\t//- OR\r\n\t//- =====\r\n\r\n\t&.-simpleOr {\r\n\t\t$MQ-simpleOr: (\r\n\t\t\t(min-width, $BP-medium),\r\n\t\t\t(min-height, 800px)\r\n\t\t);\r\n\t\t&::before { content: \"mq($MQ-simpleOr)\"; }\r\n\t\t@include mq($MQ-simpleOr) {\r\n\t\t}\r\n\t}\r\n\r\n\t&.-complexOr {\r\n\t\t&::before { content: \"mq($MQ-complexOr)\"; }\r\n\t\t$MQ-complexOr: (\r\n\t\t\t(inside, $BP-small, $BP-medium, 'screen'),\r\n\t\t\t(outside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t@include mq($MQ-complexOr) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-multiOr {\r\n\t\t&::before { content: \"mq($MQ-multiOr)\"; }\r\n\t\t$MQ-multiOr: (\r\n\t\t\t(min-width, $BP-medium, 'screen'),\r\n\t\t\t(min-height, 800px),\r\n\t\t\t(inside, $BP-small, $BP-large),\r\n\t\t\t(inside-ratio, '2/1', '1/1'),\r\n\t\t\t('print')\r\n\t\t);\r\n\t\t@include mq($MQ-multiOr) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-orPlusCombo {\r\n\t\t&::before { content: \"mq($MQ-orPlusCombo)\"; }\r\n\t\t$MQ-orPlusCombo: (\r\n\t\t\t(min-width, $BP-medium, 'screen') plus (min-height, 800px),\r\n\t\t\t'screen' plus (inside, $BP-small, $BP-large) plus (inside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t@include mq($MQ-orPlusCombo) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n}\r\n\r\n@include mq('not' plus (max-ratio, '2 / 1')) {\r\n\tbody { color: #000; }\r\n}\r\n\r\n\r\n.breakpoints {\r\n\tpadding: 20px;\r\n\tborder: 2px solid #000;\r\n\r\n\t&__size {\r\n\t\t@each $name, $value in $breakpoints {\r\n\t\t\t&.-#{$name} {\r\n\t\t\t\t&::before {\r\n\t\t\t\t\tcontent: 'BP-#{$name}: ';\r\n\t\t\t\t}\r\n\t\t\t\t&::after {\r\n\t\t\t\t\tcontent: '#{$value}';\r\n\t\t\t\t\tfont-weight: bold;\r\n\t\t\t\t\tfont-size: 1.2em;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","$mediaQuery: ();\r\n\r\n$mq-ems: false !default;\r\n$mq-em-base: 16px !default;\r\n$mq-debug: false !default;\r\n\r\n@import '_functions';\r\n\r\n@function mediaType($mediaType: false, $hasAnd: true){\r\n\t$media: '';\r\n\t$mediaType: if($mediaType == 'not', 'not screen', $mediaType);\r\n\t@if ($mediaType){\r\n\t\t$media: if($hasAnd, $mediaType + ' and ', $mediaType);\r\n\t}\r\n\t@return $media;\r\n}\r\n\r\n@function isRatio($string){\r\n\t@if (type-of($string) == 'string' and $string != 'plus'){\r\n\t\t@if (str-index($string, \"/\")){\r\n\t\t\t@return true;\r\n\t\t}\r\n\t}\r\n\t@return false;\r\n}\r\n\r\n@function isMedia($string){\r\n\t@return type-of($string) == 'string' and $string != 'plus' and not isRatio($string);\r\n}\r\n\r\n@function calculateMQ($range, $breakpoint_1: null, $breakpoint_2: null, $mediaType: false, $debug: $mq-debug){\r\n\r\n\t$swap-values: false;\r\n\r\n\t$mediaTypeString: '' + $mediaType + '';\r\n\r\n\t$invalidMediaType:\r\n\t\t($mediaType != false) and (\r\n\t\t\t(type-of($mediaType) == 'number') or\r\n\t\t\t(str-index($mediaTypeString, '/') != null)\r\n\t\t);\r\n\r\n\t@if ($invalidMediaType == true){\r\n\t\t@error '\"'+$mediaType+'\" is not a valid media type';\r\n\t}\r\n\r\n\t@if ($range == null) {\r\n\t\t@return $mediaType;\r\n\t}\r\n\r\n\t@if ($breakpoint_2 != null){\r\n\r\n\t\t@if (isRatio($breakpoint_1)){\r\n\r\n\t\t\t$A1: get-start($breakpoint_1);\r\n\t\t\t$A2: get-end($breakpoint_1);\r\n\r\n\t\t\t$B1: get-start($breakpoint_2);\r\n\t\t\t$B2: get-end($breakpoint_2);\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug range_numbers \"('A1/A2', 'B1/B2')\" (A1: $A1, A2: $A2, B1: $B1, B2: $B2);\r\n\t\t\t}\r\n\r\n\t\t\t$swap-values: $A1 / $A2 < $B1 / $B2;\r\n\t\t} @else {\r\n\t\t\t$swap-values: $breakpoint_1 < $breakpoint_2;\r\n\t\t}\r\n\r\n\t\t//Swaps the breakpoint_s around\r\n\t\t@if ($swap-values){\r\n\t\t\t$temp: $breakpoint_1;\r\n\t\t\t$breakpoint_1: $breakpoint_2;\r\n\t\t\t$breakpoint_2: $temp;\r\n\t\t}\r\n\r\n\t} @else {\r\n\t\t$breakpoint_2: 0;\r\n\t}\r\n\r\n\t$mediaString: '';\r\n\r\n\t@if ($range == 'orientation'){\r\n\t\t@if ($breakpoint_1 != 'landscape' and $breakpoint_1 != 'portrait'){\r\n\t\t\t@error '\"orientation\" range only accepts the values \"landscape\" and \"portrait\". Currently providing the value \"#{$breakpoint_1}\".';\r\n\t\t}\r\n\t}\r\n\r\n\t@if ($debug){\r\n\t\t@debug calculateMQ (range: $range, breakpoint_1: $breakpoint_1, breakpoint_2: $breakpoint_2, mediaType: $mediaType);\r\n\t}\r\n\r\n\t@if (str-index($range, 'inside') != null or str-index($range, 'outside') != null){\r\n\t\t@if ($breakpoint_2 == 0) {\r\n\t\t\t@error '\"#{$range}\" range requires a second value. Currently only providing \"#{$breakpoint_1}\" as a value.';\r\n\t\t}\r\n\t} @else {\r\n\t\t@if ($breakpoint_2 != 0) {\r\n\t\t\t@error '\"#{$range}\" range can only take one value. Currently providing both \"#{$breakpoint_1}\" and \"#{$breakpoint_2}\" as values.';\r\n\t\t}\r\n\t}\r\n\r\n\t@if (str-index($range, 'ratio') == null){\r\n\t\t//if a standard media query\r\n\t\t@if (type-of($breakpoint_1) != number and $range != 'orientation'){\r\n\t\t\t@if ($breakpoint_2 != 0) {\r\n\t\t\t\t@error '\"#{$range}\" range requires the breakpoint_s (\"#{$breakpoint_1}\" and \"#{$breakpoint_2}\") to be pixel values';\r\n\t\t\t} @else {\r\n\t\t\t\t@error '\"#{$range}\" range requires the breakpoint_ \"#{$breakpoint_1}\" to be a pixel value';\r\n\t\t\t}\r\n\t\t}\r\n\t} @else {\r\n\t\t//else if it's a ratio...\r\n\t\t@if ((($breakpoint_2 != 0) and (type-of($breakpoint_2) != string))){\r\n\t\t\t@error '\"#{$range}\" range requires the breakpoint_s (\"#{$breakpoint_1}\" and \"#{$breakpoint_2}\") to both be strings in this format \"4 / 3\" (width ratio / height ratio).';\r\n\t\t} @else if (type-of($breakpoint_1) != string) {\r\n\t\t\t@error '\"#{$range}\" range requires the breakpoint_ \"#{$breakpoint_1}\" to be a string in this format \"4 / 3\" (width ratio / height ratio).';\r\n\t\t}\r\n\t}\r\n\r\n\t$breakpoint_1_plus: $breakpoint_1 + 1;\r\n\t$breakpoint_2_plus: $breakpoint_2 + 1;\r\n\r\n\t$media: if($mediaType, $mediaType, '');\r\n\r\n\t@if ($mq-ems) {\r\n\t\t$breakpoint_1: _mq-em($breakpoint_1);\r\n\t\t$breakpoint_2: _mq-em($breakpoint_2);\r\n\t\t$breakpoint_1_plus: _mq-em($breakpoint_1_plus);\r\n\t\t$breakpoint_2_plus: _mq-em($breakpoint_2_plus);\r\n\t}\r\n\r\n\t$min-width: '(min-width: #{$breakpoint_1_plus})';\r\n\t$max-width: '(max-width: #{$breakpoint_1})';\r\n\r\n\t$inside-width: '(max-width: #{$breakpoint_1}) and (min-width: #{$breakpoint_2_plus})';\r\n\t$outside-width: '(max-width: #{$breakpoint_2}), '+$media+'(min-width: #{$breakpoint_1_plus})';\r\n\r\n\t$mediaString: map-get((\r\n\t//*1 value given*/\r\n\t\tmin : $min-width,\r\n\t\tmax : $max-width,\r\n\t\r\n\t\tmin-width : $min-width,\r\n\t\tmax-width : $max-width,\r\n\r\n\t\tmin-height : '(min-height: #{$breakpoint_1_plus})',\r\n\t\tmax-height : '(max-height: #{$breakpoint_1})',\r\n\r\n\t\tratio : '(aspect-ratio: #{$breakpoint_1})',\r\n\t\tmin-ratio : '(min-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmax-ratio : '(max-aspect-ratio: #{$breakpoint_1})',\r\n\r\n\t\tdevice-ratio : '(device-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmin-device-ratio : '(min-device-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmax-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_1})',\r\n\r\n\t\torientation : '(orientation: #{$breakpoint_1})',\r\n\r\n\t//*2 values given*/\r\n\t\tinside : $inside-width,\r\n\t\toutside : $outside-width,\r\n\r\n\t\tinside-width : $inside-width,\r\n\t\toutside-width : $outside-width,\r\n\r\n\t\tinside-height : '(max-height: #{$breakpoint_1}) and (min-height: #{$breakpoint_2_plus})',\r\n\t\toutside-height : '(max-height: #{$breakpoint_2}), '+$media+'(min-height: #{$breakpoint_1_plus})',\r\n\t\t\r\n\t\tinside-ratio : '(max-aspect-ratio: #{$breakpoint_1}) and (min-aspect-ratio: #{$breakpoint_2})',\r\n\t\toutside-ratio : '(max-aspect-ratio: #{$breakpoint_2}), '+$media+'(min-aspect-ratio: #{$breakpoint_1})',\r\n\t\t\r\n\t\tinside-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_1}) and (min-device-aspect-ratio: #{$breakpoint_2})',\r\n\t\toutside-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_2}), '+$media+'(min-device-aspect-ratio: #{$breakpoint_1})',\r\n\t), $range);\r\n\r\n\t@return $mediaString;\r\n}\r\n\r\n@function isBasicQuery($range) {\r\n\t$first_is_string: type-of(nth($range,1)) == string;\r\n\t$longer_than_1: length($range) > 1;\r\n\t$not_plus_statment: true;\r\n\t@if ($longer_than_1) {\r\n\t\t$not_plus_statment: nth($range,2) != 'plus';\r\n\t}\r\n\t@return $first_is_string and $longer_than_1 and $not_plus_statment;\r\n}\r\n\r\n@function get_values($mqSet, $debug: $mq-debug){\r\n\r\n\t@if ($mq-debug) {\r\n\t\t@debug mqSet (length: length($mqSet), mqSet: $mqSet);\r\n\t}\r\n\r\n\t$range: nth($mqSet,1);\r\n\t$breakpoint_1: null;\r\n\t$breakpoint_2: null;\r\n\t$media: false;\r\n\r\n\t@if (length($mqSet) == 1){\r\n\t\t$first: nth($mqSet, 1);\r\n\t\t@if (type-of($first) != 'string'){\r\n\t\t\t@error '\"#{$first}\" is not a valid media type';\r\n\t\t}\r\n\t\t$range: null;\r\n\t\t$media: $first;\r\n\t}\r\n\r\n\t@if (length($mqSet) > 1){\r\n\t\t$breakpoint_1: nth($mqSet, 2);\r\n\t}\r\n\r\n\t@if (length($mqSet) == 3){\r\n\t\t$third: nth($mqSet, 3);\r\n\r\n\t\t@if (type-of($third) == 'number' or isRatio($third)){\r\n\t\t\t$breakpoint_2: $third;\r\n\t\t} @else {\r\n\t\t\t$media: $third;\r\n\t\t}\r\n\t}\r\n\r\n\t@if (length($mqSet) == 4){\r\n\t\t$third: nth($mqSet, 3);\r\n\t\t$fourth: nth($mqSet, 4);\r\n\r\n\t\t@if ($fourth == false and isMedia($third)){\r\n\t\t\t$media: $third;\r\n\t\t} @else {\r\n\t\t\t$breakpoint_2: $third;\r\n\t\t\t$media: $fourth;\r\n\t\t}\r\n\r\n\t\t@if ($media == \" and \") {\r\n\t\t\t$media: '';\r\n\t\t}\r\n\t}\r\n\r\n\t$finalValues: (\r\n\t\trange: $range,\r\n\t\tbreakpoint_1: $breakpoint_1,\r\n\t\tbreakpoint_2: $breakpoint_2,\r\n\t\tmedia: mediaType($media, $range != null),\r\n\t);\r\n\r\n\t@if ($debug) {\r\n\t\t@debug get_values_result $finalValues;\r\n\t}\r\n\r\n\t@return $finalValues;\r\n}\r\n\r\n@function get_media($mqSet){\r\n\t@return map-get( get_values($mqSet), media);\r\n}\r\n\r\n@function calculateBasicQuery($mqSet, $isAndStatement: false, $debug: $mq-debug){\r\n\t$values: get_values($mqSet, $debug);\r\n\r\n\t$range: map-get($values, range);\r\n\t$breakpoint_1: map-get($values, breakpoint_1);\r\n\t$breakpoint_2: map-get($values, breakpoint_2);\r\n\t$media: map-get($values, media);\r\n\r\n\t@if ($range == null) {\r\n\t\t//if only a media type is given return nothing because it is added elsewhere\r\n\t\t@return '';\r\n\t}\r\n\r\n\t@if ((str-index($range, 'outside') != null) and $isAndStatement){\r\n\t\t$error: 'All \"outside\" range types are incompatible with \"plus\" statements: (' + $mqSet + ')';\r\n\t\t@error $error;\r\n\t}\r\n\r\n\t@return calculateMQ($range, $breakpoint_1, $breakpoint_2, $media, $debug: $debug);\r\n}\r\n\r\n@function joinQueries($range, $queryString: (), $debug: $mq-debug){\r\n\r\n\t$isAndStatement: false;\r\n\t$contains_media_only_statement: false;\r\n\t$media_statement_at_start: true;\r\n\r\n\t@if (length($range) > 1) {\r\n\t\t@for $i from 1 through length($range) {\r\n\t\t\t$statement: nth($range,$i);\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug joinQueries_statement $statement;\r\n\t\t\t}\r\n\t\t\t$mediaNotFirst: $i != 1 and isMedia($statement);\r\n\t\t\t@if ($statement == 'plus') {\r\n\t\t\t\t$isAndStatement: true;\r\n\t\t\t\t@if ($i == 2 and length(nth($range,1)) == 1) {\r\n\t\t\t\t\t$contains_media_only_statement: true;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t@if ($mediaNotFirst){\r\n\t\t\t\t$media_statement_at_start: false;\r\n\t\t\t}\r\n\t\t}\r\n\t} @else if (type-of(nth($range,1)) == 'string') {\r\n\t\t$contains_media_only_statement: true;\r\n\t}\r\n\r\n\t@if ($isAndStatement and not $media_statement_at_start) {\r\n\t\t@error 'Media type definitions must be specified at the start of plus statements: (#{$range)})';\r\n\t}\r\n\r\n\t//Uses this functionality if using a single level MQ variable\r\n\t//eg:\r\n\t//$MQ-example--single: inside, 1000px, 500px;\r\n\t//@include mq($MQ-example--single){}\r\n\t@if (isBasicQuery($range)){\r\n\r\n\t\t@return get_media($range) + calculateBasicQuery($range, $isAndStatement, $debug: $debug);\r\n\r\n\t//Uses this functionality if using a multi level MQ variable\r\n\t//eg:\r\n\t//$MQ-example--multiple:\r\n\t//\t(inside, 1000px, 500px),\r\n\t//\t(min, 1200px)\r\n\t//;\r\n\t//@include mq($MQ-example--multiple){}\r\n\t} @else {\r\n\r\n\t\t@each $mqSet in $range {\r\n\r\n\t\t\t@if ($mqSet != 'plus') {\r\n\t\t\t\t@if (isBasicQuery($mqSet)){\r\n\r\n\t\t\t\t\t$newQuery: calculateBasicQuery($mqSet, $isAndStatement, $debug: $debug);\r\n\r\n\t\t\t\t\t$media: get_media($mqSet);\r\n\r\n\t\t\t\t\t@if ($isAndStatement) {\r\n\t\t\t\t\t\t@if ($queryString == ()){\r\n\t\t\t\t\t\t\t$queryString: $media + $newQuery;\r\n\t\t\t\t\t\t} @else if ($newQuery != '') {\r\n\t\t\t\t\t\t\t$queryString: $queryString + ' and ' + $newQuery;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t$queryString: append($queryString, $media + $newQuery, 'comma');\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t} @else {\r\n\r\n\t\t\t\t\t$is_media_only_statment: $contains_media_only_statement and type-of($mqSet) == 'string';\r\n\r\n\t\t\t\t\t@if ($isAndStatement) {\r\n\t\t\t\t\t\t@if ($is_media_only_statment) {\r\n\t\t\t\t\t\t\t$queryString: mediaType($mqSet, false);\r\n\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t$queryString: joinQueries($mqSet, $queryString, $debug);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (length($queryString) > 1){\r\n\t\t\t\t\t\t\t$error: 'mq-scss does not support \"or\" statements inside \"plus\" statements: ' + $queryString;\r\n\t\t\t\t\t\t\t@error $error;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t@if ($is_media_only_statment) {\r\n\t\t\t\t\t\t\t$queryString: $mqSet;\r\n\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t$queryString: append($queryString, joinQueries($mqSet, $debug: $debug), 'comma');\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t@return $queryString;\r\n\t}\r\n}\r\n\r\n@mixin mq($range, $breakpoint_1: null, $breakpoint_2: null, $mediaType: false, $debug: $mq-debug) {\r\n\r\n\t@if ($debug) {\r\n\t\t@debug $range;\r\n\t}\r\n\r\n\t@if (length($range) > 1) {\r\n\t\t$finalOutput: joinQueries($range, $debug: $debug);\r\n\t\t@if ($debug) {\r\n\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $finalOutput;\r\n\t\t}\r\n\t\t@media #{$finalOutput} {\r\n\t\t\t@content;\r\n\t\t}\r\n\r\n\t//Uses this functionality if placing MQ data inline\r\n\t//eg:\r\n\t//@include mq(inside, 1000px, 500px, 'screen');\r\n\t} @else {\r\n\t\t//standardises the values to prevent mediaType from getting confused with breakpoint_2\r\n\t\t$mediaOnly: $breakpoint_1 == null and $breakpoint_2 == null and $mediaType == false;\r\n\t\t@if ($debug) {\r\n\t\t\t@debug inline_mq_values (range: $range, breakpoint_1: $breakpoint_1, breakpoint_2: $breakpoint_2, mediaType: $mediaType, mediaOnly: $mediaOnly);\r\n\t\t}\r\n\t\t$values: get_values(if($mediaOnly, $range, ($range $breakpoint_1 $breakpoint_2 $mediaType)), $debug: $debug);\r\n\r\n\t\t$newRange: map-get($values, range);\r\n\t\t$newWidth1: map-get($values, breakpoint_1);\r\n\t\t$newWidth2: map-get($values, breakpoint_2);\r\n\t\t$newMedia: map-get($values, media);\r\n\r\n\t\t@if ($mediaOnly) {\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $newMedia;\r\n\t\t\t}\r\n\r\n\t\t\t@media #{ $newMedia } {\r\n\t\t\t\t@content;\r\n\t\t\t}\r\n\r\n\t\t} @else {\r\n\r\n\t\t\t$finalMQ: $newMedia + calculateMQ($newRange, $newWidth1, $newWidth2, $debug: $debug);\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $finalMQ ;\r\n\t\t\t}\r\n\r\n\t\t\t@media #{ $finalMQ } {\r\n\t\t\t\t@content;\r\n\t\t\t}\r\n\r\n\t\t}\r\n\t}\r\n\r\n\t@if ($debug){\r\n\t\t//spacer for seperating results\r\n\t\t@debug '';\r\n\t}\r\n\r\n}\r\n\r\n@mixin retina($density: 2) {\r\n\t\t@media\r\n\t\tonly screen and (min-device-pixel-ratio: $density),\r\n\t\tonly screen and (min-resolution: $density * 96ppi),\r\n\t\tonly screen and (min-resolution: $density * 1dppx) {\r\n\t\t\t@content;\r\n\t}\r\n}\r\n"]} \ No newline at end of file +{"version":3,"sources":["00-config-files/04-fonts/font-families.scss","00-config-files/03-BPs-MQs/00-bp-break-points-base.scss","../../node_modules/normalize.css/normalize.css","main.css","00-config-files/npm-installs.scss","03-plugins/normalize.altered.scss","03-plugins/highlight.theme.atom-one-dark.scss","04-base-styles/elements.scss","00-config-files/01-colors/2-CF-colors-functional.scss","00-config-files/01-colors/0-CB-colors-base.scss","00-config-files/04-fonts/font-weights.scss","00-config-files/02-values/VG-values-global.scss","04-base-styles/color-classes.scss","00-config-files/01-colors/1-brand.scss","04-base-styles/TK-toolkit.scss","../_modules/bodyContent/bodyContent.scss","../_modules/btn/btn.scss","02-mixins/centered.scss","01-functions/color-functions.scss","../_modules/demo/demo.scss","../_modules/header/header.scss","../_modules/pageContainer/pageContainer.scss","02-mixins/clearfix.scss","../_modules/tabs/tabs.scss","../_modules/tests/tests.scss","../../_mq.scss","main.scss"],"names":[],"mappings":"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","file":"main.css","sourcesContent":["\r\n@import url('https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i|Montserrat:400,700');\r\n\r\n//font families\r\n//Don't create variables like $openSans for custom fonts\r\n//Use generic variable names for better maintainability\r\n$sans-serif:\t'Cabin', Arial, sans-serif;\r\n$serif:\t\t\tTimes New Roman, Times, serif;\r\n$cursive:\t\tcursive;\r\n$code:\t\t\t\"Courier New\", Courier, monospace;\r\n\r\n//1 = primary\r\n//2 = secondary etc\r\n$font-1: $sans-serif;\r\n$font-2: 'Montserrat', sans-serif;\r\n","///*================================================*\\\r\n//\tBREAK POINTS\r\n//----------------------------------------------------\r\n//\tDefines the points at which the page design\r\n//\tcan snap and drastically change it's layout\r\n//\tthese values are global and can be used in\r\n//\tall modules.\r\n//*================================================*/\r\n\r\n$BP-minimum: 320px;\r\n\r\n$BP-small: 600px;\r\n$BP-medium: 800px;\r\n$BP-large: 1000px;\r\n\r\n$BP-page: 1200px;\r\n\r\n$breakpoints: (\r\n\tminimum: $BP-minimum,\r\n\tsmall: $BP-small,\r\n\tmedium: $BP-medium,\r\n\tlarge: $BP-large,\r\n\tpage: $BP-page,\r\n)\r\n\r\n:root {\r\n\t@each $name, $value in $breakpoints {\r\n\t\t--BP-#{$name}: $value;\r\n\t}\r\n}","/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Remove the margin in all browsers (opinionated).\n */\n\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif; /* 1 */\n font-size: 100%; /* 1 */\n line-height: 1.15; /* 1 */\n margin: 0; /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\n\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n","/*\r\n//apply color variations and overrides to specific modules more easily for stronger color application\r\n\r\n//usage:\r\n.module {\r\n\t@include brandColors((\r\n\t\tborder-left-color : 'text',\r\n\t\toutline-color: 'color'\r\n\t));\r\n}\r\n\r\n//equivalent to:\r\n\r\n.color-1 .module {\r\n\tborder-left-color : brand(1,'text');\r\n\toutline-color : brand(1);\r\n}\r\n.color-2 .module {\r\n\tborder-left-color : brand(2,'text');\r\n\toutline-color : brand(2);\r\n}\r\n\r\netc.\r\n\r\n*/\n@import url(\"https://fonts.googleapis.com/css?family=Cabin:400,400i,700,700i|Montserrat:400,700\");\n:root {\n --BP-minimum: 320px;\n --BP-small: 600px;\n --BP-medium: 800px;\n --BP-large: 1000px;\n --BP-page: 1200px;\n}\n\n/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */\n/* Document\n ========================================================================== */\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\nhtml {\n line-height: 1.15;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n/**\n * Remove the margin in all browsers (opinionated).\n */\nbody {\n margin: 0;\n}\n\n/**\n * Add the correct display in IE 9-.\n */\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\nfigcaption,\nfigure,\nmain {\n /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\nhr {\n box-sizing: content-box;\n /* 1 */\n height: 0;\n /* 1 */\n overflow: visible;\n /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\npre {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\na {\n background-color: transparent;\n /* 1 */\n -webkit-text-decoration-skip: objects;\n /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\nabbr[title] {\n border-bottom: none;\n /* 1 */\n text-decoration: underline;\n /* 2 */\n text-decoration: underline dotted;\n /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace;\n /* 1 */\n font-size: 1em;\n /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n */\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n/**\n * 1. Change the font styles in all browsers (opinionated).\n * 2. Remove the margin in Firefox and Safari.\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n font-family: sans-serif;\n /* 1 */\n font-size: 100%;\n /* 1 */\n line-height: 1.15;\n /* 1 */\n margin: 0;\n /* 2 */\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\nbutton,\ninput {\n /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\nbutton,\nselect {\n /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\nbutton,\nhtml [type=\"button\"],\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * Correct the padding in Firefox.\n */\nfieldset {\n padding: 0.35em 0.75em 0.625em;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\nlegend {\n box-sizing: border-box;\n /* 1 */\n color: inherit;\n /* 2 */\n display: table;\n /* 1 */\n max-width: 100%;\n /* 1 */\n padding: 0;\n /* 3 */\n white-space: normal;\n /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\nprogress {\n display: inline-block;\n /* 1 */\n vertical-align: baseline;\n /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n[type=\"checkbox\"],\n[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n outline-offset: -2px;\n /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n::-webkit-file-upload-button {\n -webkit-appearance: button;\n /* 1 */\n font: inherit;\n /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\ndetails,\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n/**\n * Add the correct display in IE 9-.\n */\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n/**\n * Add the correct display in IE 10-.\n */\n[hidden] {\n display: none;\n}\n\na:active, a:hover {\n outline-width: 1px;\n}\n\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\n/**\r\n * 1. Set default font family to sans-serif.\r\n * 2. Prevent iOS and IE text size adjust after device orientation change,\r\n * without disabling user zoom.\r\n */\nhtml {\n font-family: sans-serif;\n /* 1 */\n -ms-text-size-adjust: 100%;\n /* 2 */\n -webkit-text-size-adjust: 100%;\n /* 2 */\n}\n\n/**\r\n * Remove default margin.\r\n */\nbody {\n margin: 0;\n}\n\n/* HTML5 display definitions\r\n ========================================================================== */\n/**\r\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\r\n * Correct `block` display not defined for `details` or `summary` in IE 10/11\r\n * and Firefox.\r\n * Correct `block` display not defined for `main` in IE 11.\r\n */\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\nsection,\nsummary {\n display: block;\n}\n\n/**\r\n * 1. Correct `inline-block` display not defined in IE 8/9.\r\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\r\n */\naudio,\ncanvas,\nprogress,\nvideo {\n display: inline-block;\n /* 1 */\n vertical-align: baseline;\n /* 2 */\n}\n\n/**\r\n * Prevent modern browsers from displaying `audio` without controls.\r\n * Remove excess height in iOS 5 devices.\r\n */\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\r\n * Address `[hidden]` styling not present in IE 8/9/10.\r\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\r\n */\n[hidden],\ntemplate {\n display: none;\n}\n\n/* Links\r\n ========================================================================== */\n/**\r\n * Remove the gray background color from active links in IE 10.\r\n */\na {\n background-color: transparent;\n}\n\n/* Text-level semantics\r\n ========================================================================== */\n/**\r\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\r\n */\nabbr[title] {\n border-bottom: 1px dotted;\n}\n\n/**\r\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n */\nb,\nstrong {\n font-weight: bold;\n}\n\n/**\r\n * Address styling not present in Safari and Chrome.\r\n */\ndfn {\n font-style: italic;\n}\n\n/**\r\n * Address variable `h1` font-size and margin within `section` and `article`\r\n * contexts in Firefox 4+, Safari, and Chrome.\r\n */\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/**\r\n * Address styling not present in IE 8/9.\r\n */\nmark {\n background: #ff0;\n color: #000;\n}\n\n/**\r\n * Address inconsistent and variable font size in all browsers.\r\n */\nsmall {\n font-size: 80%;\n}\n\n/**\r\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\r\n */\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsup {\n top: -0.5em;\n}\n\nsub {\n bottom: -0.25em;\n}\n\n/* Embedded content\r\n ========================================================================== */\n/**\r\n * Remove border when inside `a` element in IE 8/9/10.\r\n */\nimg {\n border: 0;\n}\n\n/**\r\n * Correct overflow not hidden in IE 9/10/11.\r\n */\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Grouping content\r\n ========================================================================== */\n/**\r\n * Address margin not present in IE 8/9 and Safari.\r\n */\nfigure {\n margin: 1em 40px;\n}\n\n/**\r\n * Address differences between Firefox and other browsers.\r\n */\nhr {\n box-sizing: content-box;\n height: 0;\n}\n\n/**\r\n * Contain overflow in all browsers.\r\n */\npre {\n overflow: auto;\n}\n\n/**\r\n * Address odd `em`-unit font size rendering in all browsers.\r\n */\ncode,\nkbd,\npre,\nsamp {\n font-family: monospace, monospace;\n font-size: 1em;\n}\n\n/* Forms\r\n ========================================================================== */\n/**\r\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n * styling of `select`, unless a `border` property is set.\r\n */\n/**\r\n * 1. Correct color not being inherited.\r\n * Known issue: affects color of disabled elements.\r\n * 2. Correct font properties not being inherited.\r\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n color: inherit;\n /* 1 */\n font: inherit;\n /* 2 */\n margin: 0;\n /* 3 */\n}\n\n/**\r\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\r\n */\nbutton {\n overflow: visible;\n}\n\n/**\r\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n * All other form control elements do not inherit `text-transform` values.\r\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\r\n * Correct `select` style inheritance in Firefox.\r\n */\nbutton,\nselect {\n text-transform: none;\n}\n\n/**\r\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n * and `video` controls.\r\n * 2. Correct inability to style clickable `input` types in iOS.\r\n * 3. Improve usability and consistency of cursor style between image-type\r\n * `input` and others.\r\n */\nbutton,\nhtml input[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"] {\n -webkit-appearance: button;\n /* 2 */\n cursor: pointer;\n /* 3 */\n}\n\n/**\r\n * Re-set default cursor for disabled elements.\r\n */\nbutton[disabled],\nhtml input[disabled] {\n cursor: default;\n}\n\n/**\r\n * Remove inner padding and border in Firefox 4+.\r\n */\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n border: 0;\n padding: 0;\n}\n\n/**\r\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n * the UA stylesheet.\r\n */\ninput {\n line-height: normal;\n}\n\n/**\r\n * It's recommended that you don't attempt to style these elements.\r\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n *\r\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\r\n * 2. Remove excess padding in IE 8/9/10.\r\n */\ninput[type=\"checkbox\"],\ninput[type=\"radio\"] {\n box-sizing: border-box;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\r\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\r\n * `font-size` values of the `input`, it causes the cursor style of the\r\n * decrement button to change from `default` to `text`.\r\n */\ninput[type=\"number\"]::-webkit-inner-spin-button,\ninput[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\r\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\r\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\r\n */\ninput[type=\"search\"] {\n -webkit-appearance: textfield;\n /* 1 */\n box-sizing: content-box;\n /* 2 */\n}\n\n/**\r\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\r\n * Safari (but not Chrome) clips the cancel button when the search input has\r\n * padding (and `textfield` appearance).\r\n */\ninput[type=\"search\"]::-webkit-search-cancel-button,\ninput[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\r\n * Define consistent border, margin, and padding.\r\n */\nfieldset {\n border: 1px solid #c0c0c0;\n margin: 0 2px;\n padding: 0.35em 0.625em 0.75em;\n}\n\n/**\r\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\r\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\r\n */\nlegend {\n border: 0;\n /* 1 */\n padding: 0;\n /* 2 */\n}\n\n/**\r\n * Remove default vertical scrollbar in IE 8/9/10/11.\r\n */\ntextarea {\n overflow: auto;\n}\n\n/**\r\n * Don't inherit the `font-weight` (applied by a rule above).\r\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\r\n */\noptgroup {\n font-weight: bold;\n}\n\n/* Tables\r\n ========================================================================== */\n/**\r\n * Remove most spacing between table cells.\r\n */\ntable {\n border-collapse: collapse;\n border-spacing: 0;\n}\n\ntd,\nth {\n padding: 0;\n}\n\n/*\r\n\r\nAtom One Dark by Daniel Gamage\r\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\r\n\r\nbase: #282c34\r\nmono-1: #abb2bf\r\nmono-2: #818896\r\nmono-3: #5c6370\r\nhue-1: #56b6c2\r\nhue-2: #61aeee\r\nhue-3: #c678dd\r\nhue-4: #98c379\r\nhue-5: #e06c75\r\nhue-5-2: #be5046\r\nhue-6: #d19a66\r\nhue-6-2: #e6c07b\r\n\r\n*/\n.hljs {\n display: block;\n overflow-x: auto;\n padding: 0.5em;\n color: #abb2bf;\n background: #282c34;\n}\n\n.hljs-comment,\n.hljs-quote {\n color: #5c6370;\n font-style: italic;\n}\n\n.hljs-doctag,\n.hljs-keyword,\n.hljs-formula {\n color: #c678dd;\n}\n\n.hljs-section,\n.hljs-name,\n.hljs-selector-tag,\n.hljs-deletion,\n.hljs-subst {\n color: #e06c75;\n}\n\n.hljs-literal {\n color: #56b6c2;\n}\n\n.hljs-string,\n.hljs-regexp,\n.hljs-addition,\n.hljs-attribute,\n.hljs-meta-string {\n color: #98c379;\n}\n\n.hljs-built_in,\n.hljs-class .hljs-title {\n color: #e6c07b;\n}\n\n.hljs-attr,\n.hljs-variable,\n.hljs-template-variable,\n.hljs-type,\n.hljs-selector-class,\n.hljs-selector-attr,\n.hljs-selector-pseudo,\n.hljs-number {\n color: #d19a66;\n}\n\n.hljs-symbol,\n.hljs-bullet,\n.hljs-link,\n.hljs-meta,\n.hljs-selector-id,\n.hljs-title {\n color: #61aeee;\n}\n\n.hljs-emphasis {\n font-style: italic;\n}\n\n.hljs-strong {\n font-weight: bold;\n}\n\n.hljs-link {\n text-decoration: underline;\n}\n\n/*================================================* BASE ELEMENT STYLING\r\n//----------------------------------------------------\r\n// This file holds base styling for elements.\r\n// NO CLASSES ALLOWED!\r\n// these are essentially site resets\r\n\\*================================================*/\n*:before, *:after, * {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-smoothing: antialiased;\n box-sizing: inherit;\n}\n\nhtml, body {\n box-sizing: border-box;\n height: 100%;\n margin: 0;\n padding: 0;\n}\n\nhtml {\n font-size: 62.5%;\n}\n\nspan,\nem,\nstrong,\na,\nb,\ni,\nlabel,\ninput,\ndiv,\ntextarea,\nselect,\nheader,\nfooter,\naside,\ntime,\nhtml,\nform,\nnav,\nnav li {\n margin-top: 0;\n}\n\nbody {\n background-color: #fff;\n position: relative;\n margin: 0;\n font-size: 16px;\n line-height: 1.5;\n color: #000;\n font-family: \"Cabin\", Arial, sans-serif;\n font-weight: 400;\n}\n\np, ul, ol {\n margin: 25px 0;\n}\n\np:first-child, ul:first-child, ol:first-child {\n margin-top: 0;\n}\n\np:last-child, ul:last-child, ol:last-child {\n margin-bottom: 0;\n}\n\n/*HEADINGS*/\nh1, h2, h3, h4, h5, h6 {\n font-family: \"Montserrat\", sans-serif;\n font-weight: 700;\n line-height: 1;\n letter-spacing: -0.5px;\n margin-bottom: 15px;\n margin-top: 25px;\n}\n\nh1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {\n margin-top: 0;\n}\n\nh1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {\n margin-bottom: 0;\n}\n\nh1 + p, h1 + ul, h1 + ol, h2 + p, h2 + ul, h2 + ol, h3 + p, h3 + ul, h3 + ol, h4 + p, h4 + ul, h4 + ol, h5 + p, h5 + ul, h5 + ol, h6 + p, h6 + ul, h6 + ol {\n margin-top: 0;\n}\n\n.-theme--dark h1, .-theme--dark h2, .-theme--dark h3, .-theme--dark h4, .-theme--dark h5, .-theme--dark h6 {\n color: #b9d48b;\n}\n\nh1 {\n font-size: 30px;\n text-align: center;\n}\n\nh1 + h2 {\n margin-top: 30px;\n}\n\nh2 {\n font-size: 25px;\n margin-top: 75px;\n}\n\nh3 {\n font-size: 20px;\n}\n\nh4 {\n font-size: 18px;\n text-transform: uppercase;\n}\n\na {\n text-decoration: none;\n color: #CF1730;\n transition: 0.3s;\n}\n\na:hover, a:focus {\n text-decoration: underline;\n}\n\na[disabled] {\n cursor: default;\n pointer-events: none;\n opacity: 0.2;\n}\n\n.no-csspointerevents a[disabled] {\n display: none;\n}\n\nlabel, input[type=radio], input[type=checkbox] {\n cursor: pointer;\n}\n\nimg {\n display: block;\n max-width: 100%;\n width: 100%;\n}\n\na > img {\n transition: 0.3s;\n}\n\na:hover > img, a:focus > img {\n transform: scale(1.05);\n}\n\nblockquote {\n background-color: transparent;\n border-left: 0;\n border-left: 6px solid #000;\n font-style: normal;\n margin: 0;\n margin-left: 30px;\n padding: 55px 25px 40px;\n}\n\nblockquote:before {\n display: none;\n}\n\nblockquote p {\n font-size: 22px;\n line-height: 1.25;\n}\n\npre {\n padding: 10px 70px 10px 0;\n margin-left: -20px;\n margin-right: -20px;\n font-family: 'Monaco', 'Lucida Console', monospace;\n font-size: 13px;\n line-height: 20px;\n box-shadow: inset 0 0 5px #000;\n word-wrap: break-word;\n color: #d6d6d6;\n background-color: #282c34;\n padding: 0;\n}\n\npre, pre.lines {\n margin: 0;\n padding-left: 0;\n padding-right: 0;\n}\n\npre.lines {\n font-size: 12px;\n padding: 10px;\n float: left;\n display: block !important;\n box-shadow: none;\n color: #d6d6d6;\n background-color: #000;\n width: 40px;\n padding-top: 7px;\n padding-bottom: 7px;\n text-align: center !important;\n}\n\npre code {\n padding: 10px 5px;\n font-size: 1em;\n}\n\n.no-flexbox pre {\n max-width: 780px;\n}\n\ncode {\n max-width: 100%;\n}\n\np code, li code, h1 code, h2 code, h3 code, h4 code, h5 code {\n background-color: #c5c7cc;\n padding: 3px 4px;\n font-size: .85em;\n}\n\n.-color-1 {\n background-color: #CF1730;\n}\n\n.-color-1, .-color-1 * {\n color: #fff;\n}\n\n.-color-1, .-color-1 svg {\n fill: #fff;\n}\n\n.-color-text-1, .-color-text-1 * {\n color: #CF1730;\n fill: #CF1730;\n}\n\n.-color-2 {\n background-color: #b9d48b;\n}\n\n.-color-2, .-color-2 * {\n color: #000;\n}\n\n.-color-2, .-color-2 svg {\n fill: #000;\n}\n\n.-color-text-2, .-color-text-2 * {\n color: #b9d48b;\n fill: #b9d48b;\n}\n\n.-color-3 {\n background-color: #7FD6CD;\n}\n\n.-color-3, .-color-3 * {\n color: #000;\n}\n\n.-color-3, .-color-3 svg {\n fill: #000;\n}\n\n.-color-text-3, .-color-text-3 * {\n color: #7FD6CD;\n fill: #7FD6CD;\n}\n\n.-color-4 {\n background-color: #0CCBEE;\n}\n\n.-color-4, .-color-4 * {\n color: #000;\n}\n\n.-color-4, .-color-4 svg {\n fill: #000;\n}\n\n.-color-text-4, .-color-text-4 * {\n color: #0CCBEE;\n fill: #0CCBEE;\n}\n\n.-color-5 {\n background-color: #08705e;\n}\n\n.-color-5, .-color-5 * {\n color: #fff;\n}\n\n.-color-5, .-color-5 svg {\n fill: #fff;\n}\n\n.-color-text-5, .-color-text-5 * {\n color: #08705e;\n fill: #08705e;\n}\n\nnav ul, .TK-noDots {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n\n.no-js .TK-noJsHide {\n display: none;\n}\n\n.js .TK-jsHide {\n display: none !important;\n}\n\n.no-js .TK-jsHide {\n display: block;\n}\n\n.TK-skipLink {\n border: 0;\n clip: rect(0 0 0 0);\n width: 0;\n height: 0;\n padding: 0;\n overflow: hidden;\n position: absolute;\n opacity: 0;\n}\n\n.TK-skipLink:active, .TK-skipLink:focus {\n clip: auto;\n width: auto;\n height: auto;\n position: static;\n opacity: 1;\n}\n\n.bodyContent {\n padding-bottom: 100px;\n}\n\n.bodyContent, .bodyContent td {\n text-align: left;\n}\n\n.bodyContent strong, .bodyContent b, .bodyContent td strong, .bodyContent td b {\n font-weight: 700;\n}\n\n.bodyContent sup, .bodyContent sub, .bodyContent td sup, .bodyContent td sub {\n font-size: 0.6em;\n}\n\n.bodyContent a:not(.btn), .bodyContent td a:not(.btn) {\n font-weight: 400;\n text-decoration: underline;\n color: #CF1730;\n}\n\n.bodyContent a:not(.btn):hover, .bodyContent a:not(.btn):focus, .bodyContent td a:not(.btn):hover, .bodyContent td a:not(.btn):focus {\n text-decoration: none;\n}\n\n.bodyContent ul ul, .bodyContent ul ol, .bodyContent ol ul, .bodyContent ol ol, .bodyContent td ul ul, .bodyContent td ul ol, .bodyContent td ol ul, .bodyContent td ol ol {\n margin: 0;\n}\n\n.bodyContent ul li, .bodyContent ol li, .bodyContent td ul li, .bodyContent td ol li {\n margin-top: 10px;\n}\n\n.bodyContent > ul:not(.TK-noDots):not(:first-child), .bodyContent > ol:not(.TK-noDots):not(:first-child), .bodyContent td > ul:not(.TK-noDots):not(:first-child), .bodyContent td > ol:not(.TK-noDots):not(:first-child) {\n margin-top: 25px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li, .bodyContent > ol:not(.TK-noDots) > li, .bodyContent td > ul:not(.TK-noDots) > li, .bodyContent td > ol:not(.TK-noDots) > li {\n margin: 0;\n padding-bottom: 11px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:first-child, .bodyContent > ol:not(.TK-noDots) > li:first-child, .bodyContent td > ul:not(.TK-noDots) > li:first-child, .bodyContent td > ol:not(.TK-noDots) > li:first-child {\n border-top: none;\n padding-top: 0;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:last-child, .bodyContent > ol:not(.TK-noDots) > li:last-child, .bodyContent td > ul:not(.TK-noDots) > li:last-child, .bodyContent td > ol:not(.TK-noDots) > li:last-child {\n padding-bottom: 0;\n}\n\n.bodyContent ul:not(.TK-noDots), .bodyContent td ul:not(.TK-noDots) {\n padding: 0;\n}\n\n.bodyContent ul:not(.TK-noDots) li, .bodyContent td ul:not(.TK-noDots) li {\n list-style: none;\n padding-left: 25px;\n position: relative;\n}\n\n.bodyContent ul:not(.TK-noDots) li:before, .bodyContent td ul:not(.TK-noDots) li:before {\n content: '';\n display: block;\n position: absolute;\n top: 15px;\n left: 0;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li:before, .bodyContent td > ul:not(.TK-noDots) > li:before {\n border-radius: 50%;\n height: 6px;\n width: 6px;\n background: #CF1730;\n top: 6px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li > ul > li:before, .bodyContent td > ul:not(.TK-noDots) > li > ul > li:before {\n height: 2px;\n width: 10px;\n background: #CF1730;\n top: 9px;\n}\n\n.bodyContent > ul:not(.TK-noDots) > li > ul > li > ul > li:before, .bodyContent td > ul:not(.TK-noDots) > li > ul > li > ul > li:before {\n border-radius: 50%;\n height: 6px;\n width: 6px;\n border: 1px solid #CF1730;\n top: 5px;\n}\n\n.bodyContent ol:not(.TK-noDots), .bodyContent td ol:not(.TK-noDots) {\n counter-reset: li;\n list-style: none;\n padding-left: 0;\n}\n\n.bodyContent ol:not(.TK-noDots) li, .bodyContent td ol:not(.TK-noDots) li {\n padding-left: 25px;\n position: relative;\n}\n\n.bodyContent ol:not(.TK-noDots) li:before, .bodyContent td ol:not(.TK-noDots) li:before {\n content: counter(li) \".\";\n counter-increment: li;\n position: absolute;\n left: 0;\n font-weight: 700;\n color: #CF1730;\n}\n\n.bodyContent ol:not(.TK-noDots) li ol li:before, .bodyContent td ol:not(.TK-noDots) li ol li:before {\n content: counter(li, lower-alpha) \".\";\n}\n\n.bodyContent ol:not(.TK-noDots) li ol li ol li:before, .bodyContent td ol:not(.TK-noDots) li ol li ol li:before {\n content: counter(li, lower-roman) \".\";\n left: auto;\n right: 100%;\n margin-right: -15px;\n}\n\n.bodyContent img, .bodyContent td img {\n display: inline-block;\n}\n\n.btn {\n font-family: \"Montserrat\", sans-serif;\n font-weight: 700;\n font-size: 14px;\n background-color: #5B1223;\n color: #fff;\n transition: 0.3s;\n padding: 15px 20px;\n display: inline-block;\n transition: all 0.25s ease-in-out;\n position: relative;\n text-align: left;\n line-height: 1;\n letter-spacing: 0.5px;\n border: 3px solid #CF1730;\n text-decoration: none !important;\n}\n\n.btn:hover {\n background-color: #000;\n color: #fff;\n}\n\n.btn:hover svg {\n fill: #CF1730;\n}\n\n.btn svg {\n fill: #CF1730;\n position: absolute;\n top: 0;\n bottom: 0;\n margin: auto 0;\n right: 20px;\n height: 10px;\n width: 10px;\n fill: transparent;\n fill: #fff;\n fill-width: 15px;\n transition: 0.3s;\n}\n\n.btn.-hasIcon {\n padding-right: 55px;\n}\n\n.btn.-active {\n background-color: #b9d48b;\n color: #000;\n}\n\n.btn.-active:hover {\n background-color: #94aa6f;\n}\n\n.btn.-inactive {\n background-color: lightgray;\n color: #000;\n}\n\n.btn.-inactive:hover {\n background-color: gray;\n}\n\n.demo {\n padding: 5px;\n border: 2px solid #000;\n}\n\n.demo__segment {\n position: relative;\n margin-top: 35px;\n margin-bottom: 10px;\n}\n\n.demo__segment:last-child, .demo__segment.grid__cell {\n margin-bottom: 0;\n}\n\n.demo__segment:before {\n position: absolute;\n bottom: 100%;\n left: 0;\n padding: 5px 10px;\n background: #000;\n color: #fff;\n border-radius: 5px 5px 0 0;\n}\n\n.demo__summary {\n background-color: #CDDEC4;\n padding: 20px;\n margin-bottom: 10px;\n margin-top: 60px;\n}\n\n.demo__summary:before {\n content: 'Summary';\n}\n\n.demo__summary + .demo__result {\n margin-top: 45px;\n}\n\n.demo__result:before {\n content: 'Example';\n}\n\n.-false .demo__result:before {\n content: 'Not Gutter Grid';\n}\n\n.demo__result .grid {\n padding: 0;\n}\n\n.demo__result .grid__cell, .demo__result .mixin__cell {\n min-height: 100px;\n margin: 0;\n}\n\n.-noHeight .demo__result .grid__cell, .-noHeight .demo__result .mixin__cell {\n min-height: 0;\n}\n\n.demo__markup {\n background-color: #282c34;\n position: relative;\n padding-left: 40px;\n display: flex;\n}\n\n.demo__markup.html:before {\n content: 'HTML';\n}\n\n.demo__markup.scss:before {\n content: 'Sass';\n}\n\n.demo__markup.js:before {\n content: 'JavaScript';\n}\n\n.demo__markup.json:before {\n content: 'JSON';\n}\n\n.demo__markup pre {\n display: flex;\n flex-grow: 1;\n}\n\n.demo__markup pre, .demo__markup pre.lines {\n margin: 0;\n}\n\n.demo__markup pre.lines {\n overflow: hidden;\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n background: #000;\n padding-top: 12px;\n}\n\n.demo__markup code {\n margin-top: -20px;\n padding-bottom: 10px;\n padding-top: 10px;\n}\n\n.demo .example ul, .demo .example li {\n list-style: none;\n padding-left: 0 !important;\n}\n\n.header {\n margin-bottom: 30px;\n}\n\n.header h1 {\n margin: 50px 0 10px;\n}\n\n.header .version {\n text-align: center;\n font-style: italic;\n margin-bottom: 10px;\n}\n\n.pageContainer {\n padding-left: 20px !important;\n padding-right: 20px !important;\n}\n\n.pageContainer.-wide {\n padding-left: 0 !important;\n padding-right: 0 !important;\n}\n\n.pageContainer__width {\n margin: 0 auto;\n max-width: 1200px;\n min-width: 280px;\n display: block;\n pointer-events: auto;\n width: 100%;\n}\n\n.pageContainer__width:after {\n display: block;\n content: '';\n clear: both;\n}\n\n.-wide .pageContainer__width {\n max-width: 1240px;\n}\n\n.-thin .pageContainer__width {\n max-width: 1160px;\n}\n\n.tabs {\n padding-top: 1px;\n}\n\n.tabs__link {\n text-align: center;\n text-transform: capitalize;\n}\n\n.js .tabs__content {\n display: none;\n}\n\n.no-flexbox .tabs {\n width: 780px;\n}\n\n.tests {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n grid-gap: 20px;\n}\n\n.test {\n padding: 30px;\n border: 2px solid #000;\n background: #6D0808;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 20px;\n}\n\n.test h3 {\n margin-bottom: 0;\n}\n\n.test::before, .test::after {\n color: #fff;\n white-space: pre;\n}\n\n.test::before {\n font-size: 20px;\n}\n\n.test::after {\n content: ' = false';\n}\n\n.test.-max::before {\n content: \"mq(max, 800px)\";\n}\n\n@media (max-width: 800px) {\n .test.-max {\n background: #004700;\n }\n .test.-max::after {\n content: ' = true';\n }\n}\n\n.test.-maxWidth::before {\n content: \"mq(max-width, 800px)\";\n}\n\n@media (max-width: 800px) {\n .test.-maxWidth {\n background: #004700;\n }\n .test.-maxWidth::after {\n content: ' = true';\n }\n}\n\n.test.-maxVar::before {\n content: 'mq($MQ-maxVar)';\n}\n\n@media (max-width: 800px) {\n .test.-maxVar {\n background: #004700;\n }\n .test.-maxVar::after {\n content: ' = true';\n }\n}\n\n.test.-min::before {\n content: \"mq(min, 800px)\";\n}\n\n@media (min-width: 801px) {\n .test.-min {\n background: #004700;\n }\n .test.-min::after {\n content: ' = true';\n }\n}\n\n.test.-minWidth::before {\n content: \"mq(min-width, 800px)\";\n}\n\n@media (min-width: 801px) {\n .test.-minWidth {\n background: #004700;\n }\n .test.-minWidth::after {\n content: ' = true';\n }\n}\n\n.test.-minVar::before {\n content: 'mq($MQ-minVar)';\n}\n\n@media (min-width: 801px) {\n .test.-minVar {\n background: #004700;\n }\n .test.-minVar::after {\n content: ' = true';\n }\n}\n\n.test.-inside::before {\n content: \"mq(inside, 800px, 600px)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-inside {\n background: #004700;\n }\n .test.-inside::after {\n content: ' = true';\n }\n}\n\n.test.-insideWidth::before {\n content: \"mq(inside-width, 600px, 800px)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-insideWidth {\n background: #004700;\n }\n .test.-insideWidth::after {\n content: ' = true';\n }\n}\n\n.test.-insideVar::before {\n content: 'mq($MQ-insideVar)';\n}\n\n@media (max-width: 800px) and (min-width: 601px) {\n .test.-insideVar {\n background: #004700;\n }\n .test.-insideVar::after {\n content: ' = true';\n }\n}\n\n.test.-outside::before {\n content: \"mq(outside, 800px, 600px)\";\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outside {\n background: #004700;\n }\n .test.-outside::after {\n content: ' = true';\n }\n}\n\n.test.-outsideWidth::before {\n content: \"mq(outside-width, 600px, 800px)\";\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outsideWidth {\n background: #004700;\n }\n .test.-outsideWidth::after {\n content: ' = true';\n }\n}\n\n.test.-outsideVar::before {\n content: 'mq($MQ-outsideVar)';\n}\n\n@media (max-width: 600px), (min-width: 801px) {\n .test.-outsideVar {\n background: #004700;\n }\n .test.-outsideVar::after {\n content: ' = true';\n }\n}\n\n.test.-maxHeight::before {\n content: \"mq(max-height, 800px)\";\n}\n\n@media (max-height: 800px) {\n .test.-maxHeight {\n background: #004700;\n }\n .test.-maxHeight::after {\n content: ' = true';\n }\n}\n\n.test.-maxHeightVar::before {\n content: 'mq($MQ-maxHeightVar)';\n}\n\n@media (max-height: 800px) {\n .test.-maxHeightVar {\n background: #004700;\n }\n .test.-maxHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-minHeight::before {\n content: \"mq(min-height, 800px)\";\n}\n\n@media (min-height: 801px) {\n .test.-minHeight {\n background: #004700;\n }\n .test.-minHeight::after {\n content: ' = true';\n }\n}\n\n.test.-minHeightVar::before {\n content: 'mq($MQ-minHeightVar)';\n}\n\n@media (min-height: 801px) {\n .test.-minHeightVar {\n background: #004700;\n }\n .test.-minHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-insideHeight::before {\n content: \"mq(inside-height, 600px, 800px)\";\n}\n\n@media (max-height: 800px) and (min-height: 601px) {\n .test.-insideHeight {\n background: #004700;\n }\n .test.-insideHeight::after {\n content: ' = true';\n }\n}\n\n.test.-insideHeightVar::before {\n content: 'mq($MQ-insideHeightVar)';\n}\n\n@media (max-height: 800px) and (min-height: 601px) {\n .test.-insideHeightVar {\n background: #004700;\n }\n .test.-insideHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-outsideHeight::before {\n content: \"mq(outside-height, 600px, 800px)\";\n}\n\n@media (max-height: 600px), (min-height: 801px) {\n .test.-outsideHeight {\n background: #004700;\n }\n .test.-outsideHeight::after {\n content: ' = true';\n }\n}\n\n.test.-outsideHeightVar::before {\n content: 'mq($MQ-outsideHeightVar)';\n}\n\n@media (max-height: 600px), (min-height: 801px) {\n .test.-outsideHeightVar {\n background: #004700;\n }\n .test.-outsideHeightVar::after {\n content: ' = true';\n }\n}\n\n.test.-ratio::before {\n content: 'mq(ratio, \"2 / 1\")';\n}\n\n@media (aspect-ratio: 2 / 1) {\n .test.-ratio {\n background: #004700;\n }\n .test.-ratio::after {\n content: ' = true';\n }\n}\n\n.test.-ratioVar::before {\n content: 'mq($MQ-ratioVar)';\n}\n\n@media (aspect-ratio: 2 / 1) {\n .test.-ratioVar {\n background: #004700;\n }\n .test.-ratioVar::after {\n content: ' = true';\n }\n}\n\n.test.-minRatio::before {\n content: 'mq(min-ratio, \"2 / 1\")';\n}\n\n@media (min-aspect-ratio: 2 / 1) {\n .test.-minRatio {\n background: #004700;\n }\n .test.-minRatio::after {\n content: ' = true';\n }\n}\n\n.test.-minRatioVar::before {\n content: 'mq($MQ-minRatioVar)';\n}\n\n@media (min-aspect-ratio: 2 / 1) {\n .test.-minRatioVar {\n background: #004700;\n }\n .test.-minRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-maxRatio::before {\n content: 'mq(max-ratio, \"2 / 1\")';\n}\n\n@media (max-aspect-ratio: 2 / 1) {\n .test.-maxRatio {\n background: #004700;\n }\n .test.-maxRatio::after {\n content: ' = true';\n }\n}\n\n.test.-maxRatioVar::before {\n content: 'mq($MQ-minRatioVar)';\n}\n\n@media (max-aspect-ratio: 2 / 1) {\n .test.-maxRatioVar {\n background: #004700;\n }\n .test.-maxRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-insideRatio::before {\n content: 'mq(inside-ratio, \"2 / 1\", \"1 / 1\")';\n}\n\n@media (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-insideRatio {\n background: #004700;\n }\n .test.-insideRatio::after {\n content: ' = true';\n }\n}\n\n.test.-insideRatioVar::before {\n content: 'mq($MQ-insideRatioVar)';\n}\n\n@media (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-insideRatioVar {\n background: #004700;\n }\n .test.-insideRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-outsideRatio::before {\n content: 'mq(outside-ratio, \"1 / 1\", \"2 / 1\")';\n}\n\n@media (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-outsideRatio {\n background: #004700;\n }\n .test.-outsideRatio::after {\n content: ' = true';\n }\n}\n\n.test.-outsideRatioVar::before {\n content: 'mq($MQ-outsideRatioVar)';\n}\n\n@media (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-outsideRatioVar {\n background: #004700;\n }\n .test.-outsideRatioVar::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround1::before {\n content: 'mq($MQ-exactRatioWorkAround1)';\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround1 {\n background: #004700;\n }\n .test.-exactRatioWorkAround1::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround2::before {\n content: 'mq($MQ-exactRatioWorkAround2)';\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround2 {\n background: #004700;\n }\n .test.-exactRatioWorkAround2::after {\n content: ' = true';\n }\n}\n\n.test.-exactRatioWorkAround3::before {\n content: \"mq(max-ratio, '2 / 1', 'not')\";\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n .test.-exactRatioWorkAround3 {\n background: #004700;\n }\n .test.-exactRatioWorkAround3::after {\n content: ' = true';\n }\n}\n\n.test.-simpleMedia::before {\n content: \"mq(min, 800px, 'screen')\";\n}\n\n@media screen and (min-width: 801px) {\n .test.-simpleMedia {\n background: #004700;\n }\n .test.-simpleMedia::after {\n content: ' = true';\n }\n}\n\n.test.-notMedia::before {\n content: \"mq(min, 800px, 'not')\";\n}\n\n@media not screen and (min-width: 801px) {\n .test.-notMedia {\n background: #004700;\n }\n .test.-notMedia::after {\n content: ' = true';\n }\n}\n\n.test.-onlyMedia::before {\n content: \"mq('screen')\";\n}\n\n@media screen {\n .test.-onlyMedia {\n background: #004700;\n }\n .test.-onlyMedia::after {\n content: ' = true';\n }\n}\n\n.test.-simplePlus::before {\n content: \"mq($MQ-simplePlus)\";\n}\n\n@media (min-width: 801px) and (min-height: 601px) {\n .test.-simplePlus {\n background: #004700;\n }\n .test.-simplePlus::after {\n content: ' = true';\n }\n}\n\n.test.-inlinePlus::before {\n content: \"mq((min-width, 800px) plus (min-height, 600px))\";\n}\n\n@media (min-width: 801px) and (min-height: 601px) {\n .test.-inlinePlus {\n background: #004700;\n }\n .test.-inlinePlus::after {\n content: ' = true';\n }\n}\n\n.test.-mediaOnlyPlus::before {\n content: \"mq('screen' plus (min, 800px))\";\n}\n\n@media screen and (min-width: 801px) {\n .test.-mediaOnlyPlus {\n background: #004700;\n }\n .test.-mediaOnlyPlus::after {\n content: ' = true';\n }\n}\n\n.test.-complexPlus::before {\n content: \"mq($MQ-complexPlus)\";\n}\n\n@media print and (max-width: 800px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-complexPlus {\n background: #004700;\n }\n .test.-complexPlus::after {\n content: ' = true';\n }\n}\n\n.test.-ignoredMediaType::before {\n content: \"mq($MQ-ignoredMediaType)\";\n}\n\n@media (max-width: 800px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-ignoredMediaType {\n background: #004700;\n }\n .test.-ignoredMediaType::after {\n content: ' = true';\n }\n}\n\n.test.-multiPlus::before {\n content: \"mq($MQ-multiPlus)\";\n}\n\n@media screen and (min-width: 801px) and (min-height: 401px) and (max-width: 1000px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-multiPlus {\n background: #004700;\n }\n .test.-multiPlus::after {\n content: ' = true';\n }\n}\n\n.test.-simpleOr::before {\n content: \"mq($MQ-simpleOr)\";\n}\n\n.test.-complexOr::before {\n content: \"mq($MQ-complexOr)\";\n}\n\n@media screen and (max-width: 800px) and (min-width: 601px), (max-aspect-ratio: 1 / 1), (min-aspect-ratio: 2 / 1) {\n .test.-complexOr {\n background: #004700;\n }\n .test.-complexOr::after {\n content: ' = true';\n }\n}\n\n.test.-multiOr::before {\n content: \"mq($MQ-multiOr)\";\n}\n\n@media screen and (min-width: 801px), (min-height: 801px), (max-width: 1000px) and (min-width: 601px), (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1), print {\n .test.-multiOr {\n background: #004700;\n }\n .test.-multiOr::after {\n content: ' = true';\n }\n}\n\n.test.-orPlusCombo::before {\n content: \"mq($MQ-orPlusCombo)\";\n}\n\n@media screen and (min-width: 801px) and (min-height: 801px), screen and (max-width: 1000px) and (min-width: 601px) and (max-aspect-ratio: 2 / 1) and (min-aspect-ratio: 1 / 1) {\n .test.-orPlusCombo {\n background: #004700;\n }\n .test.-orPlusCombo::after {\n content: ' = true';\n }\n}\n\n@media not screen and (max-aspect-ratio: 2 / 1) {\n body {\n color: #000;\n }\n}\n\n.breakpoints {\n padding: 20px;\n border: 2px solid #000;\n}\n\n.breakpoints__size.-minimum::before {\n content: \"BP-minimum: \";\n}\n\n.breakpoints__size.-minimum::after {\n content: \"320px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-small::before {\n content: \"BP-small: \";\n}\n\n.breakpoints__size.-small::after {\n content: \"600px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-medium::before {\n content: \"BP-medium: \";\n}\n\n.breakpoints__size.-medium::after {\n content: \"800px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-large::before {\n content: \"BP-large: \";\n}\n\n.breakpoints__size.-large::after {\n content: \"1000px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n.breakpoints__size.-page::before {\n content: \"BP-page: \";\n}\n\n.breakpoints__size.-page::after {\n content: \"1200px\";\n font-weight: bold;\n font-size: 1.2em;\n}\n\n@media (max-width: 1024px) and (min-width: 601px) {\n .module__element {\n background: red;\n }\n}\n\n@media (max-width: 600px), (min-width: 1025px) {\n .module__element {\n background: blue;\n }\n}\n\n@media (max-width: 1024px) and (min-width: 601px) {\n .module__element--green {\n background: green;\n }\n}\n\n@media (max-width: 600px), (min-width: 1025px) {\n .module__element--green {\n background: grey;\n }\n}\n","//NPM installed things are loaded from this file\r\n\r\n// Normalize Styles\r\n@import 'normalize.css/normalize';\r\n//restores outlines to links for improved accessibility\r\na:active, a:hover { outline-width: 1px; }\r\n\r\n//mq-scss\r\n@import '../../../_mq.scss';\r\n","//This file has been altered.\r\n// The following rule has been removed for the sake of keyboard accessibility\r\n// a:active,\r\n// a:hover {\r\n// outline: 0;\r\n// }\r\n\r\n\r\n/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */\r\n\r\n/**\r\n * 1. Set default font family to sans-serif.\r\n * 2. Prevent iOS and IE text size adjust after device orientation change,\r\n * without disabling user zoom.\r\n */\r\n\r\nhtml {\r\n font-family: sans-serif; /* 1 */\r\n -ms-text-size-adjust: 100%; /* 2 */\r\n -webkit-text-size-adjust: 100%; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove default margin.\r\n */\r\n\r\nbody {\r\n margin: 0;\r\n}\r\n\r\n/* HTML5 display definitions\r\n ========================================================================== */\r\n\r\n/**\r\n * Correct `block` display not defined for any HTML5 element in IE 8/9.\r\n * Correct `block` display not defined for `details` or `summary` in IE 10/11\r\n * and Firefox.\r\n * Correct `block` display not defined for `main` in IE 11.\r\n */\r\n\r\narticle,\r\naside,\r\ndetails,\r\nfigcaption,\r\nfigure,\r\nfooter,\r\nheader,\r\nhgroup,\r\nmain,\r\nmenu,\r\nnav,\r\nsection,\r\nsummary {\r\n display: block;\r\n}\r\n\r\n/**\r\n * 1. Correct `inline-block` display not defined in IE 8/9.\r\n * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.\r\n */\r\n\r\naudio,\r\ncanvas,\r\nprogress,\r\nvideo {\r\n display: inline-block; /* 1 */\r\n vertical-align: baseline; /* 2 */\r\n}\r\n\r\n/**\r\n * Prevent modern browsers from displaying `audio` without controls.\r\n * Remove excess height in iOS 5 devices.\r\n */\r\n\r\naudio:not([controls]) {\r\n display: none;\r\n height: 0;\r\n}\r\n\r\n/**\r\n * Address `[hidden]` styling not present in IE 8/9/10.\r\n * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.\r\n */\r\n\r\n[hidden],\r\ntemplate {\r\n display: none;\r\n}\r\n\r\n/* Links\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove the gray background color from active links in IE 10.\r\n */\r\n\r\na {\r\n background-color: transparent;\r\n}\r\n\r\n// *\r\n// * Improve readability of focused elements when they are also in an\r\n// * active/hover state.\r\n \r\n\r\n//Removing due to causing keyboard accessibility issue\r\n\r\n// a:active,\r\n// a:hover {\r\n// outline: 0;\r\n// }\r\n\r\n\r\n/* Text-level semantics\r\n ========================================================================== */\r\n\r\n/**\r\n * Address styling not present in IE 8/9/10/11, Safari, and Chrome.\r\n */\r\n\r\nabbr[title] {\r\n border-bottom: 1px dotted;\r\n}\r\n\r\n/**\r\n * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nb,\r\nstrong {\r\n font-weight: bold;\r\n}\r\n\r\n/**\r\n * Address styling not present in Safari and Chrome.\r\n */\r\n\r\ndfn {\r\n font-style: italic;\r\n}\r\n\r\n/**\r\n * Address variable `h1` font-size and margin within `section` and `article`\r\n * contexts in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nh1 {\r\n font-size: 2em;\r\n margin: 0.67em 0;\r\n}\r\n\r\n/**\r\n * Address styling not present in IE 8/9.\r\n */\r\n\r\nmark {\r\n background: #ff0;\r\n color: #000;\r\n}\r\n\r\n/**\r\n * Address inconsistent and variable font size in all browsers.\r\n */\r\n\r\nsmall {\r\n font-size: 80%;\r\n}\r\n\r\n/**\r\n * Prevent `sub` and `sup` affecting `line-height` in all browsers.\r\n */\r\n\r\nsub,\r\nsup {\r\n font-size: 75%;\r\n line-height: 0;\r\n position: relative;\r\n vertical-align: baseline;\r\n}\r\n\r\nsup {\r\n top: -0.5em;\r\n}\r\n\r\nsub {\r\n bottom: -0.25em;\r\n}\r\n\r\n/* Embedded content\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove border when inside `a` element in IE 8/9/10.\r\n */\r\n\r\nimg {\r\n border: 0;\r\n}\r\n\r\n/**\r\n * Correct overflow not hidden in IE 9/10/11.\r\n */\r\n\r\nsvg:not(:root) {\r\n overflow: hidden;\r\n}\r\n\r\n/* Grouping content\r\n ========================================================================== */\r\n\r\n/**\r\n * Address margin not present in IE 8/9 and Safari.\r\n */\r\n\r\nfigure {\r\n margin: 1em 40px;\r\n}\r\n\r\n/**\r\n * Address differences between Firefox and other browsers.\r\n */\r\n\r\nhr {\r\n box-sizing: content-box;\r\n height: 0;\r\n}\r\n\r\n/**\r\n * Contain overflow in all browsers.\r\n */\r\n\r\npre {\r\n overflow: auto;\r\n}\r\n\r\n/**\r\n * Address odd `em`-unit font size rendering in all browsers.\r\n */\r\n\r\ncode,\r\nkbd,\r\npre,\r\nsamp {\r\n font-family: monospace, monospace;\r\n font-size: 1em;\r\n}\r\n\r\n/* Forms\r\n ========================================================================== */\r\n\r\n/**\r\n * Known limitation: by default, Chrome and Safari on OS X allow very limited\r\n * styling of `select`, unless a `border` property is set.\r\n */\r\n\r\n/**\r\n * 1. Correct color not being inherited.\r\n * Known issue: affects color of disabled elements.\r\n * 2. Correct font properties not being inherited.\r\n * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.\r\n */\r\n\r\nbutton,\r\ninput,\r\noptgroup,\r\nselect,\r\ntextarea {\r\n color: inherit; /* 1 */\r\n font: inherit; /* 2 */\r\n margin: 0; /* 3 */\r\n}\r\n\r\n/**\r\n * Address `overflow` set to `hidden` in IE 8/9/10/11.\r\n */\r\n\r\nbutton {\r\n overflow: visible;\r\n}\r\n\r\n/**\r\n * Address inconsistent `text-transform` inheritance for `button` and `select`.\r\n * All other form control elements do not inherit `text-transform` values.\r\n * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.\r\n * Correct `select` style inheritance in Firefox.\r\n */\r\n\r\nbutton,\r\nselect {\r\n text-transform: none;\r\n}\r\n\r\n/**\r\n * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`\r\n * and `video` controls.\r\n * 2. Correct inability to style clickable `input` types in iOS.\r\n * 3. Improve usability and consistency of cursor style between image-type\r\n * `input` and others.\r\n */\r\n\r\nbutton,\r\nhtml input[type=\"button\"], /* 1 */\r\ninput[type=\"reset\"],\r\ninput[type=\"submit\"] {\r\n -webkit-appearance: button; /* 2 */\r\n cursor: pointer; /* 3 */\r\n}\r\n\r\n/**\r\n * Re-set default cursor for disabled elements.\r\n */\r\n\r\nbutton[disabled],\r\nhtml input[disabled] {\r\n cursor: default;\r\n}\r\n\r\n/**\r\n * Remove inner padding and border in Firefox 4+.\r\n */\r\n\r\nbutton::-moz-focus-inner,\r\ninput::-moz-focus-inner {\r\n border: 0;\r\n padding: 0;\r\n}\r\n\r\n/**\r\n * Address Firefox 4+ setting `line-height` on `input` using `!important` in\r\n * the UA stylesheet.\r\n */\r\n\r\ninput {\r\n line-height: normal;\r\n}\r\n\r\n/**\r\n * It's recommended that you don't attempt to style these elements.\r\n * Firefox's implementation doesn't respect box-sizing, padding, or width.\r\n *\r\n * 1. Address box sizing set to `content-box` in IE 8/9/10.\r\n * 2. Remove excess padding in IE 8/9/10.\r\n */\r\n\r\ninput[type=\"checkbox\"],\r\ninput[type=\"radio\"] {\r\n box-sizing: border-box; /* 1 */\r\n padding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Fix the cursor style for Chrome's increment/decrement buttons. For certain\r\n * `font-size` values of the `input`, it causes the cursor style of the\r\n * decrement button to change from `default` to `text`.\r\n */\r\n\r\ninput[type=\"number\"]::-webkit-inner-spin-button,\r\ninput[type=\"number\"]::-webkit-outer-spin-button {\r\n height: auto;\r\n}\r\n\r\n/**\r\n * 1. Address `appearance` set to `searchfield` in Safari and Chrome.\r\n * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.\r\n */\r\n\r\ninput[type=\"search\"] {\r\n -webkit-appearance: textfield; /* 1 */\r\n box-sizing: content-box; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove inner padding and search cancel button in Safari and Chrome on OS X.\r\n * Safari (but not Chrome) clips the cancel button when the search input has\r\n * padding (and `textfield` appearance).\r\n */\r\n\r\ninput[type=\"search\"]::-webkit-search-cancel-button,\r\ninput[type=\"search\"]::-webkit-search-decoration {\r\n -webkit-appearance: none;\r\n}\r\n\r\n/**\r\n * Define consistent border, margin, and padding.\r\n */\r\n\r\nfieldset {\r\n border: 1px solid #c0c0c0;\r\n margin: 0 2px;\r\n padding: 0.35em 0.625em 0.75em;\r\n}\r\n\r\n/**\r\n * 1. Correct `color` not being inherited in IE 8/9/10/11.\r\n * 2. Remove padding so people aren't caught out if they zero out fieldsets.\r\n */\r\n\r\nlegend {\r\n border: 0; /* 1 */\r\n padding: 0; /* 2 */\r\n}\r\n\r\n/**\r\n * Remove default vertical scrollbar in IE 8/9/10/11.\r\n */\r\n\r\ntextarea {\r\n overflow: auto;\r\n}\r\n\r\n/**\r\n * Don't inherit the `font-weight` (applied by a rule above).\r\n * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.\r\n */\r\n\r\noptgroup {\r\n font-weight: bold;\r\n}\r\n\r\n/* Tables\r\n ========================================================================== */\r\n\r\n/**\r\n * Remove most spacing between table cells.\r\n */\r\n\r\ntable {\r\n border-collapse: collapse;\r\n border-spacing: 0;\r\n}\r\n\r\ntd,\r\nth {\r\n padding: 0;\r\n}\r\n","/*\r\n\r\nAtom One Dark by Daniel Gamage\r\nOriginal One Dark Syntax theme from https://github.com/atom/one-dark-syntax\r\n\r\nbase: #282c34\r\nmono-1: #abb2bf\r\nmono-2: #818896\r\nmono-3: #5c6370\r\nhue-1: #56b6c2\r\nhue-2: #61aeee\r\nhue-3: #c678dd\r\nhue-4: #98c379\r\nhue-5: #e06c75\r\nhue-5-2: #be5046\r\nhue-6: #d19a66\r\nhue-6-2: #e6c07b\r\n\r\n*/\r\n\r\n.hljs {\r\n display: block;\r\n overflow-x: auto;\r\n padding: 0.5em;\r\n color: #abb2bf;\r\n background: #282c34;\r\n}\r\n\r\n.hljs-comment,\r\n.hljs-quote {\r\n color: #5c6370;\r\n font-style: italic;\r\n}\r\n\r\n.hljs-doctag,\r\n.hljs-keyword,\r\n.hljs-formula {\r\n color: #c678dd;\r\n}\r\n\r\n.hljs-section,\r\n.hljs-name,\r\n.hljs-selector-tag,\r\n.hljs-deletion,\r\n.hljs-subst {\r\n color: #e06c75;\r\n}\r\n\r\n.hljs-literal {\r\n color: #56b6c2;\r\n}\r\n\r\n.hljs-string,\r\n.hljs-regexp,\r\n.hljs-addition,\r\n.hljs-attribute,\r\n.hljs-meta-string {\r\n color: #98c379;\r\n}\r\n\r\n.hljs-built_in,\r\n.hljs-class .hljs-title {\r\n color: #e6c07b;\r\n}\r\n\r\n.hljs-attr,\r\n.hljs-variable,\r\n.hljs-template-variable,\r\n.hljs-type,\r\n.hljs-selector-class,\r\n.hljs-selector-attr,\r\n.hljs-selector-pseudo,\r\n.hljs-number {\r\n color: #d19a66;\r\n}\r\n\r\n.hljs-symbol,\r\n.hljs-bullet,\r\n.hljs-link,\r\n.hljs-meta,\r\n.hljs-selector-id,\r\n.hljs-title {\r\n color: #61aeee;\r\n}\r\n\r\n.hljs-emphasis {\r\n font-style: italic;\r\n}\r\n\r\n.hljs-strong {\r\n font-weight: bold;\r\n}\r\n\r\n.hljs-link {\r\n text-decoration: underline;\r\n}\r\n","\r\n/*================================================*\\\r\n BASE ELEMENT STYLING\r\n//----------------------------------------------------\r\n// This file holds base styling for elements.\r\n// NO CLASSES ALLOWED!\r\n// these are essentially site resets\r\n\\*================================================*/\r\n\r\n* {\r\n &:before, &:after, & {\r\n //Makes fonts smoother\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n font-smoothing: antialiased;\r\n\r\n //supposedly this makes fonts cleaner but it makes fonts not appear in safari\r\n //text-rendering: optimizeLegibility;\r\n\r\n //all elements are given their parents box-sizing\r\n box-sizing: inherit;\r\n }\r\n}\r\n\r\nhtml, body {\r\n //unless set otherwise, all elements will recieve border box box sizing\r\n box-sizing: border-box;\r\n\r\n //required for best scroll animation results\r\n height: 100%;\r\n\r\n //removes default spacing around the edges of the web page\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\nhtml {\r\n //Makes it easier to alter font size with rem's. 1.3rem = 13px\r\n font-size: 62.5%;\r\n}\r\n\r\n//counteracts * margin styling\r\nspan,\r\nem,\r\nstrong,\r\na,\r\nb,\r\ni,\r\nlabel,\r\ninput,\r\ndiv,\r\ntextarea,\r\nselect,\r\nheader,\r\nfooter,\r\naside,\r\ntime,\r\nhtml,\r\nform,\r\nnav,\r\nnav li { margin-top: 0; }\r\n\r\n//Sets default font size for the site to 1.4rem with a 14px backup.\r\n//Setting the font-size using the mixin is the best way to set font size.\r\nbody {\r\n background-color: $CF-body__bg;\r\n position: relative;\r\n margin: 0;\r\n font-size: 16px;\r\n line-height: 1.5;\r\n color: $CF-body__text;\r\n font-family: $font-1;\r\n font-weight: $normal;\r\n}\r\n\r\np, ul, ol {\r\n //margin top becomes the default paragraph spacer\r\n margin: $VG-p__spacing 0;\r\n\r\n //allows body elements to sit hard up against their parent element top and bottom sides\r\n &:first-child { margin-top: 0; }\r\n &:last-child { margin-bottom: 0; }\r\n}\r\n\r\n/*HEADINGS*/\r\nh1, h2, h3, h4, h5, h6 {\r\n font-family: $font-2;\r\n font-weight: $bold;\r\n line-height: 1;\r\n letter-spacing: -0.5px;\r\n margin-bottom: 15px;\r\n margin-top: $VG-p__spacing;\r\n\r\n &:first-child { margin-top: 0; }\r\n &:last-child { margin-bottom: 0; }\r\n + {\r\n p, ul, ol { margin-top: 0; }\r\n }\r\n .-theme--dark & {\r\n color: brand(2);\r\n }\r\n\r\n}\r\nh1 {\r\n font-size: 30px;\r\n text-align: center;\r\n + h2 { margin-top: 30px; }\r\n}\r\nh2 { font-size: 25px; margin-top: 75px; }\r\nh3 { font-size: 20px; }\r\nh4 { font-size: 18px; text-transform: uppercase; }\r\n\r\n\r\na {\r\n text-decoration: none;\r\n color: $CF-links;\r\n transition: 0.3s;\r\n\r\n &:hover, &:focus {\r\n text-decoration: underline;\r\n }\r\n\r\n &[disabled] {\r\n cursor: default;\r\n pointer-events: none;\r\n opacity: 0.2;\r\n\r\n .no-csspointerevents & {\r\n display: none;\r\n }\r\n }\r\n}\r\n\r\n//makes nav default to not having dot points\r\nnav ul { @extend %TK-noDots; }\r\n\r\nlabel, input[type=radio], input[type=checkbox] { cursor: pointer; }\r\n\r\nimg { display: block; max-width: 100%; width: 100%; }\r\n\r\na > img {\r\n transition: 0.3s;\r\n}\r\na:hover, a:focus {\r\n > img { transform: scale(1.05); }\r\n}\r\n\r\nblockquote {\r\n background-color: transparent;\r\n border-left: 0;\r\n border-left: 6px solid #000;\r\n font-style: normal;\r\n margin: 0;\r\n margin-left: 30px;\r\n padding: 55px 25px 40px;\r\n\r\n &:before {\r\n display: none;\r\n }\r\n\r\n p {\r\n font-size: 22px;\r\n line-height: 1.25;\r\n }\r\n}\r\n\r\npre {\r\n padding: 10px 70px 10px 0;\r\n margin-left: -20px;\r\n margin-right: -20px;\r\n font-family: 'Monaco', 'Lucida Console', monospace;\r\n font-size: 13px;\r\n line-height: 20px;\r\n box-shadow: inset 0 0 5px #000;\r\n word-wrap: break-word;\r\n color: #d6d6d6;\r\n background-color: #282c34;\r\n padding: 0;\r\n\r\n &, &.lines {\r\n margin: 0;\r\n padding:{left: 0; right: 0;}\r\n }\r\n\r\n &.lines {\r\n font-size: 12px;\r\n padding: 10px;\r\n float: left;\r\n display: block !important;\r\n box-shadow: none;\r\n color: #d6d6d6;\r\n background-color: #000;\r\n width: 40px;\r\n padding: {top: 7px; bottom: 7px;}\r\n text-align: center !important;\r\n }\r\n\r\n code {\r\n padding: 10px 5px;\r\n font-size: 1em;\r\n }\r\n\r\n .no-flexbox & {\r\n max-width: 780px;\r\n }\r\n}\r\n\r\ncode {\r\n max-width: 100%;\r\n}\r\n\r\np, li, h1, h2, h3, h4, h5 {\r\n code {\r\n background-color: #c5c7cc;\r\n padding: 3px 4px;\r\n font-size: .85em;\r\n }\r\n}\r\n","/////////////////////////////////\r\n// functional color variables //\r\n///////////////////////////////\r\n\r\n//CF- for color-functional-\r\n\r\n$CF-body__text: $CB-grey-x-dark;\r\n$CF-body__bg: #fff;\r\n\r\n$CF-border-1: $CB-grey-light;\r\n$CF-border-2: $CF-body__bg;\r\n$CF-border-3: #d2d2d2;\r\n\r\n$CF-links: brand(1);\r\n$CF-links--hover: brand(2);\r\n\r\n$CF-heading: $CF-body__text;\r\n\r\n$CF-error__text: $CB-red-dim;\r\n$CF-error__bg: $CB-grey-pale;\r\n$CF-error__border: $CF-error__text;\r\n\t$CF-error__text--hover: $CB-red-dim--hover;\r\n\t$CF-error__bg--hover: $CB-grey-pale--hover;\r\n\t$CF-error__border--hover: $CF-error__text--hover;\r\n\r\n$CF-input: $CB-grey-dark;\r\n$CF-input__placeholder: #767676;//#767676 is the lightest possible grey against a white bg that passes AA for small text\r\n$CF-input__border: $CF-border-1;\r\n$CF-input--focus: $CB-grey-pale;\r\n","///*================================================*\\\r\n//\tCOLORS\r\n//----------------------------------------------------\r\n//\tAll color variables are listed here\r\n//*================================================*/\r\n\r\n//CB- for \"Color-Base-\"\r\n\r\n///////////////////////////\r\n// Name color variables //\r\n/////////////////////////\r\n\r\n//changes the intensity of color change on hover\r\n$hoverModifier: 60%;\r\n$hoverModifier--large: 80%;\r\n$hoverModifier--small: 20%;\r\n\r\n//green\r\n$CB-green-light: #b9d48b;\r\n$CB-green-bright: #00C000;\r\n$CB-green-dark: #08705e;//quaternary\r\n\t//green hover states\r\n\t$CB-green-light--hover: shade($CB-green-light, 20%);\r\n\t$CB-green-dark--hover: shade($CB-green-dark, $hoverModifier);\r\n\r\n//aqua\r\n$CB-aqua-light: #7FD6CD;//tertiary\r\n//$CB-aqua-mid: #2590C0;\r\n//$CB-aqua-dim: #1E4E91;\r\n//$CB-aqua-dimmer: #15354A;\r\n//$CB-aqua-dark: #0E283B;\r\n\t//aqua hover states\r\n\t$CB-aqua-light--hover: tint($CB-aqua-light, $hoverModifier);\r\n\t//$CB-aqua-mid--hover: tint($CB-aqua-mid, $hoverModifier);\r\n\t//$CB-aqua-dim--hover: tint($CB-aqua-dim, $hoverModifier);\r\n\t//$CB-aqua-dark--hover: shade($CB-aqua-dark, $hoverModifier);\r\n\r\n//blue\r\n$CB-blue-light: #0CCBEE;\r\n\t$CB-blue-light--hover: tint($CB-blue-light, $hoverModifier);\r\n\r\n//red\r\n//$CB-red-pale: #FFD1D1;\r\n//$CB-red-light: #D76860;\r\n$CB-red-mid: #CF1730; //primary\r\n$CB-red-dim: #B11235;\r\n$CB-red-dark: #5B1223;\r\n\t//red hover states\r\n//\t$CB-red-pale--hover: tint($CB-red-pale, $hoverModifier);\r\n//\t$CB-red-light--hover: tint($CB-red-light, $hoverModifier);\r\n\t$CB-red-mid--hover: $CB-red-dark;\r\n\t$CB-red-dim--hover: shade($CB-red-dim, $hoverModifier);\r\n\t$CB-red-dark--hover: shade($CB-red-dark, $hoverModifier);\r\n\r\n//grey\r\n//$CB-grey-paler: #FAFAFA;\r\n$CB-grey-pale: #F0F0F0;\r\n$CB-grey-light: #cbcbce;\r\n$CB-grey-mid: #898989;\r\n$CB-grey-dim: #555555;\r\n$CB-grey-dark: #231f20;\r\n$CB-grey-x-dark: #000;//secondary\r\n\t//grey hover states\r\n\t$CB-grey-pale--hover: shade($CB-grey-pale, $hoverModifier);\r\n\t$CB-grey-light--hover: shade($CB-grey-light, $hoverModifier);\r\n\t$CB-grey-mid--hover: $CB-grey-x-dark;\r\n\t$CB-grey-dim--hover: tint($CB-grey-dim, $hoverModifier);\r\n\t$CB-grey-dark--hover: tint($CB-grey-dark, $hoverModifier);\r\n\t$CB-grey-x-dark--hover: tint($CB-grey-x-dark, $hoverModifier);\r\n","// Font weights (based on Google Fonts)\r\n//$thin: 100;\r\n//$light: 300;\r\n$normal: 400;\r\n//$medium: 500;\r\n//$semi-bold: 600;\r\n$bold:\t700;\r\n//$extra-bold: 800;\r\n//$ultra: 900;\r\n","/////////////////////////////\r\n// global value variables //\r\n///////////////////////////\r\n//V- for value-\r\n\r\n$VG-p__spacing : 25px;\r\n\r\n$VG-common__shadow: 0 2px 5px rgba(#0f134a,0.2);\r\n$VG-common__radius: 5px;\r\n\r\n$VG-border-1: 1px solid $CF-border-1;\r\n$VG-border-2: 1px solid $CF-border-2;\r\n$VG-border-dashed: 1px dashed $CB-grey-light;\r\n\r\n//when the design meets the edge of the screen,\r\n//this will determine how much space there is between the text and the edge of the screen\r\n$VG-screen__padding: 20px;\r\n\r\n//The height of the mobile toolbar\r\n$VG-toolbar__height: 55px;\r\n","//easily apply customizable background colors based on brand colors\r\n.-color {\r\n\t@for $i from 1 through length($brand) {\r\n\t\t&-#{$i} {\r\n\t\t\tbackground-color: brand($i);\r\n\r\n\t\t\t&, * { color: brand($i, 'text'); }\r\n\t\t\t&, svg { fill: brand($i, 'text'); }\r\n\t\t}\r\n\r\n\t\t&-text-#{$i} {\r\n\t\t\t&, * {\r\n\t\t\t\tcolor: brand($i);\r\n\t\t\t\tfill: brand($i);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","//changes the intensity of color change on hover\r\n$V-hoverModifier: 60%;\r\n\r\n//lists the primary brand colors of the site.\r\n//Greys do not belong in this list unless it is a MAJOR brand color\r\n$brand: (\r\n\t//*Main color*/\r\n\tcolor: $CB-red-mid,\r\n\r\n\t//*Most likely hover state color for the main color*/\r\n\thover: $CB-red-mid--hover,\r\n\r\n\t/*if set as a background color, the text inside will most likely be this color*/\r\n\ttext: #fff,\r\n),\r\n\r\n//*Second most prominent brand color etc. */\r\n(\r\n\tcolor: $CB-green-light,\r\n\thover: $CB-green-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-aqua-light,\r\n\thover: $CB-aqua-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-blue-light,\r\n\thover: $CB-blue-light--hover,\r\n\ttext: #000,\r\n),\r\n(\r\n\tcolor: $CB-green-dark,\r\n\thover: $CB-green-dark--hover,\r\n\ttext: #fff,\r\n);\r\n\r\n\r\n//Get prominent colors easily\r\n// usage standard: brand(1);\r\n// usage for hover state: brand(1, 'hover')\r\n// usage for partner: brand(1, 'partner')\r\n@function brand($prominance, $type: color){\r\n\t$colorGroup: nth($brand,$prominance);\r\n\t@if (not map-has-key($colorGroup, $type)){\r\n\t\t@warn '\"#{$type}\" is not a valid color type for \"brand(#{$prominance})\"';\r\n\t\t$type: color;\r\n\t}\r\n\t@return map-get($colorGroup, $type);\r\n}\r\n\r\n\r\n\r\n/*\r\n//apply color variations and overrides to specific modules more easily for stronger color application\r\n\r\n//usage:\r\n.module {\r\n\t@include brandColors((\r\n\t\tborder-left-color : 'text',\r\n\t\toutline-color: 'color'\r\n\t));\r\n}\r\n\r\n//equivalent to:\r\n\r\n.color-1 .module {\r\n\tborder-left-color : brand(1,'text');\r\n\toutline-color : brand(1);\r\n}\r\n.color-2 .module {\r\n\tborder-left-color : brand(2,'text');\r\n\toutline-color : brand(2);\r\n}\r\n\r\netc.\r\n\r\n*/\r\n\r\n@mixin brandColors($rules){\r\n\t@for $i from 1 through length($brand) {\r\n\t\t.color-#{$i} & {\r\n\t\t\t@each $attribute, $colorType in $rules {\r\n\t\t\t\t#{$attribute} : brand($i, $colorType);\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}\r\n\r\n","\r\n%TK-noDots { list-style: none; margin: 0; padding: 0; }\r\n\r\n//these are the same styles as drupal\r\n%TK-visHid {position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);word-wrap:normal;}\r\n\r\n.TK {\r\n\t//remove dot points from a list\r\n\t&-noDots { @extend %TK-noDots; }\r\n\r\n\t//HIDE the element if JS is DISABLED,\r\n\t//SHOW the element if JS is ENABLED\r\n\t&-noJsHide {\r\n\t\t.no-js & { display: none; }\r\n\t}\r\n\r\n\t&-jsHide {\r\n\t\t.js & { display: none!important; }\r\n\t\t.no-js & { display: block; }\r\n\t}\r\n\r\n\t//A link that only appears when the user focuses on it\r\n\t&-skipLink {\r\n\t\tborder:0;\r\n\t\tclip:rect(0 0 0 0);\r\n\t\twidth:0;\r\n\t\theight:0;\r\n\t\tpadding:0;\r\n\t\toverflow:hidden;\r\n\t\tposition:absolute;\r\n\t\topacity: 0;\r\n\r\n\t\t&:active, &:focus {\r\n\t\t\tclip: auto;\r\n\t\t\twidth:auto;\r\n\t\t\theight:auto;\r\n\t\t\tposition: static;\r\n\t\t\topacity: 1;\r\n\t\t}\r\n\t}\r\n\r\n}","\r\n//this module wraps around text spat out by a CMS editor.\r\n//Elements inside this module can't have classes attatched\r\n\r\n$C-numbers: brand(1);//$CB-blue-dim;\r\n$C-dots: $C-numbers;\r\n\r\n.bodyContent {\r\n padding-bottom: 100px;\r\n\r\n\t&, & td {\r\n\r\n\t\ttext-align: left;\r\n\r\n\t\tstrong, b { font-weight: $bold; }\r\n\r\n\t\tsup, sub {\r\n\t\t\tfont-size: 0.6em;\r\n\t\t}\r\n\r\n\t\ta:not(.btn) {\r\n\t\t\tfont-weight: $normal;\r\n\t\t\ttext-decoration: underline;\r\n\t\t\tcolor: $CF-links;\r\n\t\t\t&:hover, &:focus {\r\n\t\t\t\ttext-decoration: none;\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t//custom dot points do not appear in IE8 or print\r\n\t\t// @media screen and (min-width: 0px) {\r\n\t\t\tul, ol {\r\n\t\t\t\tul, ol {\r\n\t\t\t\t\tmargin: 0;\r\n\t\t\t\t}\r\n\t\t\t\tli {\r\n\t\t\t\t\tmargin-top: 10px;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> ul, > ol {\r\n\t\t\t\t&:not(.TK-noDots) {\r\n\t\t\t\t\t&:not(:first-child){\r\n\t\t\t\t\t\tmargin-top: $VG-p__spacing;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t> li {\r\n\t\t\t\t\t\tmargin: 0;\r\n\t\t\t\t\t\tpadding-bottom: 11px;\r\n\t\t\t\t\t\t&:first-child {\r\n\t\t\t\t\t\t\tborder-top: none;\r\n\t\t\t\t\t\t\tpadding-top: 0;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t&:last-child {\r\n\t\t\t\t\t\t\tpadding-bottom: 0;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tul:not(.TK-noDots) {\r\n\t\t\t\tpadding: 0;\r\n\t\t\t\tli {\r\n\t\t\t\t\tlist-style: none;\r\n\t\t\t\t\tpadding-left: 25px;\r\n\t\t\t\t\t//padding: 5px 5px 5px 25px;\r\n\t\t\t\t\tposition: relative;\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tcontent: '';\r\n\t\t\t\t\t\tdisplay: block;\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\ttop: 15px;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\t> ul:not(.TK-noDots) {\r\n\t\t\t\t> li {\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\t\theight: 6px;\r\n\t\t\t\t\t\twidth: 6px;\r\n\t\t\t\t\t\tbackground: $C-dots;\r\n\t\t\t\t\t\ttop: 6px;\r\n\t\t\t\t\t}\r\n\t\t\t\t\t> ul > li {\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\theight: 2px;\r\n\t\t\t\t\t\t\twidth: 10px;\r\n\t\t\t\t\t\t\tbackground: $C-dots;\r\n\t\t\t\t\t\t\ttop: 9px;\r\n\t\t\t\t\t\t}\r\n\r\n\t\t\t\t\t\t> ul > li {\r\n\t\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t\tborder-radius: 50%;\r\n\t\t\t\t\t\t\t\theight: 6px;\r\n\t\t\t\t\t\t\t\twidth: 6px;\r\n\t\t\t\t\t\t\t\tborder: 1px solid $C-dots;\r\n\t\t\t\t\t\t\t\ttop: 5px;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\r\n\t\t\tol:not(.TK-noDots) {\r\n\t\t\t\tcounter-reset: li;\r\n\t\t\t\tlist-style: none;\r\n\t\t\t\tpadding-left: 0;\r\n\t\t\t\tli {\r\n\t\t\t\t\tpadding-left: 25px;\r\n\t\t\t\t\tposition: relative;\r\n\r\n\t\t\t\t\t&:before {\r\n\t\t\t\t\t\tcontent:counter(li)'.'; //* Use the counter as content */\r\n\t\t\t\t\t\tcounter-increment:li; //* Increment the counter by 1 */\r\n\t\t\t\t\t\tposition: absolute;\r\n\t\t\t\t\t\tleft: 0;\r\n\t\t\t\t\t\tfont-weight: $bold;\r\n\t\t\t\t\t\tcolor: $C-numbers;\r\n\t\t\t\t\t}\r\n\t\t\t\t\tol li {\r\n\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\tcontent:counter(li,lower-alpha)'.';\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tol li {\r\n\t\t\t\t\t\t\t&:before {\r\n\t\t\t\t\t\t\t\tcontent:counter(li,lower-roman)'.';\r\n\t\t\t\t\t\t\t\tleft: auto;\r\n\t\t\t\t\t\t\t\tright: 100%;\r\n\t\t\t\t\t\t\t\tmargin-right: -15px;\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t// }\r\n\r\n\t\t> blockquote {\r\n\r\n\t\t}\r\n\r\n\t\timg { display: inline-block; }\r\n\r\n\t}\r\n}\r\n","\r\n.btn {\r\n font-family: $font-2;\r\n font-weight: $bold;\r\n font-size: 14px;\r\n background-color: $CB-red-dark;\r\n color: #fff;\r\n transition: 0.3s;\r\n padding: 15px 20px;\r\n display: inline-block;\r\n transition: all 0.25s ease-in-out;\r\n position: relative;\r\n text-align: left;\r\n line-height: 1;\r\n letter-spacing: 0.5px;\r\n border: 3px solid brand(1);\r\n text-decoration: none !important;\r\n\r\n &:hover {\r\n background-color: #000;\r\n color: #fff;\r\n\r\n svg {\r\n fill: brand(1);\r\n }\r\n }\r\n\r\n\tsvg {\r\n\t\tfill: brand(1);\r\n\t\t@include centered(v);\r\n\t\tright: 20px;\r\n\t\theight: 10px;\r\n\t\twidth: 10px;\r\n\t\tfill: transparent;\r\n\t\tfill: brand(1, 'text');\r\n\t\tfill-width: 15px;\r\n\t\ttransition: 0.3s;\r\n\t}\r\n\r\n\t&.-hasIcon {\r\n\t\tpadding-right: 55px;\r\n\t}\r\n\r\n &.-active {\r\n background-color: brand(2);\r\n color: brand(2, text);\r\n &:hover {\r\n background-color: brand(2, hover);\r\n }\r\n }\r\n\r\n &.-inactive {\r\n background-color: lightgray;\r\n color: brand(2, text);\r\n &:hover {\r\n background-color: gray;\r\n }\r\n }\r\n\r\n}\r\n","//CENTER AN ELEMENT BOTH VERTICALLY AND HORIZONTALLY (or only one of the two)\r\n//Element must have a set width and height to work\r\n\r\n//usage:\r\n//@include MG-centered; //center both horizontally and vertically\r\n//@include MG-centered(v); // only center vertically\r\n//@include MG-centered(h); // only center horizontally\r\n\r\n@mixin centered($type: both, $isModern: 'not-modern') {\r\n\r\n\tposition: absolute;\r\n\r\n\t@if ($isModern == 'modern') {\r\n\t\t@if ($type == both) {\r\n\t\t\ttop: 50%;\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateY(-50%) translateX(-50%);\r\n\t\t} @else if ($type == v) {\r\n\t\t\ttop: 50%;\r\n\t\t\ttransform: translateY(-50%);\r\n\t\t} @else if ($type == h) {\r\n\t\t\tleft: 50%;\r\n\t\t\ttransform: translateX(-50%);\r\n\t\t}\r\n\t} @else {\r\n\t\t@if ($type == both) {\r\n\t\t\ttop: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tmargin: auto;\r\n\t\t} @else if ($type == v) {\r\n\t\t\ttop: 0;\r\n\t\t\tbottom: 0;\r\n\t\t\tmargin: auto 0;\r\n\t\t} @else if ($type == h) {\r\n\t\t\tleft: 0;\r\n\t\t\tright: 0;\r\n\t\t\tmargin: 0 auto;\r\n\t\t}\r\n\t}\r\n}\r\n","// Add percentage of white to a color\r\n//https://gist.github.com/benfrain/7545629\r\n@function tint($color, $percent){\r\n\t@return mix(white, $color, $percent);\r\n}\r\n\r\n// Add percentage of black to a color\r\n//https://gist.github.com/benfrain/7545629\r\n@function shade($color, $percent){\r\n\t@return mix(black, $color, $percent);\r\n}\r\n\r\n//Generate a grey color based on a percentage of black\r\n@function grey($percentage){\r\n\t@return mix(#000, #fff, $percentage);\r\n}",".demo {\r\n\tpadding: 5px;\r\n\tborder: 2px solid #000;\r\n\r\n\t&__segment {\r\n\t\tposition: relative;\r\n\t\tmargin-top: 35px;\r\n\t\tmargin-bottom: 10px;\r\n\t\t&:last-child, &.grid__cell {\r\n\t\t\tmargin-bottom: 0;\r\n\t\t}\r\n\t\t&:before {\r\n\t\t\tposition: absolute;\r\n\t\t\tbottom: 100%;\r\n\t\t\tleft: 0;\r\n\t\t\tpadding: 5px 10px;\r\n\t\t\tbackground: #000;\r\n\t\t\tcolor: #fff;\r\n\t\t\tborder-radius: 5px 5px 0 0;\r\n\t\t}\r\n\t}\r\n\t&__summary {\r\n\t\tbackground-color: #CDDEC4;\r\n\t\tpadding: 20px;\r\n\t\tmargin-bottom: 10px;\r\n\t\tmargin-top: 60px;\r\n\t\t&:before {\r\n\t\t\tcontent: 'Summary';\r\n\t\t}\r\n\r\n\t\t+ .demo__result {\r\n\t\t\tmargin-top: 45px;\r\n\t\t}\r\n\t}\r\n\t&__result {\r\n\t\t&:before {\r\n\t\t\tcontent: 'Example';\r\n\r\n\t\t\t.-false & {\r\n\t\t\t\tcontent: 'Not Gutter Grid'\r\n\t\t\t}\r\n\t\t}\r\n\t\t.grid {\r\n\t\t\tpadding: 0;\r\n\t\t}\r\n\r\n\t\t.grid__cell, .mixin__cell {\r\n\t\t\tmin-height: 100px;\r\n\t\t\tmargin: 0;\r\n\r\n\t\t\t.-noHeight & {\r\n\t\t\t\tmin-height: 0;\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n\t&__markup {\r\n\t\tbackground-color: #282c34;\r\n\t\tposition: relative;\r\n\t\tpadding-left: 40px;\r\n\t\tdisplay: flex;\r\n &.html:before {\r\n content: 'HTML';\r\n }\r\n\t\t&.scss:before {\r\n\t\t\tcontent: 'Sass';\r\n\t\t}\r\n &.js:before {\r\n content: 'JavaScript';\r\n }\r\n &.json:before {\r\n content: 'JSON';\r\n }\r\n\r\n pre {\r\n display: flex;\r\n flex-grow: 1;\r\n &, &.lines {\r\n margin: 0;\r\n }\r\n\r\n &.lines {\r\n overflow: hidden;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n bottom: 0;\r\n background: #000;\r\n padding-top: 12px;\r\n }\r\n }\r\n\r\n code {\r\n margin-top: -20px;\r\n padding: {bottom: 10px; top: 10px; }\r\n }\r\n\t}\r\n\r\n\t.example {\r\n\t\tul, li {\r\n\t\t\tlist-style: none;\r\n\t\t\tpadding-left: 0 !important;\r\n\t\t}\r\n\t}\r\n}\r\n",".header {\r\n margin-bottom: 30px;\r\n h1 {\r\n margin: 50px 0 10px;\r\n }\r\n\r\n .version {\r\n text-align: center;\r\n font-style: italic;\r\n margin-bottom: 10px;\r\n }\r\n}\r\n","// pagelayout styles\r\n.pageContainer {\r\n\t//to be used as a parent to pageWidth;\r\n\r\n\tpadding: {\r\n\t\tleft: $VG-screen__padding !important;\r\n\t\tright: $VG-screen__padding !important;\r\n\t}\r\n\r\n\t&.-wide {\r\n\t\tpadding: {\r\n\t\t\tleft: 0 !important;\r\n\t\t\tright: 0 !important;\r\n\t\t};\r\n\t}\r\n\r\n\t//Styles the element to take up the max-width of the design\r\n\t&__width {\r\n\t\t@include clearfix;\r\n\r\n\t\tmargin:0 auto;\r\n\t\tmax-width: $BP-page;\r\n\t\tmin-width: $BP-minimum - ($VG-screen__padding * 2);\r\n\t\tdisplay: block;\r\n\t\tpointer-events: auto;\r\n\t\twidth: 100%;\r\n\r\n\t\t.-wide & {\r\n\t\t\tmax-width: $BP-page + ($VG-screen__padding * 2);\r\n\t\t}\r\n\r\n\t\t.-thin & {\r\n\t\t\tmax-width: $BP-page - ($VG-screen__padding * 2);\r\n\t\t}\r\n\t}\r\n}\r\n","@mixin clearfix(){\r\n\t&:after {\r\n\t\tdisplay: block;\r\n\t\tcontent: '';\r\n\t\tclear: both;\r\n\t}\r\n}","\r\n.tabs {\r\n\tpadding-top: 1px;\r\n\t&__link {\r\n\t\ttext-align: center;\r\n\t\ttext-transform: capitalize;\r\n\t}\r\n\r\n\t&__content {\r\n\t\t.js & {\r\n\t\t\tdisplay: none;\r\n\t\t}\r\n\t}\r\n\r\n\t.no-flexbox & {\r\n\t\twidth: 780px;\r\n\t}\r\n}\r\n","$red: #6D0808;\r\n$green: #004700;\r\n\r\n.tests {\r\n\tdisplay: grid;\r\n\tgrid-template-columns: minmax(0,1fr);\r\n\tgrid-gap: 20px;\r\n}\r\n\r\n@mixin isActive {\r\n\tbackground: $green;\r\n\t&::after { content: ' = true'; }\r\n}\r\n\r\n.test {\r\n\tpadding: 30px;\r\n\tborder: 2px solid #000;\r\n\tbackground: $red;\r\n\tdisplay: flex;\r\n\talign-items: center;\r\n\tjustify-content: center;\r\n\tmargin-bottom: 20px;\r\n\r\n\th3 {\r\n\t\tmargin-bottom: 0;\r\n\t}\r\n\r\n\t&::before, &::after {\r\n\t\tcolor: #fff;\r\n\t\twhite-space: pre;\r\n\t}\r\n\r\n\t&::before {\r\n\t\tfont-size: 20px;\r\n\t\t//Use \"\\A\" to create new lines\r\n\t}\r\n\r\n\t&::after {\r\n\t\tcontent: ' = false';\r\n\t}\r\n\r\n\t// =====\r\n\t// WIDTH\r\n\t// =====\r\n\r\n\t&.-max {\r\n\t\t&::before { content: 'mq(max, #{$BP-medium})'; }\r\n\t\t@include mq(max, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\t&.-maxWidth {\r\n\t\t&::before { content: 'mq(max-width, #{$BP-medium})'; }\r\n\t\t@include mq(max-width, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxVar {\r\n\t\t$MQ-maxVar: (max, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-maxVar)'; }\r\n\t\t@include mq($MQ-maxVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-min {\r\n\t\t&::before { content: 'mq(min, #{$BP-medium})'; }\r\n\t\t@include mq(min, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minWidth {\r\n\t\t&::before { content: 'mq(min-width, #{$BP-medium})'; }\r\n\t\t@include mq(min-width, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minVar {\r\n\t\t$MQ-minVar: (min, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-minVar)'; }\r\n\t\t@include mq($MQ-minVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-inside {\r\n\t\t&::before { content: 'mq(inside, #{$BP-medium}, #{$BP-small})'; }\r\n\t\t@include mq(inside, $BP-medium, $BP-small) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideWidth {\r\n\t\t&::before { content: 'mq(inside-width, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(inside-width, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideVar {\r\n\t\t$MQ-insideVar: (inside, $BP-medium, $BP-small);\r\n\t\t&::before { content: 'mq($MQ-insideVar)'; }\r\n\t\t@include mq($MQ-insideVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outside {\r\n\t\t&::before { content: 'mq(outside, #{$BP-medium}, #{$BP-small})'; }\r\n\t\t@include mq(outside, $BP-medium, $BP-small) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideWidth {\r\n\t\t&::before { content: 'mq(outside-width, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(outside-width, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideVar {\r\n\t\t$MQ-outsideVar: (outside, $BP-medium, $BP-small);\r\n\t\t&::before { content: 'mq($MQ-outsideVar)'; }\r\n\t\t@include mq($MQ-outsideVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// HEIGHT\r\n\t// ======\r\n\r\n\t&.-maxHeight {\r\n\t\t&::before { content: 'mq(max-height, #{$BP-medium})'; }\r\n\t\t@include mq(max-height, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxHeightVar {\r\n\t\t$MQ-maxHeightVar: (max-height, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-maxHeightVar)'; }\r\n\t\t@include mq($MQ-maxHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minHeight {\r\n\t\t&::before { content: 'mq(min-height, #{$BP-medium})'; }\r\n\t\t@include mq(min-height, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minHeightVar {\r\n\t\t$MQ-minHeightVar: (min-height, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-minHeightVar)'; }\r\n\t\t@include mq($MQ-minHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideHeight {\r\n\t\t&::before { content: 'mq(inside-height, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(inside-height, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideHeightVar {\r\n\t\t$MQ-insideHeightVar: (inside-height, $BP-small, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-insideHeightVar)'; }\r\n\t\t@include mq($MQ-insideHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideHeight {\r\n\t\t&::before { content: 'mq(outside-height, #{$BP-small}, #{$BP-medium})'; }\r\n\t\t@include mq(outside-height, $BP-small, $BP-medium) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideHeightVar {\r\n\t\t$MQ-outsideHeightVar: (outside-height, $BP-small, $BP-medium);\r\n\t\t&::before { content: 'mq($MQ-outsideHeightVar)'; }\r\n\t\t@include mq($MQ-outsideHeightVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// RATIO\r\n\t// ======\r\n\r\n\t&.-ratio {\r\n\t\t&::before { content: 'mq(ratio, \"2 / 1\")'; }\r\n\t\t@include mq(ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-ratioVar {\r\n\t\t$MQ-ratioVar: (ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-ratioVar)'; }\r\n\t\t@include mq($MQ-ratioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minRatio {\r\n\t\t&::before { content: 'mq(min-ratio, \"2 / 1\")'; }\r\n\t\t@include mq(min-ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-minRatioVar {\r\n\t\t$MQ-minRatioVar: (min-ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-minRatioVar)'; }\r\n\t\t@include mq($MQ-minRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxRatio {\r\n\t\t&::before { content: 'mq(max-ratio, \"2 / 1\")'; }\r\n\t\t@include mq(max-ratio, \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-maxRatioVar {\r\n\t\t$MQ-maxRatioVar: (max-ratio, \"2 / 1\");\r\n\t\t&::before { content: 'mq($MQ-minRatioVar)'; }\r\n\t\t@include mq($MQ-maxRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideRatio {\r\n\t\t&::before { content: 'mq(inside-ratio, \"2 / 1\", \"1 / 1\")'; }\r\n\t\t@include mq(inside-ratio, \"2 / 1\", \"1 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-insideRatioVar {\r\n\t\t$MQ-insideRatioVar: (inside-ratio, \"2 / 1\", \"1 / 1\");\r\n\t\t&::before { content: 'mq($MQ-insideRatioVar)'; }\r\n\t\t@include mq($MQ-insideRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideRatio {\r\n\t\t&::before { content: 'mq(outside-ratio, \"1 / 1\", \"2 / 1\")'; }\r\n\t\t@include mq(outside-ratio, \"1 / 1\", \"2 / 1\") {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-outsideRatioVar {\r\n\t\t$MQ-outsideRatioVar: (outside-ratio, \"2 / 1\", \"1 / 1\");\r\n\t\t&::before { content: 'mq($MQ-outsideRatioVar)'; }\r\n\t\t@include mq($MQ-outsideRatioVar) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround1 {\r\n\t\t//equivalent to (min-ratio, '2 / 1') but without the 1px sour spot\r\n\t\t$MQ-exactRatioWorkAround1: (max-ratio, '2 / 1', 'not');\r\n\t\t&::before { content: 'mq($MQ-exactRatioWorkAround1)'; }\r\n\t\t@include mq($MQ-exactRatioWorkAround1) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround2 {\r\n\t\t//Exactly the same as above but formatted differently\r\n\t\t$MQ-exactRatioWorkAround2: 'not' plus (max-ratio, '2 / 1');\r\n\t\t&::before { content: 'mq($MQ-exactRatioWorkAround2)'; }\r\n\t\t@include mq($MQ-exactRatioWorkAround2) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-exactRatioWorkAround3 {\r\n\t\t//The same again this time inline\r\n\t\t&::before { content: \"mq(max-ratio, '2 / 1', 'not')\"; }\r\n\t\t@include mq(max-ratio, '2 / 1', 'not') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t// ======\r\n\t// MEDIA\r\n\t// ======\r\n\r\n\t&.-simpleMedia {\r\n\t\t&::before { content: \"mq(min, #{$BP-medium}, 'screen')\"; }\r\n\t\t@include mq(min, $BP-medium, 'screen') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-notMedia {\r\n\t\t&::before { content: \"mq(min, #{$BP-medium}, 'not')\"; }\r\n\t\t@include mq(min, $BP-medium, 'not') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-onlyMedia {\r\n\t\t&::before { content: \"mq('screen')\"; }\r\n\t\t@include mq('screen') {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\r\n\t//- =====\r\n\t//- PLUS\r\n\t//- =====\r\n\r\n\t&.-simplePlus {\r\n\t\t$MQ-simplePlus: (min-width, $BP-medium) plus (min-height, 600px);\r\n\t\t&::before { content: \"mq($MQ-simplePlus)\"; }\r\n\t\t@include mq($MQ-simplePlus) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-inlinePlus {\r\n\t\t$MQ-simplePlus: (min-width, $BP-medium) plus (min-height, 600px);\r\n\t\t&::before { content: \"mq((min-width, #{$BP-medium}) plus (min-height, 600px))\"; }\r\n\t\t@include mq((min-width, $BP-medium) plus (min-height, 600px)) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-mediaOnlyPlus {\r\n\t\t&::before { content: \"mq('screen' plus (min, #{$BP-medium}))\"; }\r\n\t\t@include mq('screen' plus (min, $BP-medium)) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-complexPlus {\r\n\t\t$MQ-complexPlus: (inside-width, $BP-small, $BP-medium, 'print') plus (inside-ratio, '2/1', '1/1');\r\n\t\t&::before { content: \"mq($MQ-complexPlus)\"; }\r\n\t\t@include mq($MQ-complexPlus) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-ignoredMediaType {\r\n\t\t$MQ-ignoredMediaType: (inside-width, $BP-small, $BP-medium) plus (inside-ratio, '2/1', '1/1', 'print');\r\n\t\t&::before { content: \"mq($MQ-ignoredMediaType)\"; }\r\n\t\t@include mq($MQ-ignoredMediaType) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-multiPlus {\r\n\t\t$MQ-multiPlus: (\r\n\t\t\t('screen') plus\r\n\t\t\t(min-width, $BP-medium) plus\r\n\t\t\t(min-height, 400px) plus\r\n\t\t\t(inside, $BP-small, $BP-large) plus\r\n\t\t\t(inside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t&::before { content: \"mq($MQ-multiPlus)\"; }\r\n\r\n\t\t@include mq($MQ-multiPlus) {\r\n\t\t\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t//- =====\r\n\t//- OR\r\n\t//- =====\r\n\r\n\t&.-simpleOr {\r\n\t\t$MQ-simpleOr: (\r\n\t\t\t(min-width, $BP-medium),\r\n\t\t\t(min-height, 800px)\r\n\t\t);\r\n\t\t&::before { content: \"mq($MQ-simpleOr)\"; }\r\n\t\t@include mq($MQ-simpleOr) {\r\n\t\t}\r\n\t}\r\n\r\n\t&.-complexOr {\r\n\t\t&::before { content: \"mq($MQ-complexOr)\"; }\r\n\t\t$MQ-complexOr: (\r\n\t\t\t(inside, $BP-small, $BP-medium, 'screen'),\r\n\t\t\t(outside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t@include mq($MQ-complexOr) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-multiOr {\r\n\t\t&::before { content: \"mq($MQ-multiOr)\"; }\r\n\t\t$MQ-multiOr: (\r\n\t\t\t(min-width, $BP-medium, 'screen'),\r\n\t\t\t(min-height, 800px),\r\n\t\t\t(inside, $BP-small, $BP-large),\r\n\t\t\t(inside-ratio, '2/1', '1/1'),\r\n\t\t\t('print')\r\n\t\t);\r\n\t\t@include mq($MQ-multiOr) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n\t&.-orPlusCombo {\r\n\t\t&::before { content: \"mq($MQ-orPlusCombo)\"; }\r\n\t\t$MQ-orPlusCombo: (\r\n\t\t\t(min-width, $BP-medium, 'screen') plus (min-height, 800px),\r\n\t\t\t'screen' plus (inside, $BP-small, $BP-large) plus (inside-ratio, '2/1', '1/1')\r\n\t\t);\r\n\t\t@include mq($MQ-orPlusCombo) {\r\n\t\t\t@include isActive;\r\n\t\t}\r\n\t}\r\n\r\n}\r\n\r\n@include mq('not' plus (max-ratio, '2 / 1')) {\r\n\tbody { color: #000; }\r\n}\r\n\r\n\r\n.breakpoints {\r\n\tpadding: 20px;\r\n\tborder: 2px solid #000;\r\n\r\n\t&__size {\r\n\t\t@each $name, $value in $breakpoints {\r\n\t\t\t&.-#{$name} {\r\n\t\t\t\t&::before {\r\n\t\t\t\t\tcontent: 'BP-#{$name}: ';\r\n\t\t\t\t}\r\n\t\t\t\t&::after {\r\n\t\t\t\t\tcontent: '#{$value}';\r\n\t\t\t\t\tfont-weight: bold;\r\n\t\t\t\t\tfont-size: 1.2em;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\t}\r\n}","$mediaQuery: ();\r\n\r\n$mq-ems: false !default;\r\n$mq-em-base: 16px !default;\r\n$mq-debug: false !default;\r\n\r\n@import '_functions';\r\n\r\n@function mediaType($mediaType: false, $hasAnd: true){\r\n\t$media: '';\r\n\t$mediaType: if($mediaType == 'not', 'not screen', $mediaType);\r\n\t@if ($mediaType){\r\n\t\t$media: if($hasAnd, $mediaType + ' and ', $mediaType);\r\n\t}\r\n\t@return $media;\r\n}\r\n\r\n@function isRatio($string){\r\n\t@if (type-of($string) == 'string' and $string != 'plus'){\r\n\t\t@if (str-index($string, \"/\")){\r\n\t\t\t@return true;\r\n\t\t}\r\n\t}\r\n\t@return false;\r\n}\r\n\r\n@function isMedia($string){\r\n\t@return type-of($string) == 'string' and $string != 'plus' and not isRatio($string);\r\n}\r\n\r\n@function calculateMQ($range, $breakpoint_1: null, $breakpoint_2: null, $mediaType: false, $debug: $mq-debug){\r\n\r\n\t$swap-values: false;\r\n\r\n\t$mediaTypeString: '' + $mediaType + '';\r\n\r\n\t$invalidMediaType:\r\n\t\t($mediaType != false) and (\r\n\t\t\t(type-of($mediaType) == 'number') or\r\n\t\t\t(str-index($mediaTypeString, '/') != null)\r\n\t\t);\r\n\r\n\t@if ($invalidMediaType == true){\r\n\t\t@error '\"'+$mediaType+'\" is not a valid media type';\r\n\t}\r\n\r\n\t@if ($range == null) {\r\n\t\t@return $mediaType;\r\n\t}\r\n\r\n\t@if ($breakpoint_2 != null){\r\n\r\n\t\t@if (isRatio($breakpoint_1)){\r\n\r\n\t\t\t$A1: get-start($breakpoint_1);\r\n\t\t\t$A2: get-end($breakpoint_1);\r\n\r\n\t\t\t$B1: get-start($breakpoint_2);\r\n\t\t\t$B2: get-end($breakpoint_2);\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug range_numbers \"('A1/A2', 'B1/B2')\" (A1: $A1, A2: $A2, B1: $B1, B2: $B2);\r\n\t\t\t}\r\n\r\n\t\t\t$swap-values: $A1 / $A2 < $B1 / $B2;\r\n\t\t} @else {\r\n\t\t\t$swap-values: $breakpoint_1 < $breakpoint_2;\r\n\t\t}\r\n\r\n\t\t//Swaps the breakpoint_s around\r\n\t\t@if ($swap-values){\r\n\t\t\t$temp: $breakpoint_1;\r\n\t\t\t$breakpoint_1: $breakpoint_2;\r\n\t\t\t$breakpoint_2: $temp;\r\n\t\t}\r\n\r\n\t} @else {\r\n\t\t$breakpoint_2: 0;\r\n\t}\r\n\r\n\t$mediaString: '';\r\n\r\n\t@if ($range == 'orientation'){\r\n\t\t@if ($breakpoint_1 != 'landscape' and $breakpoint_1 != 'portrait'){\r\n\t\t\t@error '\"orientation\" range only accepts the values \"landscape\" and \"portrait\". Currently providing the value \"#{$breakpoint_1}\".';\r\n\t\t}\r\n\t}\r\n\r\n\t@if ($debug){\r\n\t\t@debug calculateMQ (range: $range, breakpoint_1: $breakpoint_1, breakpoint_2: $breakpoint_2, mediaType: $mediaType);\r\n\t}\r\n\r\n\t@if (str-index($range, 'inside') != null or str-index($range, 'outside') != null){\r\n\t\t@if ($breakpoint_2 == 0) {\r\n\t\t\t@error '\"#{$range}\" range requires a second value. Currently only providing \"#{$breakpoint_1}\" as a value.';\r\n\t\t}\r\n\t} @else {\r\n\t\t@if ($breakpoint_2 != 0) {\r\n\t\t\t@error '\"#{$range}\" range can only take one value. Currently providing both \"#{$breakpoint_1}\" and \"#{$breakpoint_2}\" as values.';\r\n\t\t}\r\n\t}\r\n\r\n\t@if (str-index($range, 'ratio') == null){\r\n\t\t//if a standard media query\r\n\t\t@if (type-of($breakpoint_1) != number and $range != 'orientation'){\r\n\t\t\t@if ($breakpoint_2 != 0) {\r\n\t\t\t\t@error '\"#{$range}\" range requires the breakpoint_s (\"#{$breakpoint_1}\" and \"#{$breakpoint_2}\") to be pixel values';\r\n\t\t\t} @else {\r\n\t\t\t\t@error '\"#{$range}\" range requires the breakpoint_ \"#{$breakpoint_1}\" to be a pixel value';\r\n\t\t\t}\r\n\t\t}\r\n\t} @else {\r\n\t\t//else if it's a ratio...\r\n\t\t@if ((($breakpoint_2 != 0) and (type-of($breakpoint_2) != string))){\r\n\t\t\t@error '\"#{$range}\" range requires the breakpoint_s (\"#{$breakpoint_1}\" and \"#{$breakpoint_2}\") to both be strings in this format \"4 / 3\" (width ratio / height ratio).';\r\n\t\t} @else if (type-of($breakpoint_1) != string) {\r\n\t\t\t@error '\"#{$range}\" range requires the breakpoint_ \"#{$breakpoint_1}\" to be a string in this format \"4 / 3\" (width ratio / height ratio).';\r\n\t\t}\r\n\t}\r\n\r\n\t$breakpoint_1_plus: $breakpoint_1 + 1;\r\n\t$breakpoint_2_plus: $breakpoint_2 + 1;\r\n\r\n\t$media: if($mediaType, $mediaType, '');\r\n\r\n\t@if ($mq-ems) {\r\n\t\t$breakpoint_1: _mq-em($breakpoint_1);\r\n\t\t$breakpoint_2: _mq-em($breakpoint_2);\r\n\t\t$breakpoint_1_plus: _mq-em($breakpoint_1_plus);\r\n\t\t$breakpoint_2_plus: _mq-em($breakpoint_2_plus);\r\n\t}\r\n\r\n\t$min-width: '(min-width: #{$breakpoint_1_plus})';\r\n\t$max-width: '(max-width: #{$breakpoint_1})';\r\n\r\n\t$inside-width: '(max-width: #{$breakpoint_1}) and (min-width: #{$breakpoint_2_plus})';\r\n\t$outside-width: '(max-width: #{$breakpoint_2}), '+$media+'(min-width: #{$breakpoint_1_plus})';\r\n\r\n\t$mediaString: map-get((\r\n\t//*1 value given*/\r\n\t\tmin : $min-width,\r\n\t\tmax : $max-width,\r\n\t\r\n\t\tmin-width : $min-width,\r\n\t\tmax-width : $max-width,\r\n\r\n\t\tmin-height : '(min-height: #{$breakpoint_1_plus})',\r\n\t\tmax-height : '(max-height: #{$breakpoint_1})',\r\n\r\n\t\tratio : '(aspect-ratio: #{$breakpoint_1})',\r\n\t\tmin-ratio : '(min-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmax-ratio : '(max-aspect-ratio: #{$breakpoint_1})',\r\n\r\n\t\tdevice-ratio : '(device-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmin-device-ratio : '(min-device-aspect-ratio: #{$breakpoint_1})',\r\n\t\tmax-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_1})',\r\n\r\n\t\torientation : '(orientation: #{$breakpoint_1})',\r\n\r\n\t//*2 values given*/\r\n\t\tinside : $inside-width,\r\n\t\toutside : $outside-width,\r\n\r\n\t\tinside-width : $inside-width,\r\n\t\toutside-width : $outside-width,\r\n\r\n\t\tinside-height : '(max-height: #{$breakpoint_1}) and (min-height: #{$breakpoint_2_plus})',\r\n\t\toutside-height : '(max-height: #{$breakpoint_2}), '+$media+'(min-height: #{$breakpoint_1_plus})',\r\n\t\t\r\n\t\tinside-ratio : '(max-aspect-ratio: #{$breakpoint_1}) and (min-aspect-ratio: #{$breakpoint_2})',\r\n\t\toutside-ratio : '(max-aspect-ratio: #{$breakpoint_2}), '+$media+'(min-aspect-ratio: #{$breakpoint_1})',\r\n\t\t\r\n\t\tinside-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_1}) and (min-device-aspect-ratio: #{$breakpoint_2})',\r\n\t\toutside-device-ratio : '(max-device-aspect-ratio: #{$breakpoint_2}), '+$media+'(min-device-aspect-ratio: #{$breakpoint_1})',\r\n\t), $range);\r\n\r\n\t@return $mediaString;\r\n}\r\n\r\n@function isBasicQuery($range) {\r\n\t$first_is_string: type-of(nth($range,1)) == string;\r\n\t$longer_than_1: length($range) > 1;\r\n\t$not_plus_statment: true;\r\n\t@if ($longer_than_1) {\r\n\t\t$not_plus_statment: nth($range,2) != 'plus';\r\n\t}\r\n\t@return $first_is_string and $longer_than_1 and $not_plus_statment;\r\n}\r\n\r\n@function get_values($mqSet, $debug: $mq-debug){\r\n\r\n\t@if ($mq-debug) {\r\n\t\t@debug mqSet (length: length($mqSet), mqSet: $mqSet);\r\n\t}\r\n\r\n\t$range: nth($mqSet,1);\r\n\t$breakpoint_1: null;\r\n\t$breakpoint_2: null;\r\n\t$media: false;\r\n\r\n\t@if (length($mqSet) == 1){\r\n\t\t$first: nth($mqSet, 1);\r\n\t\t@if (type-of($first) != 'string'){\r\n\t\t\t@error '\"#{$first}\" is not a valid media type';\r\n\t\t}\r\n\t\t$range: null;\r\n\t\t$media: $first;\r\n\t}\r\n\r\n\t@if (length($mqSet) > 1){\r\n\t\t$breakpoint_1: nth($mqSet, 2);\r\n\t}\r\n\r\n\t@if (length($mqSet) == 3){\r\n\t\t$third: nth($mqSet, 3);\r\n\r\n\t\t@if (type-of($third) == 'number' or isRatio($third)){\r\n\t\t\t$breakpoint_2: $third;\r\n\t\t} @else {\r\n\t\t\t$media: $third;\r\n\t\t}\r\n\t}\r\n\r\n\t@if (length($mqSet) == 4){\r\n\t\t$third: nth($mqSet, 3);\r\n\t\t$fourth: nth($mqSet, 4);\r\n\r\n\t\t@if ($fourth == false and isMedia($third)){\r\n\t\t\t$media: $third;\r\n\t\t} @else {\r\n\t\t\t$breakpoint_2: $third;\r\n\t\t\t$media: $fourth;\r\n\t\t}\r\n\r\n\t\t@if ($media == \" and \") {\r\n\t\t\t$media: '';\r\n\t\t}\r\n\t}\r\n\r\n\t$finalValues: (\r\n\t\trange: $range,\r\n\t\tbreakpoint_1: $breakpoint_1,\r\n\t\tbreakpoint_2: $breakpoint_2,\r\n\t\tmedia: mediaType($media, $range != null),\r\n\t);\r\n\r\n\t@if ($debug) {\r\n\t\t@debug get_values_result $finalValues;\r\n\t}\r\n\r\n\t@return $finalValues;\r\n}\r\n\r\n@function get_media($mqSet){\r\n\t@return map-get( get_values($mqSet), media);\r\n}\r\n\r\n@function calculateBasicQuery($mqSet, $isAndStatement: false, $debug: $mq-debug){\r\n\t$values: get_values($mqSet, $debug);\r\n\r\n\t$range: map-get($values, range);\r\n\t$breakpoint_1: map-get($values, breakpoint_1);\r\n\t$breakpoint_2: map-get($values, breakpoint_2);\r\n\t$media: map-get($values, media);\r\n\r\n\t@if ($range == null) {\r\n\t\t//if only a media type is given return nothing because it is added elsewhere\r\n\t\t@return '';\r\n\t}\r\n\r\n\t@if ((str-index($range, 'outside') != null) and $isAndStatement){\r\n\t\t$error: 'All \"outside\" range types are incompatible with \"plus\" statements: (' + $mqSet + ')';\r\n\t\t@error $error;\r\n\t}\r\n\r\n\t@return calculateMQ($range, $breakpoint_1, $breakpoint_2, $media, $debug: $debug);\r\n}\r\n\r\n@function joinQueries($range, $queryString: (), $debug: $mq-debug){\r\n\r\n\t$isAndStatement: false;\r\n\t$contains_media_only_statement: false;\r\n\t$media_statement_at_start: true;\r\n\r\n\t@if (length($range) > 1) {\r\n\t\t@for $i from 1 through length($range) {\r\n\t\t\t$statement: nth($range,$i);\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug joinQueries_statement $statement;\r\n\t\t\t}\r\n\t\t\t$mediaNotFirst: $i != 1 and isMedia($statement);\r\n\t\t\t@if ($statement == 'plus') {\r\n\t\t\t\t$isAndStatement: true;\r\n\t\t\t\t@if ($i == 2 and length(nth($range,1)) == 1) {\r\n\t\t\t\t\t$contains_media_only_statement: true;\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t\t@if ($mediaNotFirst){\r\n\t\t\t\t$media_statement_at_start: false;\r\n\t\t\t}\r\n\t\t}\r\n\t} @else if (type-of(nth($range,1)) == 'string') {\r\n\t\t$contains_media_only_statement: true;\r\n\t}\r\n\r\n\t@if ($isAndStatement and not $media_statement_at_start) {\r\n\t\t@error 'Media type definitions must be specified at the start of plus statements: (#{$range)})';\r\n\t}\r\n\r\n\t//Uses this functionality if using a single level MQ variable\r\n\t//eg:\r\n\t//$MQ-example--single: inside, 1000px, 500px;\r\n\t//@include mq($MQ-example--single){}\r\n\t@if (isBasicQuery($range)){\r\n\r\n\t\t@return get_media($range) + calculateBasicQuery($range, $isAndStatement, $debug: $debug);\r\n\r\n\t//Uses this functionality if using a multi level MQ variable\r\n\t//eg:\r\n\t//$MQ-example--multiple:\r\n\t//\t(inside, 1000px, 500px),\r\n\t//\t(min, 1200px)\r\n\t//;\r\n\t//@include mq($MQ-example--multiple){}\r\n\t} @else {\r\n\r\n\t\t@each $mqSet in $range {\r\n\r\n\t\t\t@if ($mqSet != 'plus') {\r\n\t\t\t\t@if (isBasicQuery($mqSet)){\r\n\r\n\t\t\t\t\t$newQuery: calculateBasicQuery($mqSet, $isAndStatement, $debug: $debug);\r\n\r\n\t\t\t\t\t$media: get_media($mqSet);\r\n\r\n\t\t\t\t\t@if ($isAndStatement) {\r\n\t\t\t\t\t\t@if ($queryString == ()){\r\n\t\t\t\t\t\t\t$queryString: $media + $newQuery;\r\n\t\t\t\t\t\t} @else if ($newQuery != '') {\r\n\t\t\t\t\t\t\t$queryString: $queryString + ' and ' + $newQuery;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t$queryString: append($queryString, $media + $newQuery, 'comma');\r\n\t\t\t\t\t}\r\n\r\n\t\t\t\t} @else {\r\n\r\n\t\t\t\t\t$is_media_only_statment: $contains_media_only_statement and type-of($mqSet) == 'string';\r\n\r\n\t\t\t\t\t@if ($isAndStatement) {\r\n\t\t\t\t\t\t@if ($is_media_only_statment) {\r\n\t\t\t\t\t\t\t$queryString: mediaType($mqSet, false);\r\n\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t$queryString: joinQueries($mqSet, $queryString, $debug);\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\t@if (length($queryString) > 1){\r\n\t\t\t\t\t\t\t$error: 'mq-scss does not support \"or\" statements inside \"plus\" statements: ' + $queryString;\r\n\t\t\t\t\t\t\t@error $error;\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t@if ($is_media_only_statment) {\r\n\t\t\t\t\t\t\t$queryString: $mqSet;\r\n\t\t\t\t\t\t} @else {\r\n\t\t\t\t\t\t\t$queryString: append($queryString, joinQueries($mqSet, $debug: $debug), 'comma');\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t}\r\n\r\n\t\t@return $queryString;\r\n\t}\r\n}\r\n\r\n@mixin mq($range, $breakpoint_1: null, $breakpoint_2: null, $mediaType: false, $debug: $mq-debug) {\r\n\r\n\t@if ($debug) {\r\n\t\t@debug $range;\r\n\t}\r\n\r\n\t@if (length($range) > 1) {\r\n\t\t$finalOutput: joinQueries($range, $debug: $debug);\r\n\t\t@if ($debug) {\r\n\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $finalOutput;\r\n\t\t}\r\n\t\t@media #{$finalOutput} {\r\n\t\t\t@content;\r\n\t\t}\r\n\r\n\t//Uses this functionality if placing MQ data inline\r\n\t//eg:\r\n\t//@include mq(inside, 1000px, 500px, 'screen');\r\n\t} @else {\r\n\t\t//standardises the values to prevent mediaType from getting confused with breakpoint_2\r\n\t\t$mediaOnly: $breakpoint_1 == null and $breakpoint_2 == null and $mediaType == false;\r\n\t\t@if ($debug) {\r\n\t\t\t@debug inline_mq_values (range: $range, breakpoint_1: $breakpoint_1, breakpoint_2: $breakpoint_2, mediaType: $mediaType, mediaOnly: $mediaOnly);\r\n\t\t}\r\n\t\t$values: get_values(if($mediaOnly, $range, ($range $breakpoint_1 $breakpoint_2 $mediaType)), $debug: $debug);\r\n\r\n\t\t$newRange: map-get($values, range);\r\n\t\t$newWidth1: map-get($values, breakpoint_1);\r\n\t\t$newWidth2: map-get($values, breakpoint_2);\r\n\t\t$newMedia: map-get($values, media);\r\n\r\n\t\t@if ($mediaOnly) {\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $newMedia;\r\n\t\t\t}\r\n\r\n\t\t\t@media #{ $newMedia } {\r\n\t\t\t\t@content;\r\n\t\t\t}\r\n\r\n\t\t} @else {\r\n\r\n\t\t\t$finalMQ: $newMedia + calculateMQ($newRange, $newWidth1, $newWidth2, $debug: $debug);\r\n\r\n\t\t\t@if ($debug) {\r\n\t\t\t\t@debug '!!!!! FINAL OUTPUT: @media ' + $finalMQ ;\r\n\t\t\t}\r\n\r\n\t\t\t@media #{ $finalMQ } {\r\n\t\t\t\t@content;\r\n\t\t\t}\r\n\r\n\t\t}\r\n\t}\r\n\r\n\t@if ($debug){\r\n\t\t//spacer for seperating results\r\n\t\t@debug '';\r\n\t}\r\n\r\n}\r\n\r\n@mixin retina($density: 2) {\r\n\t\t@media\r\n\t\tonly screen and (min-device-pixel-ratio: $density),\r\n\t\tonly screen and (min-resolution: $density * 96ppi),\r\n\t\tonly screen and (min-resolution: $density * 1dppx) {\r\n\t\t\t@content;\r\n\t}\r\n}\r\n","@import '01-functions/color-functions';\r\n\r\n//loads the configuration settings for the site\r\n@import '00-config-files/config-loader';\r\n\r\n@import '02-mixins/clearfix';\r\n@import '02-mixins/centered';\r\n@import '02-mixins/searchIcon';\r\n@import '02-mixins/overflowShadow';\r\n@import '02-mixins/menuIcon';\r\n\r\n//Styles from 3rd party plugins\r\n@import '03-plugins/normalize.altered';\r\n@import '03-plugins/highlight.theme.atom-one-dark';\r\n\r\n// Base styles\r\n@import '04-base-styles/elements';\r\n@import '04-base-styles/color-classes';\r\n@import '04-base-styles/TK-toolkit';\r\n\r\n//module imports\r\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/bodyContent/bodyContent.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/btn/btn.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/demo/demo.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/header/header.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/pageContainer/pageContainer.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/tabs/tabs.scss\";\n@import \"E:/01-Dans stuff/Projects/00 - npm/mq-scss/src/_modules/tests/tests.scss\";\r\n\r\n\r\n// SCSS\r\n\r\n$MQ-element__color--main: (inside, 1024px, 600px);\r\n$MQ-element__color--alt: (outside, 1024px, 600px);\r\n\r\n.module {\r\n &__element {\r\n @include mq($MQ-element__color--main){\r\n background: red;\r\n }\r\n\r\n @include mq($MQ-element__color--alt){\r\n background: blue;\r\n }\r\n\r\n &--green {\r\n @include mq($MQ-element__color--main){\r\n background: green;\r\n }\r\n\r\n @include mq($MQ-element__color--alt){\r\n background: grey;\r\n }\r\n }\r\n }\r\n}"]} \ No newline at end of file diff --git a/src/_modules/tests/tests.scss b/src/_modules/tests/tests.scss index 49894d3..1784258 100644 --- a/src/_modules/tests/tests.scss +++ b/src/_modules/tests/tests.scss @@ -87,7 +87,7 @@ $green: #004700; } &.-inside { - &::before { content: 'mq(inside, #{$BP-medium}, #{$BP-medium})'; } + &::before { content: 'mq(inside, #{$BP-medium}, #{$BP-small})'; } @include mq(inside, $BP-medium, $BP-small) { @include isActive; } From ebd860780041ef47de7a0e69768ab0a24557d188 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 6 Jan 2018 13:41:52 +1100 Subject: [PATCH 2/3] Updates to the readme documentation - Fixed "not screen" outdated output example in $MQ variables section - Removed "screen and" statements from the full list of range type examples - Fixed the debug output example text wrap - Mentioned installing the Gulp cli tool in the "For contributors" section --- README.md | 79 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index db288dd..09865d9 100644 --- a/README.md +++ b/README.md @@ -42,8 +42,14 @@ If you enjoy using mq-scss, also try out my [mq-js](https://www.npmjs.com/packag ## Installation +If you have never used npm before, install [Node.js](https://nodejs.org). Then set a command line interface to your project folder (`cd C:/path/to/folder`). Then run `npm init` and follow the prompts. + +Everyone needs to do these next two steps: + ``````````` + npm install mq-scss --save + ``````````` Import mq-scss at the top of your main Sass file (note that the exact path will differ depending on your folder structure) @@ -290,41 +296,41 @@ Also, `orientation` only accepts the strings `'portrait'` and `'landscape'`. #### Single value ranges -- **min** : `screen and (min-width: XXX)` -- **max** : `screen and (max-width: XXX)` +- **min** : `(min-width: XXX)` +- **max** : `(max-width: XXX)` - **min-width** : (same as `min`) - **max-width** : (same as `max`) -- **min-height** : `screen and (min-height: XXX)` -- **max-height** : `screen and (max-height: XXX)` +- **min-height** : `(min-height: XXX)` +- **max-height** : `(max-height: XXX)` -- **ratio** : `screen and (aspect-ratio: XXX)` -- **min-ratio** : `screen and (min-aspect-ratio: XXX)` -- **max-ratio** : `screen and (max-aspect-ratio: XXX)` +- **ratio** : `(aspect-ratio: XXX)` +- **min-ratio** : `(min-aspect-ratio: XXX)` +- **max-ratio** : `(max-aspect-ratio: XXX)` -- **device-ratio** : `screen and (device-aspect-ratio: XXX)` -- **min-device-ratio** : `screen and (min-device-aspect-ratio: XXX)` -- **max-device-ratio** : `screen and (max-device-aspect-ratio: XXX)` +- **device-ratio** : `(device-aspect-ratio: XXX)` +- **min-device-ratio** : `(min-device-aspect-ratio: XXX)` +- **max-device-ratio** : `(max-device-aspect-ratio: XXX)` -- **orientation** : `screen and (orientation: XXX)` +- **orientation** : `(orientation: XXX)` #### Double value ranges -- **inside** : `screen and (max-width: XXX) and (min-width: YYY)` -- **outside** : `screen and (max-width: YYY), (min-width: XXX)` +- **inside** : `(max-width: XXX) and (min-width: YYY)` +- **outside** : `(max-width: YYY), (min-width: XXX)` - **inside-width** : (same as `inside`) - **outside-width** : (same as `outside`) -- **inside-height** : `screen and (max-height: XXX) and (min-height: YYY)` -- **outside-height** : `screen and (max-height: YYY), (min-height: XXX)` +- **inside-height** : `(max-height: XXX) and (min-height: YYY)` +- **outside-height** : `(max-height: YYY), (min-height: XXX)` -- **inside-ratio** : `screen and (max-aspect-ratio: XXX) and (min-aspect-ratio: YYY)` -- **outside-ratio** : `screen and (max-aspect-ratio: YYY), (min-aspect-ratio: XXX)` +- **inside-ratio** : `(max-aspect-ratio: XXX) and (min-aspect-ratio: YYY)` +- **outside-ratio** : `(max-aspect-ratio: YYY), (min-aspect-ratio: XXX)` -- **inside-device-ratio** : `screen and (max-device-aspect-ratio: XXX) and (min-device-aspect-ratio: YYY)` -- **outside-device-ratio** : `screen and (max-device-aspect-ratio: YYY), (min-device-aspect-ratio: XXX)` +- **inside-device-ratio** : `(max-device-aspect-ratio: XXX) and (min-device-aspect-ratio: YYY)` +- **outside-device-ratio** : `(max-device-aspect-ratio: YYY), (min-device-aspect-ratio: XXX)` ## MQ variables @@ -403,20 +409,28 @@ $MQ-element__color--alt: (outside, 1024px, 600px); `````````````css /* outputted css: */ -@media not screen and (max-width: 1024px) and (min-width: 601px) { - .module__element { background: red; } -} - @media (max-width: 1024px) and (min-width: 601px) { - .module__element { background: blue; } + .module__element { + background: red; + } } -@media not screen and (max-width: 1024px) and (min-width: 601px) { - .module__element--green { background: green; } +@media (max-width: 600px), (min-width: 1025px) { + .module__element { + background: blue; + } } @media (max-width: 1024px) and (min-width: 601px) { - .module__element--green { background: grey; } + .module__element--green { + background: green; + } +} + +@media (max-width: 600px), (min-width: 1025px) { + .module__element--green { + background: grey; + } } ````````````` @@ -1053,8 +1067,7 @@ That example would produce a log in your console that looks like this: ```` mq-scss/_mq.scss:378 DEBUG: inside -mq-scss/_mq.scss:397 DEBUG: inline_mq_values (range: inside, breakpoint_1: 600px, breakpoint_2: 1000px, mediaType: false, mediaO -nly: false) +mq-scss/_mq.scss:397 DEBUG: inline_mq_values (range: inside, breakpoint_1: 600px, breakpoint_2: 1000px, mediaType: false, mediaOnly: false) mq-scss/_mq.scss:248 DEBUG: get_values_result (range: inside, breakpoint_1: 600px, breakpoint_2: 1000px, media: "") mq-scss/_mq.scss:90 DEBUG: calculateMQ (range: inside, breakpoint_1: 1000px, breakpoint_2: 600px, mediaType: false) mq-scss/_mq.scss:421 DEBUG: !!!!! FINAL OUTPUT: @media (max-width: 1000px) and (min-width: 601px) @@ -1117,11 +1130,13 @@ To create this css: ## For contributors -If you wish to contribute to mq-scss, version 2.1.0+ comes with a testing environment. To access the testing environment: +If you wish to contribute to mq-scss, it now comes with a testing environment. To access the testing environment: 1. Checking out the [GitHub repository](https://github.com/Dan503/mq-scss) -2. Run `npm install` -3. Run `gulp --open` +2. Set a command line interface current directory to the project folder (`cd C:/path/to/folder`) +3. Run `npm install` +4. If you have never used gulp before, run `npm install gulp-cli -g` +5. Run `gulp --open` I plan to eventually create proper automated unit tests. This is better than nothing though. From 0baf57ced3080403cfb99fe4a02f1c4ba3e4e6a5 Mon Sep 17 00:00:00 2001 From: Daniel Tonon Date: Sat, 6 Jan 2018 13:42:54 +1100 Subject: [PATCH 3/3] patch version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2adaf03..3d9cff0 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "mq-scss", - "version": "2.1.0", + "version": "2.1.1", "description": "An extremely powerful but easy to use Sass media query mixin that allows you to create almost any media query you can imagine.", "main": "_mq.scss", "repository": {