surface_styles.css
Never
@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 }