pollthingy/resources/css/cutestrap.css

782 lines
54 KiB
CSS
Raw Normal View History

* {
border: 0;
font: inherit;
margin: 0;
padding: 0;
text-rendering: geometricPrecision; }
html {
box-sizing: border-box;
font-size: 62.5%;
height: 100%; }
@media screen and (min-width: 960px) {
html {
font-size: 78.125%; } }
body {
box-sizing: border-box;
color: #3c3c3d;
font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
font-size: 1.6rem;
line-height: 2.4rem;
min-height: 100%;
position: relative; }
h1, h2, h3, h4, h5, h6 {
font-family: "Avenir", "Avenir Next", "Helvetica Neue", "Segoe UI", "Verdana", sans-serif;
font-weight: 500; }
h1, h2, h3 {
line-height: 4.8rem;
padding: .8rem 0 1.6rem; }
h4, h5, h6 {
padding: 2.4rem 0; }
h1 {
font-size: 3.6rem; }
h2 {
font-size: 3.2rem; }
h3 {
font-size: 2.8rem; }
h4 {
font-size: 2.0rem; }
h5 {
font-size: 1.8rem; }
h6 {
font-size: 1.6rem; }
p {
padding-bottom: 2.4rem; }
form {
padding: 2.4rem 0; }
pre,
code,
samp,
kbd {
background-color: #efeff0;
font-size: 1.2rem;
color: #e528b0;
font-family: "Consolas", "Monaco", "Courier New", monospace;
line-height: 1; }
code,
samp,
kbd {
border-radius: 2px;
overflow-y: hidden;
overflow-x: auto;
padding: .4rem .4rem .2rem; }
pre {
border-radius: 2px;
line-height: 2.4rem;
overflow-y: hidden;
overflow-x: auto;
padding: 1.2rem 1rem;
margin: 0 0 2.4rem; }
pre code,
pre samp,
pre kbd {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0; }
a:link {
color: #4076D4; }
a:visited {
color: #9140D4; }
a:hover,
a:focus {
color: #2e68cc; }
a:active {
color: #D44076; }
img,
video {
max-width: 100%;
display: table; }
hr {
height: 4.8rem;
margin-bottom: 2.4rem;
position: relative; }
hr:before {
background-color: #cdcdce;
content: '';
height: 1px;
position: absolute;
top: 50%;
width: 100%; }
ol,
ul {
margin-left: 2rem;
padding: 0 0 2.4rem; }
ol {
list-style-type: decimal; }
ol ol {
padding-bottom: 0; }
ul {
list-style-type: disc; }
ul ul {
padding-bottom: 0; }
dt {
font-style: italic; }
dd {
text-indent: 2rem; }
blockquote {
margin: 0 0 2.4rem 1.2rem;
border-left: 0.3rem solid #cdcdce;
padding: 2.4rem 1.2rem; }
blockquote p:last-child {
padding-bottom: 0; }
figure {
margin: 0 auto;
padding-bottom: 2.4rem; }
figure img {
display: table;
margin: 0 auto; }
small,
sub,
sup {
font-size: 1.2rem;
line-height: 1; }
caption,
figcaption {
font-size: 1.2rem;
font-style: italic;
text-align: center; }
em,
cite,
i {
font-style: italic; }
strong,
var,
b {
font-weight: bold; }
q:before {
content: "'"; }
q:after {
content: "'"; }
q > q {
font-style: italic; }
dfn,
abbr {
border-bottom: 0.1rem dotted #5a5a5b;
cursor: default; }
table {
border-radius: 2px;
border-collapse: separate;
border-spacing: 0;
margin-bottom: 2.4rem;
width: 100%; }
table th {
font-weight: 500;
text-align: left; }
table th, table td {
padding: 0 .6rem; }
label {
color: #7d7d7e; }
input,
label,
select,
button,
textarea {
display: block;
resize: none;
-webkit-appearance: none;
-moz-appearance: none; }
/* remove yellow from chrome auto-fill background */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
color: #3c3c3d;
-webkit-text-fill-color: #3c3c3d;
-webkit-box-shadow: 0 0 0px 1000px white inset !important; }
/*
Utilities
These utility classes have one or two CSS properties that are meant to save you from creating several identical classes to do the same thing, like just centering some text.
Markup:
<div class="{{modifier_class}}" style="background-color: #ddd">
Example Text
</div>
.disabled - Disable an Element
.smooth - Smoothed font rendering
.clearfix - Clear floats to keep the parent container in shape
.f-none - float: none;
.f-left - float: left;
.f-right - float: right;
.ta-left - text-align: left;
.ta-center - text-align: center;
.ta-right - text-align: right;
Styleguide 4.0
*/
.disabled, .radio [disabled],
.checkbox [disabled],
.select [disabled],
.textfield [disabled], .radio [disabled] + *,
.checkbox [disabled] + *,
.select [disabled] + *,
.textfield [disabled] + *, [type=button][disabled],
[type=submit][disabled],
button[disabled] {
cursor: default;
opacity: .5;
pointer-events: none; }
.smooth {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
.f-none {
float: none; }
.f-left {
float: left; }
.f-right {
float: right; }
.clearfix {
clear: both;
overflow: hidden; }
.ta-left {
text-align: left; }
.ta-center {
text-align: center; }
.ta-right {
text-align: right; }
/*
Type Utilities
These are specific typography related utilities
Markup:
<div class="type {{modifier_class}}">
The quick brown fox jumps over the lazy dog.
</div>
.fs-small - Smaller than the default font size
.fs-base - Exactly the default font size
.fs-large - Larger than the default font size
.fw-light - Changes the type to be 300 weight
.fw-normal - Changes the type to be 400 weight
.fw-semibold - Changes the type to be 600 weight
.fw-bold - Changes the type to be 700 weight
Styleguide 4.1
*/
.fs-small {
font-size: 1.2rem; }
.fs-base {
font-size: 1.6rem; }
.fs-large {
font-size: 2rem; }
.fw-light {
font-weight: 300; }
.fw-normal {
font-weight: 400; }
.fw-semibold {
font-weight: 600; }
.fw-bold {
font-weight: 700; }
/*
Buttons
Buttons and their variations
Markup:
<a href="#" class="btn {{modifier_class}}">Button</a>
.btn--secondary - A link that's sized like a button
.btn--link - A link that's sized like a button
Styleguide 2.0
*/
.btn, [type=button],
[type=submit],
button {
background-color: #E83FB8;
border: none;
border-radius: .2rem;
box-sizing: border-box;
color: #ffffff;
cursor: pointer;
display: inline-block;
height: 4.8rem;
line-height: 4.8rem;
max-width: 100%;
-webkit-transition-property: background-color;
transition-property: background-color;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
margin: 0 auto;
padding: 0 3rem;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: auto; }
.btn:link, [type=button]:link,
[type=submit]:link,
button:link, .btn:visited, [type=button]:visited,
[type=submit]:visited,
button:visited {
color: #ffffff;
text-decoration: none; }
.btn:focus, [type=button]:focus,
[type=submit]:focus,
button:focus, .btn:hover, [type=button]:hover,
[type=submit]:hover,
button:hover {
background-color: #e528b0;
color: #ffffff; }
.btn:focus, [type=button]:focus,
[type=submit]:focus,
button:focus {
outline: 0.1rem dotted #7d7d7e; }
.btn:active, [type=button]:active,
[type=submit]:active,
button:active {
background-color: #E83FB8; }
.btn--secondary {
background-color: #efeff0;
color: #3c3c3d; }
.btn--secondary:link, .btn--secondary:visited {
color: #3c3c3d; }
.btn--secondary:focus, .btn--secondary:hover {
background-color: #dededf;
color: #3c3c3d; }
.btn--secondary:active {
color: #7d7d7e; }
.btn--link {
background-color: transparent;
color: #4076D4;
text-decoration: underline; }
.btn--link:link {
color: #4076D4; }
.btn--link:visited {
color: #9140D4; }
.btn--link:focus, .btn--link:hover {
color: #2e68cc;
background-color: transparent; }
.btn--link:active {
color: #D44076;
background-color: transparent; }
/*
Forms
Markup:
<form>
<label class="textfield">
<input type="text" />
<span class="textfield__label">Name</span>
</label>
<label class="radio">
<input type="radio" name="example" />
<span class="radio__label">Desktop</span>
</label>
<label class="radio">
<input type="radio" name="example" />
<span class="radio__label">Mobile</span>
</label>
<label class="select">
<select name="select">
<option disabled="disabled" selected="selected">Flavors</option>
<option>Chocolate</option>
</select>
<span class="select__label" for="select">Favorite Ice Cream</span>
</label>
<label class="textfield">
<textarea></textarea>
<span class="textfield__label">Comments</span>
</label>
<label class="checkbox">
<input type="checkbox" />
<span class="checkbox__label">I Lied</span>
</label>
<br/>
<input type="submit" value="Cross My Heart" />
<button>okay</button>
<button>not okay</button>
</form>
Styleguide 3.0
*/
.radio,
.checkbox {
cursor: pointer;
display: inline-block;
margin-bottom: 2.4rem;
padding: 0 1rem 0 3rem;
position: relative; }
.radio:before,
.checkbox:before {
background-color: #fff;
border: 2px solid #7d7d7e;
content: '';
height: 16px;
left: 0;
margin-top: -10px;
position: absolute;
top: 50%;
width: 16px; }
.checkbox input[type=checkbox],
.radio input[type=radio] {
opacity: 0;
position: absolute;
z-index: -1; }
.radio__label,
.checkbox__label {
color: #7d7d7e;
font-size: 1.2rem;
line-height: 1; }
.radio__label:after,
.checkbox__label:after {
border: 1px solid transparent;
content: '';
height: 18px;
left: 0;
margin-top: -10px;
position: absolute;
top: 50%;
width: 18px; }
.radio input[type=radio]:focus + .radio__label:after,
.checkbox input[type=checkbox]:focus + .checkbox__label:after {
border-color: #E83FB8;
box-shadow: 0 1px 2px 1px #dededf inset; }
.textfield,
.select {
background-color: #ffffff;
display: block;
margin-top: -2px;
margin-bottom: 2.4rem;
position: relative; }
.textfield__label,
.select__label {
background-color: #ffffff;
font-size: 1.2rem;
position: absolute;
left: 1px;
line-height: 1;
padding: .5rem;
right: 1px;
top: 1px; }
.textfield input,
.textfield textarea,
.select select {
background-color: transparent;
border: 1px solid #7d7d7e;
border-radius: 2px;
box-sizing: border-box;
padding: 1.8rem .5rem .6rem;
position: relative;
width: 100%; }
.textfield *:focus,
.select select:focus {
border-color: #E83FB8;
box-shadow: 0 1px 2px 0 #dededf inset;
outline: none; }
/*
Radio
Markup:
<label class="radio {{modifier_class}}">
<input type="radio" />
<span class="radio__label">Radio</span>
</label>
Styleguide 3.1
*/
.radio:before,
.radio__label:after {
border-radius: 20px; }
.radio input[type=radio]:checked + .radio__label:before {
background-color: #e528b0;
border-radius: 20px;
content: '';
height: 10px;
left: 5px;
margin-top: -5px;
position: absolute;
top: 50%;
width: 10px; }
/*
Checkbox
Markup:
<label class="checkbox {{modifier_class}}">
<input type="checkbox" />
<span class="checkbox__label">Checkbox</span>
</label>
Styleguide 3.2
*/
.checkbox:before,
.checkbox__label:after {
border-radius: 2px; }
.checkbox input[type=checkbox]:checked + .checkbox__label:after {
color: #e528b0;
content: '\2714';
font-size: 14px;
line-height: 18px;
text-align: center; }
/*
Input and text areas
Markup:
<label class="textfield {{modifier_class}}">
<input type="text" />
<span class="textfield__label">Input</span>
</label>
<label class="textfield {{modifier_class}}">
<textarea></textarea>
<span class="textfield__label">Textarea</span>
</label>
Styleguide 3.3
*/
/*
Select
Markup:
<label class="select {{modifier_class}}">
<select>
<option disabled="disabled" selected="selected">Select</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
<span class="select__label">Select Label</span>
</label>
Styleguide 3.4
*/
.select:after {
content: '';
border-left: .6rem solid transparent;
border-right: .6rem solid transparent;
border-top: 0.6rem solid #7d7d7e;
height: 0;
margin-top: -.5rem;
position: absolute;
right: 1rem;
bottom: 1.3rem;
width: 0; }
.select select {
z-index: 100; }
.select option[disabled] {
background-color: #efeff0;
color: #5a5a5b; }
/*
Grid
Basic grid made using flexbox. By default, the grid is collapsed on small screens.
Markup:
<main class="grid {{modifier_class}}">
<section class="">
Cell 1
</section>
<article class="grid">
Cell 2
</article>
</main>
.grid--medium - Grid starts at medium sized screens
.grid--large - Grid starts at large and up screens
Styleguide 1.0
*/
/*
Direct children of `.grid` are columns.
Markup:
<main class="grid">
<section class="{{modifier_class}}">
Cell 1
</section>
<article class="grid">
<p class="grid {{modifier_class}}">
Cell 2.1
</p>
<div>
<p>Cell 2.2</p>
</div>
</article>
</main>
.column--light - Less important column
.column--heavy - More important column
Styleguide 1.1
*/
.grid {
display: -ms-flexbox;
display: -webkit-box;
display: flex; }
.grid > * {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-flex: 4;
-ms-flex-positive: 4;
flex-grow: 4;
padding-left: 1rem;
padding-right: 1rem; }
.grid > *:first-child {
margin-left: -1rem; }
.grid > *:last-child {
margin-right: -1rem; }
.grid > *.column--light {
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2; }
.grid > *.column--heavy {
-webkit-box-flex: 8;
-ms-flex-positive: 8;
flex-grow: 8; }
@media (max-width: 599px) {
.grid--medium {
display: block; }
.grid--medium > * {
padding-left: 0;
padding-right: 0; }
.grid--medium > *:first-child {
margin-left: 0; }
.grid--medium > *:last-child {
margin-right: 0; } }
@media (max-width: 959px) {
.grid--large {
display: block; }
.grid--large > * {
padding-left: 0;
padding-right: 0; }
.grid--large > *:first-child {
margin-left: 0; }
.grid--large > *:last-child {
margin-right: 0; } }
/*
Wrappers
Use wrappers when you need a content area that is a standardized width and centered on the page.
Markup:
<div class="wrapper {{modifier_class}}">Wrapper</div>
.wrapper-small - Small Wrapper
.wrapper-large - Large Wrapper
Styleguide 1.2
*/
.wrapper {
margin: 0 auto;
max-width: 960px;
padding: 4.8rem 2rem; }
.wrapper-large {
margin: 0 auto;
max-width: 1200px;
padding: 7.2rem 2rem; }
.wrapper-small {
margin: 0 auto;
max-width: 640px;
padding: 2.4rem 2rem; }
/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY3V0ZXN0cmFwLmNzcyIsInNvdXJjZXMiOlsiY3V0ZXN0cmFwLnNjc3MiLCJfdmFyaWFibGVzLnNjc3MiLCJ2YXJpYWJsZXMvX2NvbG9ycy5zY3NzIiwidmFyaWFibGVzL190eXBlLnNjc3MiLCJ2YXJpYWJsZXMvX3pfaW5kZXguc2NzcyIsIl9zdXBwb3J0LnNjc3MiLCJzdXBwb3J0L19iYXNlLnNjc3MiLCJzdXBwb3J0L191dGlsaXRpZXMuc2NzcyIsIl9jb21wb25lbnRzLnNjc3MiLCJjb21wb25lbnRzL19idXR0b25zLnNjc3MiLCJjb21wb25lbnRzL19mb3Jtcy5zY3NzIiwiY29tcG9uZW50cy9fZ3JpZC5zY3NzIl0sInNvdXJjZXNDb250ZW50IjpbIkBpbXBvcnQgXCJ2YXJpYWJsZXNcIjtcbkBpbXBvcnQgXCJzdXBwb3J0XCI7XG5AaW1wb3J0IFwiY29tcG9uZW50c1wiO1xuIiwiLy8gIHZhcmlhYmxlcy9cblxuQGltcG9ydCBcInZhcmlhYmxlcy9jb2xvcnNcIjtcbkBpbXBvcnQgXCJ2YXJpYWJsZXMvdHlwZVwiO1xuQGltcG9ydCBcInZhcmlhYmxlcy96X2luZGV4XCI7XG4iLCIvLyBBIGJlYXV0aWZ1bCBzZWxlY3Rpb24gb2Ygb3VyIGJyYW5kZWQgY29sb3JzXG4vL1xuLy8gU3R5bGVndWlkZVxuXG4vLyBwcmltYXJ5IGNvbG9yc1xuJHByaW1hcnk6ICAgICAgICNFODNGQjggIWRlZmF1bHQ7XG4kcHJpbWFyeS1kYXJrOiAgZGFya2VuKCRwcmltYXJ5LCA1JSkgIWRlZmF1bHQ7XG5cbiRsaW5rOiAgICAgICAgICAjNDA3NkQ0ICFkZWZhdWx0O1xuJGxpbmstLXZpc2l0ZWQ6ICM5MTQwRDQgIWRlZmF1bHQ7XG4kbGluay0taG92ZXI6ICAgZGFya2VuKCRsaW5rLCA1JSkgIWRlZmF1bHQ7XG4kbGluay0tYWN0aXZlOiAgI0Q0NDA3NiAhZGVmYXVsdDtcblxuLy8gZGFyayBzaGFkZXNcbiRncmF5MTogICAgICAgICAjM2MzYzNkICFkZWZhdWx0O1xuJGdyYXkyOiAgICAgICAgICM1YTVhNWIgIWRlZmF1bHQ7XG4kZ3JheTM6ICAgICAgICAgIzdkN2Q3ZSAhZGVmYXVsdDtcblxuLy8gbGlnaHQgc2hhZGVzXG4kZ3JheTQ6ICAgICAgICAgI2NkY2RjZSAhZGVmYXVsdDtcbiRncmF5NTogICAgICAgICAjZGVkZWRmICFkZWZhdWx0O1xuJGdyYXk2OiAgICAgICAgICNlZmVmZjAgIWRlZmF1bHQ7XG5cbiR3aGl0ZTogICAgICAgICAjZmZmZmZmICFkZWZhdWx0O1xuIiwiLy8gRm9udCBiYXNlZCB2YXJpYWJsZXNcbi8vXG4vLyBTdHlsZWd1aWRlXG5cbiRiYXNlLWZvbnQ6ICAgICAgICdBdmVuaXInLCAnQXZlbmlyIE5leHQnLCdIZWx2ZXRpY2EgTmV1ZScsJ1NlZ29lIFVJJywgJ1ZlcmRhbmEnLCBzYW5zLXNlcmlmICFkZWZhdWx0O1xuJG1vbm9zcGFjZS1mb250OiAgJ0NvbnNvbGFzJywgJ01vbmFjbycsICdDb3VyaWVyIE5ldycsIG1vbm9zcGFjZSAhZGVmYXVsdDtcblxuJGhlYWRpbmc6ICAgICAgICAgJGJhc2UtZm9udCAhZGVmYXVsdDtcbiRib2R5OiAgICAgICAgICAgICRiYXNlLWZvbnQgIWRlZmF1bHQ7XG4kbW9ub3NwYWNlOiAgICAgICAkbW9ub3NwYWNlLWZvbnQgIWRlZmF1bHQ7XG5cbiRmb250LXNpemU6IDEuNnJlbSAhZGVmYXVsdDtcbiRsaW5lLWhlaWdodDogMi40cmVtICFkZWZhdWx0O1xuXG4kZm9udC1zaXplLS1zbWFsbDogMS4ycmVtICFkZWZhdWx0O1xuJGZvbnQtc2l6ZS0tbGFyZ2U6IDJyZW0gIWRlZmF1bHQ7XG4iLCIvLyB6LWluZGV4IHZhcmlhYmxlc1xuLy9cbi8vIFN0eWxlZ3VpZGVcblxuJHotaW5kZXgtMDogICAtMTtcbiR6LWluZGV4LTE6ICAgMTAwO1xuJHotaW5kZXgtMjogICAyMDA7XG4kei1pbmRleC0zOiAgIDMwMDtcbiR6LWluZGV4LTQ6ICAgNDAwO1xuJHotaW5kZXgtNTogICA1MDA7XG4kei1pbmRleC02OiAgIDYwMDtcbiR6LWluZGV4LTc6ICAgNzAwO1xuJHotaW5kZXgtODogICA4MDA7XG4kei1pbmRleC05OiAgIDkwMDtcbiR6LWluZGV4LTEwOiAxMDAwO1xuIiwiLy8gc3VwcG9ydC9cblxuQGltcG9ydCBcInN1cHBvcnQvYmFzZVwiO1xuQGltcG9ydCBcInN1cHBvcnQvdXRpbGl0aWVzXCI7XG4iLCIqe1xuICBib3JkZXI6IDA7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgdGV4dC1yZW5kZXJpbmc6IGdlb21ldHJpY1ByZWNpc2lvbjtcbn1cblxuaHRtbHtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgZm9udC1zaXplOiA2Mi41JTtcbiAgaGVpZ2h0OiAxMDAlO1xuXG4gIEBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDk2MHB4KXtcbiAgICBmb250LXNpemU6IDc4LjEyNSU7XG4gIH1cbn1cblxuYm9keXtcbiAgYm94LXNpemluZzogYm9yZGVyLWJveDtcbiAgY29sb3I6ICRncmF5MTtcbiAgZm9udC1mYW1pbHk6ICRiYXNlLWZvbnQ7XG4gIGZvbnQtc2l6ZTogJGZvbnQtc2l6ZTtcbiAgbGluZS1oZWlnaHQ6ICRsaW5lLWhlaWdodDtcbiAgbWluLWhlaWdodDogMTAwJTtcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xufVxuXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2e1xuICBmb250LWZhbWlseTogJGhlYWRpbmc7XG4gIGZvbnQtd2VpZ2h0OiA1MDA7XG59XG5cbmgxLCBoMiwgaDN7XG4gIGxpbmUtaGVpZ2h0OiA0LjhyZW07XG4gIHBhZGRpbmc6IC44cmVtIDAgMS42cmVtO1xufVxuXG5oNCwgaDUsIGg2e1xuICBwYWRkaW5nOiAyLjRyZW0gMDtcbn1cblxuaDF7XG4gIGZvbnQtc2l6ZTogMy42cmVtO1xufVxuXG5oMntcbiAgZm9udC1zaXplOiAzLjJyZW07XG59XG5cbmgze1xuICBmb250LXNpemU6IDIuOHJlbTtcbn1cblxuaDR7XG4gIGZvbnQtc2l6ZTogMi4wcmVtO1xufVxuXG5oNXtcbiAgZm9udC1zaXplOiAxLjhyZW07XG59XG5cbmg2e1xuICBmb250LXNpemU6IDEuNnJlbTtcbn1cblxucHtcbiAgcGFkZGluZy1ib3R0b206IDIuNHJlbTtcbn1cblxuZm9ybXtcbiAgcGFkZGluZzogMi40cmVtIDA7XG59XG5cbnByZSxcbmNvZGUsXG5zYW1wLFxua2Jke1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAkZ3JheTY7XG4gIGZvbnQtc2l6ZTogJGZvbnQtc2l6ZS0tc21hbGw7XG4gIGNvbG9yOiAkcHJpbWFyeS1kYXJrO1xuICBmb250LWZhbWlseTogJG1vbm9zcGFjZTtcbiAgbGluZS1oZWlnaHQ6IDE7XG59XG5cbmNvZGUsXG5zY