template.css

body{font-family:Source Sans Pro,Arial,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1,h2,h3,h4,h5,h6{font-family:Evolventa,Trebuchet MS,sans-serif}h1{font-size:2em}h2{font-size:1.5em}h3{font-size:1.25em}h4{font-size:1em}p{max-width:35em;line-height:1.5em}.subtitle{color:#8393a7}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.icon{display:inline-block;width:1em;height:1em;stroke-width:0;stroke:currentColor;fill:currentColor;font-size:16px}#icon-search{fill:#adb9c9}body{padding:0;margin:0;position:relative;overflow:auto;background:#ebeff3}a,button{cursor:pointer}a,a:active,a:focus,a:hover,a:visited{color:#0081d5;text-decoration:none;-webkit-transition:color .2s ease-out;transition:color .2s ease-out}small{font-size:.875em}.tag-list{padding:0;margin:0}.tag{background:#0081d5;border-radius:3px;display:inline-block;padding:.3em .8em;margin-right:.5em}.tag,.tag a{color:#fff}pre{display:block;margin-top:1em}code{background:#ebeff3;border-radius:3px;padding:.5em;font-family:Courier New;word-break:break-word;white-space:pre-wrap;vertical-align:middle;display:inline-block;max-width:100%;overflow-x:auto}pre code{font-size:1em;padding:1em;-webkit-box-sizing:border-box;box-sizing:border-box}a.button,a.button:active,a.button:focus,a.button:visited,button.button,button.button:active,button.button:focus,button.button:visited{display:inline-block;margin:0 auto;padding:.5em 2em;color:#fff;background-color:#0081d5;border-radius:3px;border:1px solid transparent;border-bottom:2px solid #006cb0;font-family:Evolventa,Trebuchet MS,sans-serif;font-size:1.2em;position:relative;overflow:hidden;-webkit-transition:-webkit-box-shadow .25s;transition:-webkit-box-shadow .25s;transition:box-shadow .25s;transition:box-shadow .25s,-webkit-box-shadow .25s}a.button:hover,button.button:hover{background:#006cb0}a.button:active,button.button:active{-webkit-transform:translateY(2px);transform:translateY(2px);border-bottom:0;margin-bottom:2px}.container{position:relative;width:100%;max-width:1000px;margin:0 auto;padding:0 20px;-webkit-box-sizing:border-box;box-sizing:border-box}.container h1:first-of-type{margin-top:0}@media (min-width:400px){.container{width:85%;padding:0}}@media (min-width:550px){.container{width:80%}}@font-face{font-family:Source Sans Pro;src:url("fonts/Source Sans Pro/SourceSansPro-Regular.otf");font-weight:400}@font-face{font-family:Source Sans Pro;src:url("fonts/Source Sans Pro/SourceSansPro-Bold.otf");font-weight:800}@font-face{font-family:Source Sans Pro;src:url("fonts/Source Sans Pro/SourceSansPro-It.otf");font-style:italic}@font-face{font-family:Evolventa;src:url(fonts/Evolventa/Evolventa-Bold.ttf);font-weight:800}.notification{color:#0081d5;background:#b4e1fa;border:1px solid #0081d5;border-radius:3px;padding:1em;margin-bottom:1em;position:relative}.notification .close{border:0;background:0;color:currentColor;position:absolute;right:1em}.notification .icon{fill:currentColor;width:20px;height:20px}.notification.closable{padding-right:3em}.notification.full-width{width:100%;margin-bottom:0;text-align:center;border:0;-webkit-box-sizing:border-box;box-sizing:border-box}.notification.full-width.closable .close{right:unset}.notification.success{color:#03bd5b;background:#daf5e7;border-color:#03bd5b}.notification.warning{color:#ff9947;background:#fff0e4;border-color:#ff9947}.notification.error{color:#d1335b;background:#f8e1e7;border-color:#d1335b}.footer{background:#26353f;color:#fff;padding:2em 0}.footer .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.footer ul{list-style-type:none;padding:0}.footer__social{margin-top:1em}.footer__social li{display:inline;margin-right:1em}.footer__social .icon{width:35px;height:35px;fill:#fff}.footer__links{margin:0;line-height:2em}.footer__links h2{margin-top:0;margin-bottom:.5em}.footer__links a{color:#fff}.footer__logo{width:300px;height:auto}.footer__logo img,.hero{width:100%}.hero{color:#fff;background:#45adc5;background:-webkit-gradient(linear,left top,right top,from(#c969a6),color-stop(15%,#e795a8),color-stop(43%,#a4cfcd),color-stop(65%,#45adc5),to(#265c9f));background:linear-gradient(90deg,#c969a6 0,#e795a8 15%,#a4cfcd 43%,#45adc5 65%,#265c9f)}.hero__container{min-height:38vh;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;padding:2em}.hero__white-background{padding:10px 1em;background-color:#fff}.hero h1{color:#26353f;margin:0}.hero p{margin:1em auto;color:#26353f;font-size:1.2em;font-style:italic}.nav{border-bottom:1px solid #c9d3df;-webkit-box-shadow:0 1px 4px #c9d3df;box-shadow:0 1px 4px #c9d3df;width:100%;background:#fff;z-index:2}.nav-fixed{position:fixed;top:0}.nav__container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.nav__home,.nav__link{height:40px}.nav__link{padding:1em}.nav__logo{height:100%}.nav__links{display:inline;margin:0;padding:1em;list-style-type:none;text-align:right}.nav__links li{padding:0;display:inline}.nav__links .dropdown,.nav__links a{color:#1c1c1c;padding:.4em .8em;border-radius:3px}.nav__links a:after{content:none}.nav__links .dropdown:hover,.nav__links a:hover{background:#c9d3df;-webkit-transition:background .5s ease-out;transition:background .5s ease-out}.nav__links a.active{background:#0081d5;color:#fff}@media (max-width:549px){.nav__links{padding-top:0}}.dropdown{position:relative;display:inline-block}.dropdown-content{display:none;position:absolute;background-color:#fff;min-width:110px;text-align:center;top:2em;right:0;-webkit-box-shadow:0 8px 16px 0 rgba(0,0,0,.2);box-shadow:0 8px 16px 0 rgba(0,0,0,.2);z-index:1}.dropdown-content a{color:#000;padding:12px 16px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#c9d3df}.dropdown:hover .dropdown-content{display:block}.row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.row .column{margin:0 2em;max-width:50em}@media (max-width:749px){.row{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.row p+p{margin-top:1em}}.column img{width:100%}.panel{background:#fff;border-radius:2px;-webkit-box-shadow:0 1px 4px #c9d3df;box-shadow:0 1px 4px #c9d3df;padding:2em;position:relative}.panel h1:first-of-type{margin-top:0}.panel__header:after{content:"";display:block;width:calc(100% + 4em);position:relative;left:-2em;border-bottom:1px solid #adb9c9;margin-bottom:2em}.panel__header h3{display:inline-block}.panel__header h3:first-of-type{margin-top:0}.panel__header-extra{margin-left:1em;color:#8393a7}section{padding:5em 0;background-color:#fff;color:#1c1c1c}.section-grey{background-color:#ebeff3;color:#1c1c1c}.section-dark{background-color:#1c1c1c;color:#fff}.section-color{background-color:#0081d5;color:#fff}.section__subtitle{margin:0 auto 2em;max-width:640px;font-size:1.3em;font-style:italic;text-align:center;margin-bottom:0}.section__subtitle:not(:last-child){margin-bottom:3em}.section__title+.section__subtitle{margin-top:-3em}.section__title{margin:0 0 3em;text-align:center}form{max-width:520px;margin:0 auto}input,select{width:100%;outline:none;padding:8px 14px;font:inherit;line-height:1.6;color:#1c1c1c;border-radius:3px;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid #adb9c9;background:#fff;vertical-align:middle;position:relative}input:focus,select:focus{border-color:#0081d5;-webkit-transition:border-color .2s ease-out;transition:border-color .2s ease-out;-webkit-box-shadow:0 0 1px 1px #b4e1fa;box-shadow:0 0 1px 1px #b4e1fa}input:disabled,select:disabled{background-color:#ebeff3}input[type=checkbox],input[type=radio]{margin-right:6px;margin-top:0}input[type=radio]{height:20px;width:20px;border-radius:50%;display:inline-block;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0}input[type=radio]:before{content:"";border-color:#0081d5;border-radius:50%;position:absolute;top:5px;left:5px;width:8px;height:8px;-webkit-transform:scale(0);transform:scale(0)}input[type=radio]:checked{background-color:#fff;border-color:#0081d5;opacity:1}input[type=radio]:checked:before{background-color:#0081d5;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:22px;width:22px;padding:0}input[type=checkbox]:checked{background-color:#0081d5;border-color:#0081d5;opacity:1;-webkit-transition:border-color .2s ease-in,background-color .2s ease-out;transition:border-color .2s ease-in,background-color .2s ease-out}input[type=checkbox]:before{-webkit-transform:scale(0);transform:scale(0);content:"";position:absolute;top:3px;left:3px;height:14px;width:14px;background:url(images/icons/tick.svg) 50% no-repeat}input[type=checkbox]:checked:before{color:#fff;display:block;-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform .2s ease-out;transition:-webkit-transform .2s ease-out;transition:transform .2s ease-out;transition:transform .2s ease-out,-webkit-transform .2s ease-out}select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#fff url(images/icons/arrow-down.svg) no-repeat;background-position:center right 1em;background-size:15px;padding-right:45px;border-radius:3px;width:auto}select:focus{outline:none}label,legend{display:block;margin-bottom:.5em;color:#26353f}label.label-inline{display:inline;color:#1c1c1c}.label-inline+input[type=checkbox],.label-inline+input[type=radio]{margin-left:10px}.form__container{max-width:30em;margin:auto}.form__group{position:relative;display:block;margin-bottom:1em}.form__group+.form__group{margin-top:2em}fieldset{border:none;margin:0;padding:0;width:100%}.overlay-button{position:absolute;right:21px;top:12px;background:0;border:0;width:15px;height:15px}.search__group{position:relative}.overlayed-button .icon-search{height:15px;width:15px}.input__group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.input__group .icon-button,.input__group .icon-button:active{margin-left:1em;padding:0 .8em}.input__group .icon-button .icon{width:16px;height:16px}.documentation{display:-webkit-box;display:-ms-flexbox;display:flex}.side-pane{background:#ebeff3;padding:1em;-webkit-box-flex:0;-ms-flex:0 0 250px;flex:0 0 250px;border-right:1px solid #c9d3df}.side-pane .side-pane__menu{list-style-type:none;margin:0;padding:0}.side-pane__title{padding:0 1em}.side-pane .side-pane__link{padding:.5em 1em;display:block;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:5px;margin-bottom:.5em;color:#26353f}.side-pane li:hover .side-pane__link{background:#c9d3df}.side-pane li.active .side-pane__link{background:#0081d5;color:#fff}.side-pane li.side-pane__dropdown .side-pane__link{background:url(images/icons/arrow-right.svg) no-repeat;-webkit-transition:background .5s ease-out;transition:background .5s ease-out;background-position:center right 1em;background-size:15px 15px}.side-pane li.side-pane__dropdown:hover .side-pane__link{background:#c9d3df url(images/icons/arrow-right.svg) no-repeat;-webkit-transition:background .5s ease-out;transition:background .5s ease-out;background-position:center right 1em;background-size:15px 15px}.side-pane li.unfolded.side-pane__dropdown .side-pane__link,.side-pane li.unfolded.side-pane__dropdown:hover .side-pane__link{background-image:url(images/icons/arrow-down.svg);background-color:transparent}.side-pane li.unfolded.active.side-pane__dropdown .side-pane__link{background-color:#0081d5}.side-pane__dropdown.unfolded .side-pane__submenu{display:block}.side-pane__submenu{padding-left:2em;margin-bottom:.5em;display:none}.side-pane__sublink,.side-pane__sublink:visited{padding:.5em;list-style-type:none;color:#53657d;border-radius:5px}.side-pane__submenu li{list-style-type:none;margin:1em 0}.side-pane__submenu .side-pane__sublink:hover{color:#26353f;background:#c9d3df;-webkit-transition:background .5s ease-out;transition:background .5s ease-out}.side-pane__submenu li.active{list-style-type:disc;color:#0081d5}.side-pane__submenu li.active .side-pane__sublink{font-weight:700;color:#26353f}.main-pane{padding:3em;background:#fff;-webkit-box-flex:1;-ms-flex:1;flex:1}.main-pane h1:first-child{margin-top:0}@media (max-width:749px){.documentation{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.side-pane{border-right:none;border-bottom:1px solid #c9d3df;-webkit-box-flex:1;-ms-flex:auto;flex:auto}}article{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-moz-font-feature-settings:"liga" on;color:#1c1c1c;line-height:1.5;max-width:35em;width:100%;margin:0 auto}.typography__sample{margin-bottom:1em}.typography__sample>*{margin:0}.color-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2em}.color-panel__block{margin-bottom:1em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.color-panel__sample{margin-right:1em;width:50px;height:50px;border-radius:2px;vertical-align:middle}.color-panel__name{padding:.5em 0;vertical-align:middle}.color-panel__name h4{margin:0}.color-panel__sample-double{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-radius:2px;overflow:hidden;margin-right:1em}.color-panel__sample-double .color-panel__sample{border-radius:0;margin-right:0}.color-panel__sample.primary-medium{background:#0081d5}.color-panel__sample.primary-light{background:#1e90da}.color-panel__sample.primary-dark{background:#006cb0}.color-panel__sample.white{background:#fff;border:1px solid #c9d3df}.color-panel__sample.lighter-grey{background:#ebeff3}.color-panel__sample.light-grey{background:#c9d3df}.color-panel__sample.grey{background:#adb9c9}.color-panel__sample.dark-grey{background:#8393a7}.color-panel__sample.darker-grey{background:#53657d}.color-panel__sample.almost-black{background:#26353f}.color-panel__sample.black{background:#1c1c1c}.color-panel__sample.green{background:#03bd5b}.color-panel__sample.light-green{background:#daf5e7}.color-panel__sample.orange{background:#ff9947}.color-panel__sample.light-orange{background:#fff0e4}.color-panel__sample.red{background:#d1335b}.color-panel__sample.light-red{background:#f8e1e7}.color-panel__sample.blue{background:#0081d5}.color-panel__sample.light-blue{background:#b4e1fa}.documentation{border-top:1px solid #c9d3df;border-bottom:1px solid #c9d3df}@media (max-width:749px){.color-panel{grid-template-columns:1fr}}