surface_styles.css

                Never    
CSS
       
@charset "UTF-8";

.tabs label, .text-center {
    text-align: center
}

@font-face {
    font-family: 'Gentium Book Basic';
    font-style: normal;
    font-weight: 400;
    src: local('Gentium Book Basic'),local('GentiumBookBasic'),url(https://fonts.gstatic.com/s/gentiumbookbasic/v7/IRFxB2matTxrjZt6a3FUnsQ6HWhO-urg7Zd40mHsFaI.ttf) format('truetype')
}

@font-face {
    font-family: 'Gentium Book Basic';
    font-style: normal;
    font-weight: 700;
    src: local('Gentium Book Basic Bold'),local('GentiumBookBasic-Bold'),url(https://fonts.gstatic.com/s/gentiumbookbasic/v7/T2vUYmWzlqUtgLYdlemGnbdiNC2EW_LVDR83j5uZVEA.ttf) format('truetype')
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 300;
    src: local('Roboto Light'),local('Roboto-Light'),url(https://fonts.gstatic.com/s/roboto/v16/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 400;
    src: local('Roboto'),local('Roboto-Regular'),url(https://fonts.gstatic.com/s/roboto/v16/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype')
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    src: local('Roboto Medium'),local('Roboto-Medium'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
}

@font-face {
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: local('Roboto Bold'),local('Roboto-Bold'),url(https://fonts.gstatic.com/s/roboto/v16/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype')
}

body, html {
    width: 100%
}

body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
    box-sizing: border-box
}

.table-header, tr {
    line-height: 52px
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

blockquote, q {
    quotes: none
}

    blockquote:after, blockquote:before, q:after, q:before {
        content: '';
        content: none
    }

button {
    border: none;
    cursor: pointer
}

.g--1 {
    width: 8.33333%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--1 {
    margin-left: 8.33333%
}

@media screen and (max-width:1200px) {
    .g-m--1 {
        width: 8.33333%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--1 {
        margin-left: 8.33333%
    }
}

@media screen and (max-width:900px) {
    .g-s--1 {
        width: 8.33333%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--1 {
        margin-left: 8.33333%
    }
}

@media screen and (max-width:520px) {
    .g-t--1 {
        width: 8.33333%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--1 {
        margin-left: 8.33333%
    }
}

.g--2 {
    width: 16.66667%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--2 {
    margin-left: 16.66667%
}

@media screen and (max-width:1200px) {
    .g-m--2 {
        width: 16.66667%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--2 {
        margin-left: 16.66667%
    }
}

@media screen and (max-width:900px) {
    .g-s--2 {
        width: 16.66667%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--2 {
        margin-left: 16.66667%
    }
}

@media screen and (max-width:520px) {
    .g-t--2 {
        width: 16.66667%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--2 {
        margin-left: 16.66667%
    }
}

.g--3 {
    width: 25%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--3 {
    margin-left: 25%
}

@media screen and (max-width:1200px) {
    .g-m--3 {
        width: 25%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--3 {
        margin-left: 25%
    }
}

@media screen and (max-width:900px) {
    .g-s--3 {
        width: 25%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--3 {
        margin-left: 25%
    }
}

@media screen and (max-width:520px) {
    .g-t--3 {
        width: 25%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--3 {
        margin-left: 25%
    }
}

.g--4 {
    width: 33.33333%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--4 {
    margin-left: 33.33333%
}

@media screen and (max-width:1200px) {
    .g-m--4 {
        width: 33.33333%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--4 {
        margin-left: 33.33333%
    }
}

@media screen and (max-width:900px) {
    .g-s--4 {
        width: 33.33333%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--4 {
        margin-left: 33.33333%
    }
}

@media screen and (max-width:520px) {
    .g-t--4 {
        width: 33.33333%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--4 {
        margin-left: 33.33333%
    }
}

.g--5 {
    width: 41.66667%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--5 {
    margin-left: 41.66667%
}

@media screen and (max-width:1200px) {
    .g-m--5 {
        width: 41.66667%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--5 {
        margin-left: 41.66667%
    }
}

@media screen and (max-width:900px) {
    .g-s--5 {
        width: 41.66667%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--5 {
        margin-left: 41.66667%
    }
}

@media screen and (max-width:520px) {
    .g-t--5 {
        width: 41.66667%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--5 {
        margin-left: 41.66667%
    }
}

.g--6 {
    width: 50%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--6 {
    margin-left: 50%
}

@media screen and (max-width:1200px) {
    .g-m--6 {
        width: 50%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--6 {
        margin-left: 50%
    }
}

@media screen and (max-width:900px) {
    .g-s--6 {
        width: 50%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--6 {
        margin-left: 50%
    }
}

@media screen and (max-width:520px) {
    .g-t--6 {
        width: 50%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--6 {
        margin-left: 50%
    }
}

.g--7 {
    width: 58.33333%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--7 {
    margin-left: 58.33333%
}

@media screen and (max-width:1200px) {
    .g-m--7 {
        width: 58.33333%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--7 {
        margin-left: 58.33333%
    }
}

@media screen and (max-width:900px) {
    .g-s--7 {
        width: 58.33333%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--7 {
        margin-left: 58.33333%
    }
}

@media screen and (max-width:520px) {
    .g-t--7 {
        width: 58.33333%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--7 {
        margin-left: 58.33333%
    }
}

.g--8 {
    width: 66.66667%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--8 {
    margin-left: 66.66667%
}

@media screen and (max-width:1200px) {
    .g-m--8 {
        width: 66.66667%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--8 {
        margin-left: 66.66667%
    }
}

@media screen and (max-width:900px) {
    .g-s--8 {
        width: 66.66667%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--8 {
        margin-left: 66.66667%
    }
}

@media screen and (max-width:520px) {
    .g-t--8 {
        width: 66.66667%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--8 {
        margin-left: 66.66667%
    }
}

.g--9 {
    width: 75%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--9 {
    margin-left: 75%
}

@media screen and (max-width:1200px) {
    .g-m--9 {
        width: 75%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--9 {
        margin-left: 75%
    }
}

@media screen and (max-width:900px) {
    .g-s--9 {
        width: 75%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--9 {
        margin-left: 75%
    }
}

@media screen and (max-width:520px) {
    .g-t--9 {
        width: 75%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--9 {
        margin-left: 75%
    }
}

.g--10 {
    width: 83.33333%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--10 {
    margin-left: 83.33333%
}

@media screen and (max-width:1200px) {
    .g-m--10 {
        width: 83.33333%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--10 {
        margin-left: 83.33333%
    }
}

@media screen and (max-width:900px) {
    .g-s--10 {
        width: 83.33333%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--10 {
        margin-left: 83.33333%
    }
}

@media screen and (max-width:520px) {
    .g-t--10 {
        width: 83.33333%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--10 {
        margin-left: 83.33333%
    }
}

.g--11 {
    width: 91.66667%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--11 {
    margin-left: 91.66667%
}

@media screen and (max-width:1200px) {
    .g-m--11 {
        width: 91.66667%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--11 {
        margin-left: 91.66667%
    }
}

@media screen and (max-width:900px) {
    .g-s--11 {
        width: 91.66667%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--11 {
        margin-left: 91.66667%
    }
}

@media screen and (max-width:520px) {
    .g-t--11 {
        width: 91.66667%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--11 {
        margin-left: 91.66667%
    }
}

.g--12 {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px
}

.m--12 {
    margin-left: 100%
}

@media screen and (max-width:1200px) {
    .g-m--12 {
        width: 100%;
        margin-top: 26px;
        margin-bottom: 26px
    }

    .m-m--12 {
        margin-left: 100%
    }
}

@media screen and (max-width:900px) {
    .g-s--12 {
        width: 100%;
        margin-top: 18px;
        margin-bottom: 18px
    }

    .m-s--12 {
        margin-left: 100%
    }
}

@media screen and (max-width:520px) {
    .g-t--12 {
        width: 100%;
        margin-top: 10px;
        margin-bottom: 10px
    }

    .m-t--12 {
        margin-left: 100%
    }

    .m-t--0 {
        margin-left: 0
    }
}

[class*=container] {
    display: -ms-flexbox;
    display: flex
}

.container--baseline {
    -ms-flex-align: baseline;
    align-items: baseline
}

.container--center {
    -ms-flex-align: center;
    align-items: center
}

.container--start {
    -ms-flex-align: start;
    align-items: flex-start
}

.container--end {
    -ms-flex-align: end;
    align-items: flex-end
}

.container--justify {
    -ms-flex-pack: center;
    justify-content: center
}

.container--wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

@media screen and (max-width:1200px) {
    .m-m--0 {
        margin-left: 0
    }

    .container--wrap--m {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }
}

.nudge--right {
    margin-right: 20px
}

@media screen and (max-width:900px) {
    .m-s--0 {
        margin-left: 0
    }

    .container--wrap--s {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .nudge--right {
        margin-right: 15px
    }
}

.nudge--left {
    margin-left: 20px
}

@media screen and (max-width:900px) {
    .nudge--left {
        margin-left: 15px
    }
}

@media screen and (max-width:520px) {
    .container--wrap--t {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap
    }

    .nudge--right {
        margin-right: 10px
    }

    .nudge--left {
        margin-left: 10px
    }

    .no-nudge--t {
        margin-left: 0;
        margin-right: 0
    }
}

.nav--horizontal ol, .nav--horizontal ul, .nav--vertical ol, .nav--vertical ul {
    margin-left: 0
}

.card {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07);
    border-radius: 3px
}

.card, .tile {
    padding: 20px;
    background: #fff
}

a, aside, body, div, h1, h2, h3, h4, h5, h6, header, input, label, menu, p {
    font-family: Roboto,sans-serif;
    color: #212121
}

h1, h2, h3, h4, h5, h6 {
    margin-bottom: .8em;
    line-height: 130%
}

p {
    margin-bottom: 20px
}

h1 {
    font-size: 40px
}

h2 {
    font-size: 34px
}

h3 {
    font-size: 28px
}

h4 {
    font-size: 24.8px
}

h5 {
    font-size: 20.8px
}

h6 {
    font-size: 18px
}

a, p {
    font-size: 16px
}

.subtitle {
    font-style: italic;
    color: #919191
}

body {
    background: #fcfcfc;
    line-height: 130%
}

a:not([class^=btn]) {
    background: linear-gradient(to top,rgba(40,225,189,.8) 50%,rgba(255,255,255,0) 50%);
    background-size: 100% 200%;
    background-position: 0 10%;
    background-repeat: no-repeat;
    text-decoration: none;
    color: inherit;
    transition: background-position .3s cubic-bezier(.64,.09,.08,1);
    will-change: background-position
}

    a:not([class^=btn]):active {
        color: inherit
    }

    a:not([class^=btn]):hover {
        background-position: 0 100%
    }

a[class^=btn] {
    text-decoration: none
}

[class^=btn] {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    margin-bottom: 10px;
    background-image: none;
    background-size: 0;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    transition: background-color .3s cubic-bezier(.64,.09,.08,1),box-shadow .3s cubic-bezier(.64,.09,.08,1);
    will-change: background-size,background-image;
    padding: 10px 20px;
    display: inline-block;
    font-family: Roboto;
    border: 0
}

    [class^=btn]:after {
        position: absolute;
        content: '';
        transition: none;
        background: radial-gradient(circle,#fff 95%,transparent 95%);
        background-size: .7%;
        background-position: 50% 50%;
        background-repeat: no-repeat
    }

    [class^=btn]:focus {
        outline: 0;
        background-size: 1000%;
        transition: all 1s cubic-bezier(.64,.09,.08,1)
    }

.btn--float {
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-image: radial-gradient(circle,#ffeb3b 1%,#fff388 15%,transparent 30%);
    background-color: #ffeb3b;
    will-change: box-shadow,background-color;
    font-size: 22px;
    padding: 0
}

    .btn--float:hover {
        box-shadow: 0 5px 11px 0 rgba(0,0,0,.16),0 4px 15px 0 rgba(0,0,0,.13);
        background-color: #fe5
    }

.btn--raised, .modal-trigger, .modal-trigger:after {
    border-radius: 1.98px;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.14),0 2px 10px 0 rgba(0,0,0,.1);
    background-image: radial-gradient(circle,#3498db 1%,#75b9e7 15%,transparent 30%);
    background-color: #3498db;
    will-change: box-shadow,background-color;
    color: #fff
}

    .btn--raised:hover, .modal-trigger:hover, .modal-trigger:hover:after {
        box-shadow: 0 5px 11px 0 rgba(0,0,0,.16),0 4px 15px 0 rgba(0,0,0,.13);
        background-color: #4aa3df
    }

.btn--flat {
    background-image: radial-gradient(circle,#28e1bd 1%,#6bebd1 15%,transparent 30%);
    background-color: #fcfcfc;
    box-shadow: none
}

.btn--primary {
    background-image: radial-gradient(circle,#1abc9c 1%,#3ee4c4 15%,transparent 30%);
    background-color: #1abc9c
}

    .btn--primary:hover {
        background-color: #1dd2af
    }

.btn--secondary {
    background-image: radial-gradient(circle,#28e1bd 1%,#6bebd1 15%,transparent 30%);
    background-color: #28e1bd
}

    .btn--secondary:hover {
        background-color: #3ee4c4
    }

.btn--accent {
    background-image: radial-gradient(circle,#ffeb3b 1%,#fff388 15%,transparent 30%);
    background-color: #ffeb3b
}

    .btn--accent:hover {
        background-color: #fe5
    }

.btn--red {
    background-image: radial-gradient(circle,#e74c3c 1%,#ef8b80 15%,transparent 30%);
    background-color: #e74c3c
}

    .btn--red:hover {
        background-color: #ea6153
    }

.btn--yellow {
    background-image: radial-gradient(circle,#f1c40f 1%,#f5d657 15%,transparent 30%);
    background-color: #f1c40f
}

    .btn--yellow:hover {
        background-color: #f2ca27
    }

.btn--green {
    background-image: radial-gradient(circle,#4caf50 1%,#80c883 15%,transparent 30%);
    background-color: #4caf50
}

    .btn--green:hover {
        background-color: #5cb860
    }

.btn--blue {
    background-image: radial-gradient(circle,#2196f3 1%,#6ab8f7 15%,transparent 30%);
    background-color: #2196f3
}

    .btn--blue:hover {
        background-color: #39a1f4
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%
}

.table-header {
    color: #474747;
    font-size: 16px
}

tr {
    font-size: 17px;
    border-bottom: solid 1px #ebebeb;
    will-change: background
}

    tr:not(.table-header):hover {
        background: #ebebeb
    }

td:first-child {
    padding-left: 40px
}

td:last-child {
    padding-right: 40px
}

header {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    background: #1abc9c;
    margin-bottom: 70px
}

    header h1, header h2, header h3 {
        color: #fff
    }

@media screen and (max-width:1200px) {
    .no-nudge--m {
        margin-left: 0;
        margin-right: 0
    }

    td:first-child {
        padding-left: 32px
    }

    td:last-child {
        padding-right: 32px
    }

    header {
        margin-bottom: 34px;
        padding-top: 20px
    }
}

@media screen and (max-width:900px) {
    .no-nudge--s {
        margin-left: 0;
        margin-right: 0
    }

    td:first-child {
        padding-left: 20px
    }

    td:last-child {
        padding-right: 20px
    }

    header {
        padding-top: 40px;
        padding-bottom: 5px;
        margin-bottom: 8.5px
    }
}

.nav--horizontal, .nav--vertical {
    margin-top: 0;
    margin-bottom: 0
}

.nav--horizontal {
    display: -ms-flexbox;
    display: flex
}

    .nav--horizontal > li, .nav--horizontal > ul {
        display: -ms-flexbox;
        display: flex
    }

    .nav--horizontal a {
        display: inline-block
    }

.nav--vertical a, .nav--vertical li, .nav--vertical ul {
    display: inline-block;
    float: left;
    clear: left
}

    .nav--vertical li:first-child a {
        margin-bottom: 7px
    }

    .nav--vertical li:last-child a {
        margin-top: 7px
    }

    .nav--vertical li a {
        margin-top: 7px;
        margin-bottom: 7px
    }

.docsHeader {
    margin-top: 22px;
    margin-bottom: 22px;
    font-size: 28px;
}

.logo-area {
    width: 100%;
    height: 100px;
    border-bottom: solid 1px #e0e0e0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    color: #474747
}

.nav--super-vertical {
    margin-top: 0;
    margin-bottom: 0;
    position: fixed;
    height: 100%;
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    background: #fff;
    z-index: 7;
    overflow-Y: auto;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12)
}

.dropdown ul, .toggle + label:after {
    box-shadow: 0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)
}

.nav--super-vertical a, .nav--super-vertical label {
    width: 100%;
    display: block;
    text-decoration: none;
    color: #474747;
    cursor: pointer;
    font-weight: 500;
    padding: 20px 24px;
    transition: none;
    background-image: none
}

    .nav--super-vertical a:hover, .nav--super-vertical label:hover {
        background: #e0e0e0
    }

.nav--super-vertical input {
    display: none
}

    .nav--super-vertical input:checked + label {
        transition: background .2s cubic-bezier(.64,.09,.08,1),color .2s cubic-bezier(.64,.09,.08,1);
        background: #e0e0e0
    }

    .nav--super-vertical input:checked ~ .nav-collapsible-links {
        height: auto;
        transform: scaleY(1)
    }

        .nav--super-vertical input:checked ~ .nav-collapsible-links a {
            height: 54px
        }

.nav-collapsible-links {
    height: 100%;
    transform: scaleY(0);
    transform-origin: 0 0;
    transition: transform .3s cubic-bezier(.64,.09,.08,1)
}

    .nav-collapsible-links a {
        padding: 0 24px 0 34px;
        height: 0;
        font-weight: 400;
        transition: height .3s cubic-bezier(.64,.09,.08,1);
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center
    }

#nav--horizontal-responsive, #nav--horizontal-responsive + label, #nav--super-vertical-responsive, #nav--super-vertical-responsive + label {
    display: none
}

@media screen and (max-width:1200px) {
    .nav--super-vertical {
        padding-top: 40px;
        transform: translateX(-100%);
        transition: transform .3s cubic-bezier(.64,.09,.08,1)
    }

    #nav--super-vertical-responsive + label {
        display: block;
        position: fixed;
        z-index: 8;
        top: 0;
        left: 0;
        padding: 10px;
        background: #fff;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07);
        cursor: pointer;
        transition: background .3s cubic-bezier(.64,.09,.08,1),color .3s cubic-bezier(.64,.09,.08,1)
    }

    #nav--super-vertical-responsive:checked + label {
        background: #1abc9c;
        color: #fff
    }

    #nav--super-vertical-responsive:checked ~ .nav--super-vertical {
        transform: translateX(0)
    }
}

@media screen and (max-width:900px) {
    #nav--horizontal-responsive + label, .nav--horizontal > ul {
        background: #fff;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)
    }

    .nav--horizontal {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 7;
        transform: translateY(-100%);
        transition: transform .3s cubic-bezier(.64,.09,.08,1)
    }

        .nav--horizontal a, .nav--horizontal li, .nav--horizontal ul {
            width: 100%;
            display: block;
            margin: 0
        }

        .nav--horizontal a {
            line-height: 40px
        }

        .nav--horizontal > ul {
            padding-top: 50px
        }

    #nav--horizontal-responsive + label {
        display: block;
        position: fixed;
        z-index: 8;
        top: 0;
        left: 0;
        padding: 10px;
        cursor: pointer;
        transition: background .3s cubic-bezier(.64,.09,.08,1),color .3s cubic-bezier(.64,.09,.08,1)
    }

    #nav--horizontal-responsive:checked + label {
        background: #1abc9c;
        color: #fff
    }

    #nav--horizontal-responsive:checked ~ .nav--horizontal {
        transform: translateY(0)
    }
}

.nav--horizontal a, .nav--vertical a {
    color: #1abc9c;
    background: #fff;
    padding: 10px;
    transition: none;
    will-change: background
}

    .nav--horizontal a:hover, .nav--vertical a:hover {
        background: #e5e5e5
    }

.dropdown {
    position: relative
}

    .dropdown ul {
        position: absolute;
        background: #fff;
        left: 0;
        transition: all .3s ease;
        transform: scale(0);
        transform-origin: 0 0;
        z-index: 2;
        width: 100%
    }

        .dropdown ul li {
            width: 100%;
            margin: 0;
            padding: 0
        }

            .dropdown ul li a {
                width: 100%;
                padding: 8px 10px;
                display: inline-block;
                margin: 0;
                border-radius: 0
            }

    .dropdown:hover ul {
        transform: scale(1)
    }

ol, ul {
    list-style: none;
    margin-left: 20px;
    margin-bottom: 20px
}

    ol li, ul li {
        margin-top: 10px
    }

ol {
    list-style-type: decimal;
    white-space: nowrap
}

footer {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #28e1bd;
    padding-top: 20px;
    padding-bottom: 20px
}

input[id*=modal-] {
    display: none
}

    input[id*=modal-]:checked + label {
        outline: 0;
        background-size: 1000%;
        transition: all 1s cubic-bezier(.64,.09,.08,1)
    }

        input[id*=modal-]:checked + label:before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
            transition: all .3s cubic-bezier(.64,.09,.08,1);
            z-index: 9
        }

    input[id*=modal-]:checked ~ .modal-content {
        transition: opacity .3s cubic-bezier(.64,.09,.08,1);
        opacity: 1;
        display: block;
        height: auto;
        width: auto;
        padding: 40px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 10
    }

        input[id*=modal-]:checked ~ .modal-content * {
            height: auto;
            width: auto
        }

.modal-trigger {
    white-space: pre;
    cursor: pointer;
    transition: all .3s cubic-bezier(.64,.09,.08,1);
    padding: 10px 20px;
    background-size: 1%;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

    .modal-trigger:after {
        white-space: nowrap;
        padding: 10px;
        cursor: pointer;
        transition: all .2s cubic-bezier(.64,.09,.08,1);
        background-image: none
    }

.modal-content {
    position: fixed;
    opacity: 0;
    height: 0;
    background: #fff;
    border-radius: 3px
}

    .modal-content * {
        width: 0;
        height: 0
    }

.tooltip {
    position: relative
}

    .tooltip:hover:after {
        position: absolute;
        content: attr(data-text);
        background: #b8b8b8;
        border-radius: 3px;
        padding: 8px;
        bottom: -2.5em;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2
    }

.tabs {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding: 0
}

    .tabs input[type=radio][name=tabs] {
        position: absolute;
        z-index: -1
    }

        .tabs input[type=radio][name=tabs]:checked + .tab-label-content label {
            color: #fff
        }

        .tabs input[type=radio][name=tabs]:checked + .tab-label-content .tab-content {
            display: block
        }

        .tabs input[type=radio][name=tabs]:first-of-type:checked ~ .slide {
            left: 0
        }

        .tabs input[type=radio][name=tabs]:nth-of-type(1):checked ~ .slide-demo {
            left: 0;
            left: calc((100% / 3) * 0)
        }

        .tabs input[type=radio][name=tabs]:nth-of-type(2):checked ~ .slide-demo {
            left: 33.33333%;
            left: calc((100% / 3) * 1)
        }

        .tabs input[type=radio][name=tabs]:nth-of-type(3):checked ~ .slide-demo {
            left: 66.66667%;
            left: calc((100% / 3) * 2)
        }

.slide-demo {
    width: 33.33333%;
    width: calc(100% / 3)
}

.tab-label-content:nth-of-type(1) .tab-content {
    left: 0
}

.tab-label-content:nth-of-type(2) .tab-content {
    left: -100%
}

.tab-label-content:nth-of-type(3) .tab-content {
    left: -200%
}

.tab-content {
    width: 300%
}

.tabs label {
    cursor: pointer;
    color: rgba(255,255,255,.8);
    background-color: #1abc9c;
    box-sizing: border-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 56px;
    transition: color .2s cubic-bezier(.64,.09,.08,1);
    will-change: color;
    width: 100%
}

.slide {
    background: #ffeb3b;
    height: 4px;
    position: absolute;
    left: 0;
    top: 52px;
    transition: left .3s cubic-bezier(.64,.09,.08,1);
    will-change: left
}

.tab-label-content {
    width: 100%
}

    .tab-label-content .tab-content {
        position: relative;
        padding: 20px;
        display: none
    }

.card.tabs .tab-label-content:first-of-type label {
    border-top-left-radius: 3px
}

.card.tabs .tab-label-content:nth-last-child(2) label {
    border-top-right-radius: 3px
}

label {
    color: #2e2e2e
}

input[type=email], input[type=text], input[type=password] {
    margin-bottom: 40px;
    width: 200px;
    display: block;
    border: none;
    padding: 10px 0;
    border-bottom: solid 1px #1abc9c;
    will-change: background-position;
    transition: all .3s cubic-bezier(.64,.09,.08,1);
    background: linear-gradient(to bottom,rgba(255,255,255,0) 96%,#1abc9c 96%);
    background-position: -200px 0;
    background-size: 200px 100%;
    background-repeat: no-repeat;
    color: #0e6252
}

    input[type=email]:focus, input[type=email]:valid, input[type=text]:focus, input[type=text]:valid, input[type=password]:focus, input[type=password]:valid {
        box-shadow: none;
        outline: 0;
        background-position: 0 0
    }

        input[type=email]:focus::-webkit-input-placeholder, input[type=email]:valid::-webkit-input-placeholder, input[type=text]:focus::-webkit-input-placeholder, input[type=text]:valid::-webkit-input-placeholder, input[type=password]:focus::-webkit-input-placeholder, input[type=password]:valid::-webkit-input-placeholder {
            color: #1abc9c;
            font-size: 11px;
            transform: translateY(-20px);
            visibility: visible !important
        }

    input[type=email]::-webkit-input-placeholder, input[type=text]::-webkit-input-placeholder, input[type=password]::-webkit-input-placeholder {
        transition: all .2s cubic-bezier(.64,.09,.08,1)
    }

input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]) {
    position: relative;
    cursor: pointer
}

    input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):before {
        content: '';
        width: 16px;
        height: 16px;
        border: 2px solid #1abc9c;
        border-radius: 3px;
        background: #fff;
        position: absolute
    }

    input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):after {
        content: '✓';
        color: #fff;
        background: #1abc9c;
        position: absolute;
        top: 0;
        left: 0;
        width: 16px;
        height: 16px;
        border: 2px solid #1abc9c;
        border-radius: 3px;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .3s cubic-bezier(.64,.09,.08,1);
        will-change: opacity
    }

input[type=radio]:after, input[type=radio]:before {
    transition: all .3s cubic-bezier(.64,.09,.08,1);
    height: 16px;
    width: 16px;
    content: ''
}

input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):checked:after {
    opacity: 1
}

input[type=checkbox]:not(.modal-trigger):not(.toggle):not(#alert-check):not([id*=lightbox-]):focus {
    outline: 0
}

input[type=radio] {
    position: relative;
    top: 2px;
    left: 2px;
    margin: 0 8px;
    cursor: pointer
}

    input[type=radio]:before {
        background-color: #fff;
        border-radius: 50%;
        border: 2px solid #1abc9c;
        display: inline-block;
        position: absolute;
        top: -2px;
        left: -2px;
        background-image: radial-gradient(circle,#1abc9c 40%,#fff 50%);
        background-size: 0;
        background-position: 50% 50%;
        background-repeat: no-repeat;
        will-change: background-size;
        z-index: 2
    }

    input[type=radio]:after {
        background: #fff;
        border-radius: 50%;
        position: absolute
    }

    input[type=radio]:checked:before {
        background-size: 14px 14px
    }

    input[type=radio]:focus, input[type=range]:focus {
        outline: 0
    }

select {
    border: none;
    border-bottom: solid 1px #9e9e9e;
    color: #212121;
    padding: 6px;
    cursor: pointer
}

input[type=range] {
    -webkit-appearance: none
}

    input[type=range]::-webkit-slider-runnable-track {
        height: 3px;
        cursor: pointer;
        background: #9e9e9e
    }

    input[type=range]::-webkit-slider-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        background: #2ecc71;
        cursor: pointer;
        -webkit-appearance: none;
        margin-top: -6px;
        box-shadow: 0 2px 5px 0 rgba(0,0,0,.1),0 2px 10px 0 rgba(0,0,0,.07)
    }

    input[type=range]::-moz-range-track {
        height: 3px;
        cursor: pointer;
        background: #9e9e9e
    }

    input[type=range]::-moz-range-thumb {
        height: 16px;
        width: 16px;
        border-radius: 50%;
        border: none;
        background: #2ecc71;
        cursor: pointer
    }

    input[type=range]::-ms-track {
        cursor: pointer;
        background: 0 0;
        border-color: transparent;
        color: transparent
    }

    input[type=range]::-ms-fill-lower {
        background: #2ecc71
    }

    input[type=range]::-ms-fill-upper {
        background: #9e9e9e
    }

    input[type=range]::-ms-thumb {
        background: #2ecc71
    }

.toggle {
    display: none
}

    .toggle:checked + label {
        background: #93e7b6
    }

        .toggle:checked + label:after {
            background: #2ecc71;
            margin-left: 18px
        }

    .toggle + label {
        position: absolute;
        width: 30px;
        height: 6px;
        margin-top: 12px;
        background: #9e9e9e;
        transition: background .3s cubic-bezier(.64,.09,.08,1);
        will-change: background
    }

        .toggle + label:after {
            position: absolute;
            content: '';
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: #dedede;
            display: inline-block;
            cursor: pointer;
            margin-top: -4px;
            margin-left: -1px;
            transition: all .3s ease;
            will-change: background,margin-left
        }

textarea {
    border: 1px solid #9e9e9e;
    transition: border .3s cubic-bezier(.64,.09,.08,1)
}

    textarea:focus {
        border: 1px solid #1abc9c;
        outline: 0
    }

label[for*=lightbox-] {
    cursor: pointer;
    width: 100%;
    transition: none
}

input[id*=lightbox-] {
    display: none
}

    input[id*=lightbox-]:checked {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%
    }

        input[id*=lightbox-]:checked:before {
            content: '';
            position: fixed;
            z-index: 9;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,.4)
        }

        input[id*=lightbox-]:checked + label {
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 50vw;
            position: fixed;
            z-index: 10
        }

.right {
    float: right
}

.left {
    float: left
}

.clear {
    clear: both
}

.inline {
    display: inline
}

.inline-block {
    display: inline-block
}

.block {
    display: block
}

.fixed {
    display: fixed
}

.no-pad {
    padding: 0
}

.no-margin-vertical {
    margin-top: 0;
    margin-bottom: 0
}

.no-margin {
    margin: 0
}

.center {
    margin: 0 auto
}

.fade-in-from-top {
    opacity: 0;
    transform: translateY(-6px);
    animation: fadeInVert .5s ease-out forwards;
    -webkit-animation: fadeInVert .5s ease-out forwards
}

.fade-in-from-bottom {
    opacity: 0;
    transform: translateY(6px);
    animation: fadeInVert .5s ease-out forwards;
    -webkit-animation: fadeInVert .5s ease-out forwards
}

@keyframes fadeInVert {
    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.fade-in-from-left {
    opacity: 0;
    transform: translateX(-6px);
    animation: fadeInHoriz .5s ease-out forwards;
    -webkit-animation: fadeInHoriz .5s ease-out forwards
}

.fade-in-from-right {
    opacity: 0;
    transform: translateX(6px);
    animation: fadeInHoriz .5s ease-out forwards;
    -webkit-animation: fadeInHoriz .5s ease-out forwards
}

@keyframes fadeInHoriz {
    to {
        opacity: 1;
        transform: translateX(0)
    }
}

.anim-delay--5 {
    animation-delay: .5s;
    -webkit-animation-delay: .5s
}

.anim-delay--10 {
    animation-delay: 1s;
    -webkit-animation-delay: 1s
}

.anim-delay--15 {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s
}

.anim-delay--20 {
    animation-delay: 2s;
    -webkit-animation-delay: 2s
}

.anim-delay--25 {
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s
}

.anim-delay--30 {
    animation-delay: 3s;
    -webkit-animation-delay: 3s
}

.anim-delay--35 {
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s
}

.anim-delay--40 {
    animation-delay: 4s;
    -webkit-animation-delay: 4s
}

.anim-delay--45 {
    animation-delay: 4.5s;
    -webkit-animation-delay: 4.5s
}

.anim-delay--50 {
    animation-delay: 5s;
    -webkit-animation-delay: 5s
}

audio, img, video {
    width: 100%;
    vertical-align: middle
}

.alert-wrap {
    position: relative
}

.alert {
    padding-bottom: 50px
}

#alert-check, #alert-check:checked ~ div, #alert-check:checked ~ label, [id*=collapsible-] {
    display: none
}

    #alert-check + label {
        position: absolute;
        right: 16px;
        bottom: 10px;
        cursor: pointer
    }

    [id*=collapsible-]:checked ~ [class*=collapsible-][class$=area] {
        transform: scaleY(1);
        height: auto;
        padding: 15px 20px;
        margin-bottom: 20px
    }

    [id*=collapsible-]:checked + label:before {
        margin-top: 6px;
        transform: rotate(-45deg) translateX(1px)
    }

    [id*=collapsible-]:checked + label:after {
        margin-top: 5px;
        transform: rotate(45deg) translate(4px,-3px)
    }

label[for*=collapsible-] {
    width: 100%;
    cursor: pointer;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding: 15px 24px;
    border-bottom: solid 1px #ebebeb;
    color: #474747;
    border-radius: 3px
}

    label[for*=collapsible-]:after, label[for*=collapsible-]:before {
        content: '';
        position: absolute;
        right: 20px;
        width: 2px;
        height: 8px;
        background: #9e9e9e;
        transition: all .3s ease
    }

    label[for*=collapsible-]:before {
        margin-top: 2px;
        transform: rotate(50deg)
    }

    label[for*=collapsible-]:after {
        margin-top: 6px;
        transform: rotate(-50deg)
    }

[class*=collapsible-][class$=area] {
    transform: scaleY(0);
    transform-origin: 0 0;
    height: 0;
    will-change: height,transform;
    transition: all .3s ease;
    padding-left: 20px
}

code {
    font-family: monospace;
    font-size: 16px;
    padding-left: 40px;
    padding-right: 40px;
    min-width: 500px;
    max-width: 800px
}

@media screen and (max-width:900px) {
    code {
        width: 400px
    }
}

@media screen and (max-width:520px) {
    code {
        width: 100%;
        min-width: 100%;
        max-width: 100%
    }
}

.bg--turqoise {
    background: #1abc9c
}

.bg--green-sea {
    background: #16a085
}

.bg--emerald {
    background: #2ecc71
}

.bg--nephritis {
    background: #27ae60
}

.bg--green {
    background: #4caf50
}

.bg--light-green {
    background: #8bc34a
}

.bg--lime {
    background: #cddc39
}

.bg--river {
    background: #3498db
}

.bg--belize {
    background: #2980b9
}

.bg--asphalt {
    background: #34495e
}

.bg--midnight-blue {
    background: #2c3e50
}

.bg--blue {
    background: #2196f3
}

.bg--light-blue {
    background: #03a9f4
}

.bg--cyan {
    background: #00bcd4
}

.bg--teal {
    background: #009688
}

.bg--alizarin {
    background: #e74c3c
}

.bg--pomegranate {
    background: #c0392b
}

.bg--red {
    background: #f44336
}

.bg--carrot {
    background: #e67e22
}

.bg--pumpkin {
    background: #d35400
}

.bg--dull-orange {
    background: #f39c12
}

.bg--orange {
    background: #ff9800
}

.bg--blood-orange {
    background: #ff5722
}

.bg--amber {
    background: #ffc107
}

.bg--sunflower {
    background: #f1c40f
}

.bg--yellow {
    background: #ffeb3b
}

.bg--amethyst {
    background: #9b59b6
}

.bg--plum {
    background: #8e44ad
}

.bg--purple {
    background: #9c27b0
}

.bg--deep-purple {
    background: #673ab7
}

.bg--pink {
    background: #e91e63
}

.bg--indigo {
    background: #3f51b5
}

.bg--brown {
    background: #795548
}

.bg--grey {
    background: #9e9e9e
}

.bg--gun-metal {
    background: #607d8b
}

.bg--asbestos {
    background: #7f8c8d
}

.bg--concrete {
    background: #95a5a6
}

.bg--silver {
    background: #bdc3c7
}

.bg--clouds {
    background: #dde4e6
}

.bg--paper {
    background: #efefef
}

.bg--black {
    background: #212121
}

.color--turqoise {
    color: #1abc9c
}

.color--green-sea {
    color: #16a085
}

.color--emerald {
    color: #2ecc71
}

.color--nephritis {
    color: #27ae60
}

.color--green {
    color: #4caf50
}

.color--light-green {
    color: #8bc34a
}

.color--lime {
    color: #cddc39
}

.color--river {
    color: #3498db
}

.color--belize {
    color: #2980b9
}

.color--asphalt {
    color: #34495e
}

.color--midnight-blue {
    color: #2c3e50
}

.color--blue {
    color: #2196f3
}

.color--light-blue {
    color: #03a9f4
}

.color--cyan {
    color: #00bcd4
}

.color--teal {
    color: #009688
}

.color--alizarin {
    color: #e74c3c
}

.color--pomegranate {
    color: #c0392b
}

.color--red {
    color: #f44336
}

.color--carrot {
    color: #e67e22
}

.color--pumpkin {
    color: #d35400
}

.color--dull-orange {
    color: #f39c12
}

.color--orange {
    color: #ff9800
}

.color--blood-orange {
    color: #ff5722
}

.color--amber {
    color: #ffc107
}

.color--sunflower {
    color: #f1c40f
}

.color--yellow {
    color: #ffeb3b
}

.color--amethyst {
    color: #9b59b6
}

.color--plum {
    color: #8e44ad
}

.color--purple {
    color: #9c27b0
}

.color--deep-purple {
    color: #673ab7
}

.color--pink {
    color: #e91e63
}

.color--indigo {
    color: #3f51b5
}

.color--brown {
    color: #795548
}

.color--grey {
    color: #9e9e9e
}

.color--gun-metal {
    color: #607d8b
}

.color--asbestos {
    color: #7f8c8d
}

.color--concrete {
    color: #95a5a6
}

.color--silver {
    color: #bdc3c7
}

.color--clouds {
    color: #dde4e6
}

.color--paper {
    color: #efefef
}

.color--white {
    color: #fff
}

.color--black {
    color: #212121
}

.color--primary {
    color: #1abc9c
}

.color--secondary {
    color: #28e1bd
}

.color--accent {
    color: #ffeb3b
}

Raw Text