br, h1, h2, h3, h4, h5, h6, hr {
    border:var(--one-pixel) solid transparent
}

blockquote, cite, q, time {
    letter-spacing:var(--one-pixel)
}

h1, h2, h3, h4, h5, h6, ol, ul {
    margin:0 0 var(--thirty-pixel)
}

[data-mode=switcher] [type=checkbox] + label span, br, hr, input, meter, progress, select {
    height:var(--thirtytwo-pixel)
}

h1, h2, h3, h4, h5, h6, table {
    line-height:var(--sixtyfour-pixel)
}

nav form input[type=submit], td, th {
    padding:0 var(--fifteen-pixel)
}

area, audio, canvas, img, map, object, svg, video {
    max-width:100%
}

blockquote, figure {
    margin:var(--thirtytwo-pixel) 0
}

#page-footer, figure figcaption, input + em {
    color:var(--color-white)
}

ins, nav a:hover, nav label:hover, u {
    text-decoration:underline
}

#layout strong, header p {
    letter-spacing:.1em
}

.pophover:hover:after, .tooltip:hover:before {
    box-shadow: 0 0 .25em rgba(0, 0, 0, .2);
    border:1px solid currentColor
}

* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-weight: 100;
    font-family: "San Francisco"
}

*, :focus, :hover, :hover:after, :hover:before, :target {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition:1s
}

::-moz-selection {
    background-color: #d00;
    color:var(--color-white)
}

::selection {
    background-color: #d00;
    color:var(--color-white)
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust:100%
}

body {
    background-color: var(--color-white);
    color: var(--color-black);
    font-family: var(--font-default);
    font-size: var(--twenty-pixel);
    line-height: var(--thirtytwo-pixel);
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    vertical-align:baseline
}

@font-face {
    font-family: "San Francisco";
    font-weight:100
}

@font-face {
    font-family: "San Francisco";
    font-weight: 200;
    src: url("https://isardmiralles.com/hipertextos/fonts/sanfrancisco/sanfranciscodisplay-thin-webfont.woff")
}

@font-face {
    font-family: "San Francisco";
    font-weight: 400;
    src: url("https://isardmiralles.com/hipertextos/fonts/sanfrancisco/sanfranciscodisplay-regular-webfont.woff")
}

@font-face {
    font-family: "San Francisco";
    font-weight: 500;
    src: url("https://isardmiralles.com/hipertextos/fonts/sanfrancisco/sanfranciscodisplay-medium-webfont.woff")
}

@font-face {
    font-family: "San Francisco";
    font-weight: 600;
    src: url("https://isardmiralles.com/hipertextos/fonts/sanfrancisco/sanfranciscodisplay-semibold-webfont.woff")
}

@font-face {
    font-family: "San Francisco";
    font-weight: 700;
    src: url("https://isardmiralles.com/hipertextos/fonts/sanfrancisco/sanfranciscodisplay-bold-webfont.woff")
}

article, aside, blockquote, cite, details, figcaption, figure, footer, header, hgroup, main, nav, pre, section, summary {
    display: block;
    position:relative
}

audio, canvas, progress, video {
    display: inline-block;
    vertical-align:baseline
}

#layout-cards:checked ~ #layout-result article h3, #layout-cards:checked ~ #layout-result article nav a, #layout-cards:checked ~ #layout-result article strong, #layout-gallery:checked ~ #layout-result article h3, #layout-gallery:checked ~ #layout-result article nav, #layout-gallery:checked ~ #layout-result article strong, #layout-simple:checked ~ #layout-result article nav, #layout-simple:checked ~ #layout-result article nav a, .cards article h3, .cards article nav a, .cards article strong, .gallery article h3, .gallery article nav, .gallery article strong, .simple article nav, .simple article nav a, [hidden], input:checked ~ .alert, strong input[type=checkbox], strong input[type=radio], template {
    display:none
}

a, button, input[type=button], input[type=checkbox], input[type=file], input[type=radio], input[type=submit], nav label, select, strong [type=checkbox] + label, strong [type=radio] + label, summary {
    cursor:pointer
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    padding: 0;
    text-rendering:optimizeLegibility
}

code, em a, em button, em div a, em label, em small a, em small button, em small label, figure figcaption, h4, h5, h6, nav, nav form input[type=submit], ol, p, pre, small, ul {
    line-height:var(--thirtytwo-pixel)
}

h1 {
    font-size:3em
}

h2 {
    font-size:2.4em
}

h3 {
    font-size:2em
}

h4 {
    font-size:1.8em
}

h5 {
    font-size:1.6em
}

.units:after, [class * =units]:after, [class * =units]:before, h6 {
    font-size:1em
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
    font-size: 50%;
    font-weight: 400;
    letter-spacing:.1em
}

h1 u, h2 u, h3 u, h4 u, h5 u, h6 u {
    text-decoration:none
}

h1 u:after, h2 u:after, h3 u:after, h4 u:after, h5 u:after, h6 u:after {
    border: thin solid #eee;
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    width:99.8%
}

hr {
    clear: both;
    display: block;
    margin-bottom:var(--thirty-pixel)
}

abbr[title] {
    border-bottom: thin dotted currentColor;
    cursor:help
}

address {
    display: inline-block;
    font-style:italic
}

b {
    font-weight:700
}

blockquote, cite {
    font-weight:200
}

blockquote {
    border-left: .5em solid currentColor;
    padding:var(--thirtytwo-pixel)
}

cite {
    clear: both;
    font-size:75%
}

del {
    text-decoration:line-through
}

em {
    font-style:normal
}

i, ins {
    font-style:italic
}

kbd {
    background-color: transparent;
    border: var(--one-pixel) solid currentColor;
    border-radius: var(--four-pixel);
    display: inline;
    padding:.15em .25em
}

dd, dt, ol, summary, ul {
    border:var(--one-pixel) solid transparent
}

mark {
    background: inherit;
    border: var(--one-pixel) solid currentColor;
    font-weight:700
}

code, p, pre {
    font-size:var(--twenty-pixel)
}

small {
    font-size:var(--fifteen-pixel)
}

strong {
    color: inherit;
    font-weight:500
}

sub, sup {
    font-size: 75%;
    line-height:0
}

li {
    list-style: disc inside;
    padding-left:var(--fifteen-pixel)
}

ol li {
    list-style-type:decimal
}

dt, summary {
    font-weight:700
}

summary:focus {
    outline:0
}

details {
    clear:both
}

[contenteditable=true], button, datalist, form, input, label, legend, optgroup, option, select, textarea {
    background-color: transparent;
    font-size: var(--twenty-pixel);
    line-height: var(--thirtytwo-pixel);
    position:relative
}

#theme-soft:checked ~ #page nav a:hover, #theme-soft:checked ~ #page nav label:hover, button, caption, col, colgroup, input, textarea, tfoot, thead {
    background-color:var(--color-translucentwhite)
}

select, table {
    background-color:transparent
}

input, select {
    padding:0 var(--sixteen-pixel)
}

input:invalid {
    border: var(--one-pixel) solid currentColor;
    color:var(--color-black)
}

.circle, .site-logo img, input[type=radio], strong input[type=radio] + label:before {
    border-radius:50%
}

meter, progress, select, textarea {
    border:var(--one-pixel) solid currentColor
}

input[type=checkbox]:checked, input[type=radio]:checked, strong input:focus + label, strong input[type=checkbox]:checked + label, strong input[type=radio]:checked + label {
    color:var(--color-green)
}

input[type=range] {
    border-color:transparent
}

input[type=submit] {
    background:var(--color-translucentwhite)
}

fieldset, form {
    background-color: inherit;
    width:100%
}

fieldset, label {
    background: 0 0;
    padding:0 var(--four-pixel)
}

meter, progress {
    margin: var(--thirty-pixel) 0;
    width:100%
}

meter::-webkit-meter-bar, progress::-webkit-progress-bar {
    background:var(--color-grey)
}

progress::-webkit-progress-value {
    background:var(--color-blue)
}

meter::-webkit-meter-optimum-value {
    background:var(--color-green)
}

progress::-moz-progress-bar {
    background:var(--color-black)
}

meter::-moz-meter-bar {
    background:var(--color-green)
}

select {
    -webkit-appearance: none;
    -moz-appearance:none
}

textarea {
    cursor: text;
    overflow: auto;
    padding: 0 var(--sixteen-pixel);
    width:100%
}

[contenteditable=true]:focus, input:focus, textarea:focus {
    border-radius: var(--four-pixel);
    box-shadow: inset 0 0 .25em rgba(0, 0, 255, .1), 0 0 .15em var(--color-blue);
    color: inherit;
    outline:0
}

[contenteditable=true]:focus:before {
    content: '\270E';
    font-family: var(--font-default);
    font-size: var(--thirtytwo-pixel);
    position: absolute;
    top: 0;
    right:var(--two-pixel)
}

input + em {
    background: var(--color-translucentblack);
    border: var(--one-pixel) solid currentColor;
    margin-left: -var(--one-pixel);
    padding:calc(3 * var(--one-pixel)) var(--sixteen-pixel)
}

em a, em button, em div a, em label, th {
    background:var(--color-translucentwhite)
}

strong input[type=checkbox] + label:before, strong input[type=radio] + label:before {
    border: 2px solid currentColor;
    content: ' ';
    cursor: pointer;
    display: block;
    float: left;
    font-size: var(--thirtytwo-pixel);
    font-weight: 700;
    height: var(--thirty-pixel);
    margin: 0 1em 0 0;
    width:var(--thirty-pixel)
}

strong input {
    border-bottom: var(--one-pixel) solid currentColor;
    color: inherit;
    display: block;
    padding: var(--thirtytwo-pixel);
    width:100%
}

strong input + label {
    display: block;
    font-weight: 700;
    padding:var(--thirtytwo-pixel) 0
}

.menu, nav a, nav form input:focus ~ input[type=submit], nav label {
    display:inline-block
}

strong input:focus {
    border-left: 5px solid currentColor;
    box-shadow: none;
    color:var(--color-green)
}

strong input[type=checkbox]:checked + label:before, strong input[type=radio]:checked + label:before {
    border: 2px solid var(--color-green);
    color: var(--color-green);
    content: '\2713'
}

strong select {
    height: var(--sixtyfour-pixel);
    width:100%
}

[data-mode=switcher] [type=checkbox] + label, [data-mode=switcher] [type=checkbox] + label span {
    border: var(--one-pixel) solid currentColor;
    border-radius: var(--thirtytwo-pixel);
    cursor: pointer;
    display: block;
    float: left;
    height: var(--thirtytwo-pixel);
    margin-right: 1em;
    padding: 0;
    width:var(--sixtyfour-pixel)
}

[data-mode=switcher] [type=checkbox] + label {
    background-color:#ddd
}

[data-mode=switcher] [type=checkbox] + label span {
    background-color: #fff;
    width:var(--thirtytwo-pixel)
}

[data-mode=switcher] [type=checkbox]:checked + label {
    background-color: var(--color-green);
    color:var(--color-green)
}

[data-mode=switcher] [type=checkbox]:checked + label span {
    margin-left:var(--thirtytwo-pixel)
}

caption, table, tbody, td, tfoot, th, thead, tr {
    border: thin solid transparent;
    font-weight: 200;
    text-align: left;
    vertical-align:top
}

em a, em button, em div a, em label, table {
    border:var(--one-pixel) solid currentColor
}

nav, td, th {
    border-bottom:var(--one-pixel) solid currentColor
}

table {
    border-spacing: 0;
    margin: var(--seven-pixel) 0;
    width:100%
}

th {
    font-weight:700
}

em a, em button, em div a, em label {
    cursor: pointer;
    display: inline-block;
    font-size: var(--twenty-pixel);
    padding: var(--sixteen-pixel);
    text-align: center;
    text-decoration: none;
    vertical-align:middle
}

em div a, nav {
    display:block
}

em small a, em small button, em small label {
    height: var(--sixtyfour-pixel);
    font-size: var(--twenty-pixel);
    font-style: normal;
    padding: var(--fifteen-pixel);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: var(--sixtyfour-pixel);
    text-align:center
}

u em a, u em button, u em label {
    box-shadow:inset 0 -2px 1px currentColor
}

del em a, del em button, del em label, ins em a, ins em button, ins em label {
    cursor: progress;
    opacity: .5;
    -moz-opacity: 0.5;
    text-decoration:none
}

del em a, del em button, del em label {
    cursor: not-allowed;
    text-decoration:line-through
}

em div a {
    text-decoration:none
}

strong em a, strong em button, strong em label, strong em small a {
    border-radius: 0;
    float: left;
    margin: 0;
    margin-left: -var(--one-pixel);
    margin-top: -var(--one-pixel);
    position:relative
}

nav a, nav label, nav ul {
    border:var(--one-pixel) solid transparent
}

nav {
    margin-bottom: -var(--fifteen-pixel);
    position:relative
}

nav a, nav label {
    font-weight: 700;
    padding: var(--seven-pixel);
    text-decoration:none
}

article > nav a, article > nav label, aside > nav a, aside > nav label {
    border-color:currentColor
}

nav ul {
    padding:0 0 var(--fifteen-pixel)
}

nav li {
    list-style:none
}

#tools-check:checked ~ #tools-nav, .accordion li input:checked ~ div[hidden], .collapser input:checked ~ div[hidden], .menu input:checked ~ nav[hidden], .tabs input:checked ~ div[hidden], input:checked ~ .overlay, input:checked ~ .overlay-transparent, input:checked ~ dialog, nav li a, nav li label {
    display:block
}

nav a img, nav a svg, nav label img, nav label svg {
    height: var(--twenty-pixel);
    margin: 0 var(--fifteen-pixel);
    width:var(--twenty-pixel)
}

article footer + nav, aside footer + nav, dialog > nav, section footer + nav {
    border-top: var(--one-pixel) solid currentColor;
    border-bottom: var(--one-pixel) solid transparent;
    padding: var(--twenty-pixel);
    text-align:right
}

#site-nav {
    background: var(--color-nav) !important;
    border-bottom: none;
    font-size: 17px;
    color: #141414;
    text-align: right !important;
    padding-top: 8px;
    padding-bottom:6px
}

.nav-logo {
    padding: 1px !important;
    margin-right: 8px;
    min-width: 40px;
    height: 40px;
    filter:invert(80%)
}

#site-nav a {
    font-weight: 400;
    border: none;
    -webkit-transition: .1s;
    -moz-transition: .1s;
    -ms-transition: .1s;
    -o-transition: .1s;
    transition:.1s
}

#site-nav a:visited {
    color: var(--color-hardgrey);
    text-decoration:none
}

#site-nav a b:hover, #site-nav a:hover {
    color: var(--color-hardgrey) !important;
    opacity: .69;
    text-decoration:none
}

#site-nav a b {
    font-weight: lighter;
    font-size: 30px;
    z-index: 1;
    padding-left:6px
}

.home-nav {
    float:left !important
}

#current-nav, #current-nav a:visited, #current-nav:visited {
    color: var(--color-grey);
    font-weight:400 !important
}

#site-nav label {
    color: var(--color-grey);
    border:thin solid transparent
}

#site-nav label:hover {
    color: var(--color-grey);
    text-decoration:none
}

nav form {
    display: block;
    position: absolute;
    text-align: right;
    top: var(--fifteen-pixel);
    right: 0;
    width: 8em;
    z-index:2
}

nav li form {
    position: relative;
    text-align: left;
    width:100%
}

nav form input, nav form input:focus {
    background-color: var(--color-white);
    border-radius: var(--twenty-pixel);
    position: relative;
    text-align:center
}

nav form input[type=text] {
    width:5em
}

nav form input[type=text]:focus {
    background-color: var(--color-white);
    color: var(--color-black);
    width: 100%;
    z-index:9
}

nav form input[type=submit] {
    background: var(--color-white);
    border: var(--two-pixel) solid currentColor;
    color: var(--color-grey);
    display: none;
    height: var(--fortytwo-pixel);
    margin-left: -2.25em;
    z-index:10
}

article > div, aside > div, dialog > div, footer, header, main, section > div {
    border: var(--one-pixel) solid transparent;
    clear: both;
    padding: var(--thirty-pixel) 0 var(--fifteen-pixel);
    position:relative
}

article, aside, nav a:hover, nav label:hover {
    border:var(--one-pixel) solid currentColor
}

header {
    border-bottom:var(--one-pixel) solid currentColor
}

footer {
    border-top:var(--one-pixel) solid currentColor
}

#page-footer > div,
#page-main > div,
#page-nav > div,
#page-section > div,
#site-header > div,
#site-nav > div,
[id*=page-section] > div {
    margin: 0 auto;
    padding: 0 var(--sixteen-pixel);
    position: relative;
    width: 100%;
    max-width: var(--page-size);
}

article footer, article header, article > div, aside footer, aside header, aside > div, dialog footer, dialog header, dialog > div, section footer, section header, section > div {
    padding-left: var(--seven-pixel);
    padding-right:var(--seven-pixel)
}

#page-footer {
    background-color:var(--color-black)
}

img, svg {
    fill: currentColor;
    stroke: transparent;
    height: auto;
    width:auto
}

nav a img, nav a svg {
    height: var(--thirtytwo-pixel);
    margin: -.5em 0;
    width:var(--thirtytwo-pixel)
}

h1 img, h1 svg, h2 img, h2 svg, h3 img, h3 svg, h4 img, h4 svg, h5 img, h5 svg, h6 img, h6 svg {
    float: left;
    height: var(--sixtyfour-pixel);
    margin: -.5em var(--thirtytwo-pixel) .5em 0;
    width:var(--sixtyfour-pixel)
}

button img, button svg, em a img, em a svg, em label img, em label svg {
    height: var(--thirtytwo-pixel);
    margin: -.25em .25em -.5em -.25em;
    width:var(--thirtytwo-pixel)
}

em small a img, em small a svg {
    height: 100%;
    margin: 0;
    width:100%
}

figure {
    border: var(--one-pixel) solid transparent;
    padding:0
}

figure figcaption {
    background: var(--color-black);
    text-align: center;
    padding: var(--four-pixel);
    position: absolute;
    bottom: 0;
    left: 0;
    right:0
}

figure div {
    clear: both;
    margin-bottom: 1;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    z-index:5
}

figure div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height:100%
}

a:active, a:hover, a:visited {
    text-decoration: underline;
    -moz-opacity: 0.9;
    opacity:.9
}

a:after, a:before, h1 a:not(:hover), h2 a:not(:hover), h3 a:not(:hover), h4 a:not(:hover), h5 a:not(:hover), h6 a:not(:hover), nav a:not(:hover) {
    text-decoration:none !important
}

#page {
    color: var(--color-black);
    background-color:var(--color-background)
}

a, a:hover, a:visited:hover, em button:hover, em label:hover, nav label:hover {
    color:var(--color-link)
}

a:visited, em a:visited {
    color:var(--color-vlink)
}

a:visited svg {
    fill:var(--color-vlink)
}

a:hover svg {
    fill:var(--color-link)
}

#theme-soft:checked ~ #page a:active, #theme-soft:checked ~ #page a:visited:active, a:active, a:visited:active {
    color:var(--color-violet)
}

#theme-soft:checked ~ #page a:visited:active svg, a:visited:active svg {
    fill:var(--color-violet)
}

#theme-soft:checked ~ #page, #theme-soft:checked ~ #page-nav, #theme-soft:checked ~ #site-nav {
    background-color: var(--color-soft);
    color:var(--color-softtext)
}

#theme-soft:checked ~ #page a {
    color:var(--color-softblue)
}

#theme-soft:checked ~ #page em a, #theme-soft:checked ~ #page em button, #theme-soft:checked ~ #page em label {
    background-color: var(--color-softstarred);
    color:var(--color-softtext)
}

#theme-soft:checked ~ #page a:visited, #theme-soft:checked ~ #page em a:visited {
    color:var(--color-orange)
}

#theme-soft:checked ~ #page a:visited svg {
    fill:var(--color-red)
}

#theme-soft:checked ~ #page a:hover, #theme-soft:checked ~ #page a:visited:hover, #theme-soft:checked ~ #page nav label:hover {
    color:var(--color-blue)
}

#theme-soft:checked ~ #page a:hover svg {
    fill:var(--color-blue)
}

em a, em a:visited, em button, em label, nav a, nav label {
    color:inherit
}

:root {
    --one-pixel: 1px;
    --two-pixel: 2px;
    --four-pixel: 4px;
    --seven-pixel: 7px;
    --fifteen-pixel: 15px;
    --sixteen-pixel: 16px;
    --twenty-pixel: 20px;
    --thirty-pixel: 30px;
    --thirtytwo-pixel: 32px;
    --fortytwo-pixel: 42px;
    --sixtyfour-pixel: 64px;
    --page-size: 1200px;
    --color-nav: rgba(255, 255, 255, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-yellow: rgba(244, 192, 21, 1);
    --color-orange: rgba(244, 82, 15, 1);
    --color-red: rgba(221, 0, 0, 1);
    --color-violet: rgba(115, 44, 147, 1);
    --color-softblue: rgba(100, 100, 255, 1);
    --color-blue: rgba(50, 122, 174, 1);
    --color-turquoise: rgba(0, 175, 139, 1);
    --color-green: rgba(50, 164, 89, 1);
    --color-soft-grey: rgba(235, 235, 235, 1);
    --color-softgrey: rgba(220, 220, 220, 1);
    --color-grey: rgba(150, 150, 150, 1);
    --color-hardgrey: rgba(90, 90, 90, 1);
    --color-black: rgba(0, 0, 0, 1);
    --color-softblack: rgba(10, 10, 10, 1);
    --color-soft-black: rgba(23, 20, 21, 1);
    --color-link: rgba(50, 122, 174, 1);
    --color-vlink: rgba(20, 100, 140, 1);
    --color-soft: rgba(247, 246, 255, 1);
    --color-softtext: rgba(89, 81, 147, 1);
    --color-softstarred: rgba(214, 208, 255, 1);
    --color-translucentblack: rgba(0, 0, 0, .5);
    --color-translucentwhite: rgba(255, 255, 255, .5);
    --color-background: rgba(0, 0, 0, 1);
    --font-default: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
    --font-code: Monaco, Menlo, Consolas, 'Courier New', monospace
}

#layout > nav {
    margin-bottom:2px
}

#layout strong {
    font-size: 16px;
    font-weight: 200;
    line-height:16px
}

#layout-list:checked ~ #layout-result article, .list article {
    border: none;
    border-bottom: thin solid #ddd;
    height: 270px;
    margin: 0 0 5px;
    padding:0
}

#layout-list:checked ~ #layout-result article p, .list article p {
    font-size:15px
}

#layout-list:checked ~ #layout-result article h3, .list article h3 {
    margin: 0;
    line-height: 1em;
    padding-bottom:12px
}

#layout-list:checked ~ #layout-result article strong, .list article strong {
    font-size: 13px;
    float: right;
    font-weight: 300;
    margin: 0;
    color:var(--color-grey)
}

#layout-list:checked ~ #layout-result article div, .list article div {
    display: block;
    height: 320px;
    margin: 0 0 16px;
    padding: 0;
    overflow:hidden
}

#layout-list:checked ~ #layout-result article div img, .list article div img {
    height: 80%;
    float: left;
    margin: 0 21px 0 0;
    object-fit: cover;
    width:36%
}

#layout-list:checked ~ #layout-result article nav, .list article nav {
    border-color: transparent;
    padding: 0;
    position: absolute;
    right: 0;
    top: 50%;
    text-align: center;
    width:50px
}

#layout-list:checked ~ #layout-result article nav a, .list article nav a {
    background: rgba(255, 255, 255, .6);
    border-color: #eee;
    border-radius: 50%;
    color: #fff;
    text-decoration: none;
    line-height: 32px;
    height: 50px;
    padding: 7px 0;
    width:50px
}

#layout-list:checked ~ #layout-result article nav a:hover, .list article nav a:hover {
    background: rgba(240, 240, 240, .8);
    border-color: #bbb;
    border-radius: 50%;
    color: #fff;
    text-decoration:none
}

#layout-simple:checked ~ #layout-result article, .simple article {
    border: none;
    border-bottom: 1px solid #ddd;
    border-top: 0;
    padding:16px 0
}

#layout-simple:checked ~ #layout-result article p, .simple article p {
    font-size: 1.3em;
    line-height: 2em;
    color:var(--color-hardgrey)
}

#layout-simple:checked ~ #layout-result article h3, .simple article h3 {
    margin: 0;
    position: absolute;
    top: 18px;
    right: 0;
    padding: 9px 16px 0;
    border-radius: 0 0 0 21px;
    background:rgba(255, 255, 255, .96)
}

#layout-simple:checked ~ #layout-result article strong, .simple article strong {
    margin: 5px 8px 0 0;
    background: var(--color-grey);
    right: 0;
    padding: 6px 12px 9px;
    position: absolute;
    color: #fff;
    border-radius:3px
}

#layout-simple:checked ~ #layout-result article div img, .simple article div img {
    height: 480px;
    margin-bottom: 6px;
    object-fit: cover;
    width:100%
}

.site-logo {
    position: absolute;
    left: 0;
    top:0
}

.nav-smart {
    position:sticky
}

.nav-smart div div[hidden] {
    display: block;
    padding: 0 2em;
    position:relative
}

.nav-smart strong label {
    display: none;
    padding-right: 26px;
    position:relative
}

#page-nav.nav-scroll, #page-nav.nav-smart, #site-nav.nav-scroll, #site-nav.nav-smart, .nav-sticky {
    background-color: inherit;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index:5
}

.nav-scroll div {
    height: 64px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    -ms-ocerflow-style:-ms-autohiding-scrollbar
}

nav .menu label {
    padding-right:64px
}

nav .menu nav {
    width:256px
}

dialog {
    background: #fff;
    border: 1px solid currentColor;
    box-shadow: 0 0 12px rgba(0, 0, 0, .5);
    display: none;
    position: fixed;
    top: 10%;
    left: 20%;
    right: 20%;
    width: 60%;
    z-index:10
}

.overlay, .overlay-transparent {
    background-color: rgba(0, 0, 0, .4);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:9
}

.menu, .outbox, .outbox-left, .outbox-right, .pophover, .position-relative, .slider, .slideshow, .tooltip {
    position:relative
}

.overlay-transparent {
    background-color:transparent
}

.menu {
    padding: 0;
    margin:0
}

.menu label {
    cursor: pointer;
    z-index:5
}

.menu em label {
    padding-right:52px
}

.menu > nav {
    background-color: #fff;
    border: 1px solid transparent;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4);
    position: absolute;
    top: 3em;
    left: 0;
    width: 100%;
    z-index:9
}

.menu nav a {
    border-color: transparent;
    color:#333
}

.accordion ul > li > div, .collapser > div, .tabs ul li > div {
    border: 1px solid currentColor;
    border-top: none;
    clear: both;
    margin: 0;
    padding:14px 14px 15px
}

.accordion em label, .collapser em label {
    display: block;
    position: relative;
    width:100%
}

.accordion > ul, .accordion > ul > li, .menu > ul, .menu > ul > li, .tabs > ul, .tabs > ul > li {
    margin: 0;
    padding: 0;
    list-style:none
}

.tabs > nav > label, .tabs > nav > label:hover {
    border-bottom: none;
    box-shadow: none;
    color: inherit;
    margin:0 1px
}

.collapser [hidden] {
    display: none;
    visibility:hidden
}

.slider li div[hidden] {
    display: none;
    opacity: 0;
    -moz-opacity: 0;
    z-index:1
}

.slider li input:checked ~ div[hidden] {
    display: block;
    opacity: 1;
    -moz-opacity: 1;
    z-index:3
}

.slider, .slider div, .slider div > img, .slider ul, .slider ul li, .slideshow, .slideshow img {
    display: block;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width:100%
}

.slider nav {
    border: none;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    z-index:4
}

.slider nav a, .slider nav label {
    background-color: #fff;
    border: 2px solid #000;
    border-radius: 50%;
    content: ' ';
    cursor: pointer;
    display: inline-block;
    padding: 0;
    height: 1em;
    width:1em
}

.slider div label {
    background-color: #fff;
    color: #333;
    cursor: pointer;
    height: 52px;
    width: 52px;
    padding: 12px;
    text-align: center;
    position: absolute;
    top:40%
}

.slider div label:hover {
    background:rgba(255, 255, 255, .4)
}

.slider div[hidden] label:first-child {
    left:0
}

.slider div[hidden] label:last-child {
    right: 0;
    left:auto
}

.pophover:hover:after, .tooltip:hover:before {
    content: attr(data-title);
    cursor: pointer;
    position: absolute;
    z-index:5
}

.tooltip:hover:before {
    background: rgba(255, 255, 255, .8);
    min-width: 10em;
    padding: 16px;
    text-shadow: 0 0 0 transparent;
    top: -1px;
    left:100%
}

.pophover:hover:after, .sample em label {
    background-color:rgba(0, 0, 0, .8)
}

.pophover:hover:after {
    color: #fff;
    min-width: 5em;
    top: -64px;
    left: -120%;
    right:-120%
}

.alert > label, .flip article > label, .flip aside > label, dialog > label {
    border: 1px solid currentColor;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    font-size: 26px;
    font-weight: 200;
    height: 42px;
    line-height: 36px;
    width: 42px;
    text-align: center;
    text-decoration: none;
    z-index: 2;
    position: absolute;
    top: 16px;
    right:16px
}

.accordion mark, .collapser mark, .menu mark, nav strong label mark {
    background-color: transparent;
    border-top: 8px solid currentColor;
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-bottom: none;
    color: inherit;
    content: '';
    position: absolute;
    right: 16px;
    top: 24px;
    vertical-align:middle
}

nav strong label mark {
    right:4px
}

.banner, .cover {
    background-position: top center;
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    border: none;
    color: #fff;
    letter-spacing: .2em;
    overflow: hidden;
    text-align:center
}

.banner {
    height: 512px;
    padding-top:180px
}

.cover {
    height: 72vh;
    padding-top: 120px;
    border:none !important
}

.sticky-header {
    background-color: #fff;
    padding: 0;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    z-index:5
}

.sticky-header * {
    font-size: 24px;
    margin:0
}

@media (max-width: 1440px) {
    .cover {
        height:65vh
    }
}

.outbox-left:before, .outbox-right:after, .outbox:after, .outbox:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: inherit;
    color:inherit
}

.outbox-left:before, .outbox:after {
    left: -50%;
    right:100%
}

.outbox-right:after, .outbox:before {
    left: 100%;
    width:calc((100vw - 100%)/ 2)
}

[data-mode=collapser] div, [data-mode=menu] nav, dialog {
    -webkit-animation: .7s both moveFromTop;
    -moz-animation: .7s both moveFromTop;
    animation:.7s both moveFromTop
}

@-webkit-keyframes fadeIn {
    from {
        opacity:0
    }
}

@-moz-keyframes fadeIn {
    from {
        opacity:0
    }
}

@keyframes fadeIn {
    from {
        opacity:0
    }
}

@-webkit-keyframes moveFromTop {
    from {
        -webkit-transform:translateY(-100%)
    }
}

@-moz-keyframes moveFromTop {
    from {
        -moz-transform:translateY(-100%)
    }
}

@keyframes moveFromTop {
    from {
        transform:translateY(-100%)
    }
}

#tools-nav, #tools-switcher {
    text-align: right;
    padding: 16px 8px;
    position: fixed;
    bottom: -2px;
    left: 0;
    right: 0;
    z-index:8
}

#tools-nav {
    background-color: rgba(0, 0, 0, .75);
    color: #fff;
    display: none;
    z-index:9
}

#tools-nav label, #tools-switcher label {
    background-color: #fff;
    border: 4px solid #666;
    border-radius: 50%;
    color: #000;
    cursor: pointer;
    display: block;
    float: right;
    margin: 0 8px;
    padding: 0;
    text-align: center;
    line-height: 40px;
    height: 48px;
    width:48px
}

#tools-nav #label-light {
    background-color:#fff
}

#tools-nav #label-soft {
    background-color:#d6d0ff
}

#tools-nav #label-dark {
    background-color:#000
}

#tools-nav label:hover {
    border-color:#fff
}

.sample em label {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    color:rgba(255, 255, 255, .8)
}

.sample div {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius:12px
}

.sample pre {
    background-color: rgba(255, 255, 255, .8);
    color:rgba(0, 0, 0, .9)
}

.position-absolute, .position-absolute-phone-relative, .position-fixed, .position-fixed-phone-relative, .position-sticky, .position-sticky-phone-relative {
    top: 0;
    left: 0;
    right: 0;
    z-index:9
}

.position-absolute, .position-absolute-phone-relative {
    position:absolute
}

.position-fixed, .position-fixed-phone-relative {
    position:fixed
}

.position-sticky, .position-sticky-phone-relative {
    box-shadow: 0 0 2px rgba(0, 0, 0, .3);
    position: sticky;
    position:-webkit-sticky
}

.position-float, .position-float-right {
    display: block;
    float: left;
    margin:16px
}

.position-float-right {
    float:right
}

.rounded-medium {
    border-radius:16px
}

.rounded-soft {
    border-radius:48px
}

.square {
    border-radius:0
}

#layout-gallery:checked ~ #layout-result article, .gallery article {
    border: none;
    clear: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
    width:33.333333333%
}

#layout-gallery:checked ~ #layout-result article div, .gallery article div {
    height: 300px;
    padding: 0 4px;
    overflow:hidden
}

#layout-gallery:checked ~ #layout-result article div img, .gallery article div img {
    height: 290px;
    border: thin solid #ddd;
    overflow: hidden;
    border-radius: 18px;
    object-fit: cover;
    width:100%
}

#layout-gallery:checked ~ #layout-result article div img:hover, .gallery article div img:hover {
    border-radius: 3px;
    border:thin solid #555
}

#layout-gallery:checked ~ #layout-result article nav a, .gallery article nav a {
    background-color: transparent;
    border-color: transparent;
    color:rgba(255, 255, 255, .12)
}

#layout-gallery:checked ~ #layout-result article:hover nav a, .gallery article:hover nav a {
    color: #fff;
    text-decoration:none
}

#layout-cards:checked ~ #layout-result article, .cards article {
    background-color: #fff;
    border: none !important;
    color: #000;
    clear: none;
    display: block;
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:24.9999999999%
}

#layout-cards:checked ~ #layout-result article:hover, .cards article:hover {
    box-shadow: 2px 6px 21px rgba(0, 0, 0, .76);
    z-index: 1;
    margin-top: -2px;
    padding-bottom:2px
}

#layout-cards:checked ~ #layout-result article div, .cards article div {
    height: 190px;
    overflow: hidden;
    padding:0
}

#layout-cards:checked ~ #layout-result article div img, .cards article div img {
    height: 190px;
    overflow: hidden;
    object-fit: cover;
    width:100%
}

#layout-cards:checked ~ #layout-result article nav, .cards article nav {
    border-color: transparent;
    font-size: 16px;
    line-height: 16px;
    text-align:center
}

#layout-tiles:checked ~ #layout-result article, .tiles article {
    clear: none;
    border: none;
    display: block;
    float: left;
    height: 256px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width:24.9999999999%
}

#layout-tiles:checked ~ #layout-result article div, #layout-tiles:checked ~ #layout-result article h3, #layout-tiles:checked ~ #layout-result article nav, #layout-tiles:checked ~ #layout-result article strong, .tiles article div, .tiles article h3, .tiles article nav, .tiles article strong {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom:0
}

#layout-tiles:checked ~ #layout-result article a, .tiles article a {
    color:#fff !important
}

#layout-tiles:checked ~ #layout-result article h3, .tiles article h3 {
    background-color: rgba(20, 0, 0, .3);
    font-size: 1.2em;
    line-height: 1.1em;
    padding: 140px 16px;
    z-index:9
}

#layout-tiles:checked ~ #layout-result article:hover h3, .tiles article:hover h3 {
    background-color: rgba(0, 0, 0, .8);
    height: 256px;
    opacity:1
}

#layout-tiles:checked ~ #layout-result article strong, .tiles article strong {
    top: 16px;
    z-index:9
}

#layout-tiles:checked ~ #layout-result article div, .tiles article div {
    height: 256px;
    overflow: hidden;
    padding: 0;
    z-index:8
}

#layout-tiles:checked ~ #layout-result article div img, .tiles article div img {
    height: 256px;
    overflow: hidden;
    object-fit: cover;
    width:100%
}

#layout-tiles:checked ~ #layout-result article nav, .tiles article nav {
    top: auto;
    z-index:9
}

#layout-tiles:checked ~ #layout-result article nav a, .tiles article nav a {
    border: none;
    text-decoration: none;
    color:#fff
}

#layout-tiles:checked ~ #layout-result article nav a:hover, .color-white, .color-white *, .tiles article nav a:hover {
    color:#fff
}

@media (max-width: 960px) {
    #layout-cards:checked ~ #layout-result article, #layout-gallery:checked ~ #layout-result article, #layout-tiles:checked ~ #layout-result article, .cards article, .gallery article, .tiles article {
        width:32.3333333333%
    }
}

@media (max-width: 767px) {
    h1 {
        font-size:2em
    }

    h2 {
        font-size:1.8em
    }

    h3 {
        font-size:1.6em
    }

    h4 {
        font-size:1.4em
    }

    h5 {
        font-size:1.2em
    }

    h6 {
        font-size:1em
    }

    h1, h2, h3 {
        line-height:var(--sixtyfour-pixel)
    }

    h4, h5, h6 {
        line-height:var(--thirtytwo-pixel)
    }

    nav [data-mode=menu] em label {
        display: block;
        width:100%
    }

    nav, nav form {
        text-align:center
    }

    nav form {
        display: block;
        position: relative;
        margin-bottom: var(--thirtytwo-pixel);
        top: 0;
        width:100%
    }

    nav form input[type=text]:focus {
        width:80%
    }

    .nav-smart div strong label, footer nav a {
        display:inline-block
    }

    #layout-list:checked ~ #layout-result article div img, .list article div img {
        width: 128px;
        height: 128px;
        margin:0 12px 12px 0
    }

    #page-nav.nav-scroll, #page-nav.nav-smart, #site-nav.nav-scroll, #site-nav.nav-smart, .nav-smart, .nav-sticky, .position-absolute-phone-relative, .position-fixed-phone-relative, .position-sticky-phone-relative, nav .menu nav {
        position:relative
    }

    .nav-scroll form {
        display: inline-block;
        position: relative;
        top: 1px;
        text-align: center;
        width:auto
    }

    .nav-scroll form input[type=submit] {
        top:-8px
    }

    nav .menu nav {
        background-color: transparent;
        box-shadow: none;
        top: 0;
        width:100%
    }

    .nav-smart div div[hidden] {
        display:none
    }

    .nav-smart div div[hidden] a, .nav-smart input:checked ~ div[hidden], nav .menu, nav .menu nav ul li a {
        display:block
    }

    dialog {
        top: 16px;
        left: 5%;
        right: 5%;
        width:90%
    }

    .tabs nav a, .tabs nav label {
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width:18%
    }

    .cover {
        height:60vh
    }

    .banner {
        height: 320px;
        padding-top:128px
    }

    #layout-cards:checked ~ #layout-result article, #layout-gallery:checked ~ #layout-result article, #layout-tiles:checked ~ #layout-result article, .cards article, .gallery article, .tiles article {
        width:48.9999999999%
    }
}

.hidden-phone, .hidden-tablet, .shown, .shown-desktop {
    display: block !important;
    visibility:visible !important
}

.hidden, .hidden-desktop, .shown-phone, .shown-tablet {
    display: none !important;
    visibility:hidden !important
}

@media (max-width: 767px) {
    .hidden-desktop, .hidden-phone, .shown-tablet {
        display: block !important;
        visibility:visible !important
    }

    .hidden, .hidden-tablet, .shown-phone {
        display: none !important;
        visibility:hidden !important
    }

    .level-blocked {
        height:auto
    }
}

@media (max-width: 480px) {
    #layout-cards:checked ~ #layout-result article, #layout-gallery:checked ~ #layout-result article, #layout-tiles:checked ~ #layout-result article, .cards article, .gallery article, .tiles article {
        width:100%
    }

    .hidden-desktop, .hidden-phone, .shown-phone {
        display: block !important;
        visibility:visible !important
    }

    .hidden, .hidden-desktop, .shown-tablet {
        display: none !important;
        visibility:hidden !important
    }
}

.cell, .thumb, [class * =cell], [class * =thumb] {
    display: block;
    float: left;
    height: auto;
    width:100%
}

.cell-1, .col-12 .cell, .col-12 .thumb, .thumb-1 {
    width:8.3333333333%
}

.cell-2, .col-6 .cell, .col-6 .thumb, .thumb-2 {
    width:16.6666666666%
}

.cell-3, .col-4 .cell, .col-4 .thumb, .thumb-3 {
    width:24.9999999999%
}

.cell-4, .col-3 .cell, .col-3 .thumb, .thumb-4 {
    width:33.3333333333%
}

.cell-5, .thumb-5 {
    width:41.6666666666%
}

.cell-6, .col-2 .cell, .col-2 .thumb, .thumb-6 {
    width:49.9999999999%
}

.cell-7, .thumb-7 {
    width:58.3333333333%
}

.cell-8, .thumb-8 {
    width:66.6666666666%
}

.cell-9, .thumb-9 {
    width:74.9999999999%
}

.cell-10, .thumb-10 {
    width:83.3333333333%
}

.cell-11, .thumb-11 {
    width:91.66666666%
}

.cell-12, .thumb-12 {
    width:100%
}

.col-gr .cell-primary {
    width:61.8%
}

.col-gr .cell-secondary {
    width:38.2%
}

.cell-x1, .col-10 .cell, .col-10 .thumb, .thumb-x1 {
    width:10%
}

.cell-x2, .col-5 .cell, .col-5 .thumb, .thumb-x2 {
    width:20%
}

.cell-x3, .thumb-x3 {
    width:30%
}

.cell-x4, .thumb-x4 {
    width:40%
}

.cell-x5, .thumb-x5 {
    width:50%
}

.cell-x6, .thumb-x6 {
    width:60%
}

.cell-x7, .thumb-x7 {
    width:70%
}

.cell-x8, .thumb-x8 {
    width:80%
}

.cell-x9, .thumb-x9 {
    width:90%
}

.cell-e, .col-e .cell, .col-e .thumb, .thumb-e {
    width:12.499999999%
}

.pushed-1 {
    margin-left:8.3333333333%
}

.pushed-2 {
    margin-left:16.6666666666%
}

.pushed-3 {
    margin-left:24.9999999999%
}

.pushed-4 {
    margin-left:33.3333333333%
}

.pushed-5 {
    margin-left:41.6666666666%
}

.pushed-6 {
    margin-left:49.9999999999%
}

.pushed-7 {
    margin-left:58.3333333333%
}

.pushed-8 {
    margin-left:66.6666666666%
}

.pushed-9 {
    margin-left:74.9999999999%
}

.pushed-10 {
    margin-left:83.3333333333%
}

.pushed-11 {
    margin-left:91.66666666%
}

[class * =columns] {
    display: block;
    margin: 0;
    width:100%
}

.columns-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count:2
}

.columns-3 {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count:3
}

.columns-4 {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count:4
}

.no-columns {
    -webkit-column-span: all;
    -moz-column-span: all;
    column-span:all
}

@media (max-width: 768px) {
    .columns-blocked {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;
        -webkit-column-span: all;
        -moz-column-span: all;
        column-span:all
    }
}

.level, [class * =level] {
    display: block;
    height: auto;
    overflow: hidden;
    width:auto
}

.level-1 {
    height:16px
}

.level-2 {
    height:32px
}

.level-3 {
    height:48px
}

.level-4 {
    height:64px
}

.level-5 {
    height:80px
}

.level-6 {
    height:96px
}

.level-7 {
    height:112px
}

.level-8 {
    height:128px
}

.level-9 {
    height:144px
}

.level-10 {
    height:160px
}

.level-11 {
    height:176px
}

.level-12 {
    height:192px
}

.level-13 {
    height:208px
}

.level-14 {
    height:224px
}

.level-15 {
    height:240px
}

.level-16 {
    height:256px
}

.level-17 {
    height:272px
}

.level-18 {
    height:288px
}

.level-19 {
    height:304px
}

.level-20 {
    height:320px
}

[class * =color], [class * =color] * {
    background-color: currentColor;
    border-color: currentColor;
    fill: currentColor;
    stroke:currentColor
}

.color-soft-yellow, .color-soft-yellow * {
    color:#fe9
}

.color-yellow, .color-yellow * {
    color:#f7ca18
}

.color-soft-amber, .color-soft-amber * {
    color:#f5ab35
}

.color-amber, .color-amber * {
    color:#eb9532
}

.color-soft-orange, .color-soft-orange * {
    color:#e87e04
}

.color-orange, .color-orange * {
    color:#f9690e
}

.color-soft-red, .color-soft-red * {
    color:#ea6666
}

.color-red, .color-red * {
    color:#e00
}

.color-soft-granate, .color-soft-granate * {
    color:#d64541
}

.color-granate, .color-granate * {
    color:#96281b
}

.color-soft-brown, .color-soft-brown * {
    color:#944019
}

.color-brown, .color-brown * {
    color:#5b2b14
}

.color-soft-pink, .color-soft-pink * {
    color:pink
}

.color-pink, .color-pink * {
    color:#ffb6c1
}

.color-soft-magenta, .color-soft-magenta * {
    color:#ff77fc
}

.color-magenta, .color-magenta * {
    color:#f0f
}

.color-soft-violet, .color-soft-violet * {
    color:#a46dbb
}

.color-violet, .color-violet * {
    color:#8844a5
}

.color-soft-sky, .color-soft-sky * {
    color:#c5eff7
}

.color-sky, .color-sky * {
    color:#89c4f4
}

.color-soft-blue, .color-soft-blue * {
    color:#408ebe
}

.color-blue, .color-blue * {
    color:#006dab
}

.color-soft-green, .color-soft-green * {
    color:#65c38e
}

.color-green, .color-green * {
    color:#3ab16c
}

.color-soft-olive, .color-soft-olive * {
    color:#6d8764
}

.color-olive, .color-olive * {
    color:#3e4c39
}

.color-soft-turquoise, .color-soft-turquoise * {
    color:#34c3a7
}

.color-turquoise, .color-turquoise * {
    color:#00af8b
}

.color-soft-asphalt, .color-soft-asphalt * {
    color:#7895b5
}

.color-asphalt, .color-asphalt * {
    color:#2c3e50
}

.color-black, .color-black * {
    color:#000
}

.color-hard-grey, .color-hard-grey * {
    color:#333
}

.color-grey, .color-grey * {
    color:#666
}

.color-soft-grey, .color-soft-grey * {
    color:#d5d5d5
}

.color-soft, .color-soft * {
    color:#e6eced
}

.skin-positive, .skin-positive * {
    background-color: transparent !important;
    border-width: 1px !important;
    fill:transparent !important
}

.skin-negative, .skin-negative * {
    color: #fff !important;
    border-color: transparent !important;
    fill:#ffffff !important
}

.skin-text, .skin-text * {
    background: 0 0 !important;
    border-color:transparent !important
}

.skin-yang, .skin-yang * {
    background-color: #fff !important;
    border: none;
    color: #000 !important;
    fill: #000000 !important;
    stroke:transparent !important
}

.skin-yin, .skin-yin * {
    border: none;
    color: #fff !important;
    fill: #ffffff !important;
    stroke:transparent !important
}

.symbol:before, [class * =symbol]:before {
    display: inline;
    margin-right:.5em
}

[class * =symbol].button-icon:before {
    margin:0
}

.symbol-bottom-arrow:before {
    content: '\2193'
}

.symbol-top-arrow:before {
    content: '\2191'
}

.symbol-left-arrow:before {
    content: '\2190'
}

.symbol-right-arrow:before {
    content: '\2192'
}

.symbol-bi-arrow:before {
    content: '\2194'
}

.symbol-bottom-arrows:before {
    content: '\21D3'
}

.symbol-top-arrows:before {
    content: '\21D1'
}

.symbol-left-arrows:before {
    content: '\21D0'
}

.symbol-right-arrows:before {
    content: '\21D2'
}

.symbol-bi-arrows:before {
    content: '\21D4'
}

.next:after, .prev:before, .symbol-bottom:before, .symbol-left:before, .symbol-right:before, .symbol-top:before {
    content: '\25B6';
    display:inline-block
}

.symbol-bottom:before {
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform:rotate(90deg)
}

.symbol-top:before {
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -webkit-transform: rotate(270deg);
    transform:rotate(270deg)
}

.prev:before, .symbol-left:before {
    margin-right: .25em;
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform:rotate(180deg)
}

.next:after, .symbol-right:before {
    margin-left:.25em
}

.symbol-bottom-hand:before {
    content: '\261F'
}

.symbol-top-hand:before {
    content: '\261D'
}

.symbol-left-hand:before {
    content: '\261C'
}

.symbol-right-hand:before {
    content: '\261E'
}

.symbol-add:before {
    content: '\271A'
}

.symbol-atsign:before, .tweet-quote cite:before {
    content: '\0040'
}

.symbol-airplane:before {
    content: '\2708'
}

.symbol-atom:before {
    content: '\269B'
}

.symbol-badge-star:before {
    content: '\2739'
}

.symbol-biohazard:before {
    content: '\2623'
}

.symbol-blackphone:before {
    content: '\260E'
}

.symbol-blackstar:before, .symbol-star:before {
    content: '\2605'
}

.symbol-blacksun:before, .symbol-sun:before {
    content: '\2600'
}

.symbol-bullet:before {
    content: '\2022'
}

.symbol-caduceus:before {
    content: '\2695'
}

.symbol-cents:before, .units-cents:after {
    content: ' \00a2'
}

.symbol-chess-white-king:before {
    content: '\2654'
}

.symbol-chess-white-queen:before {
    content: '\2655'
}

.symbol-chess-white-rook:before {
    content: '\2656'
}

.symbol-chess-white-bishop:before {
    content: '\2657'
}

.symbol-chess-white-knight:before {
    content: '\2658'
}

.symbol-chess-white-pawn:before {
    content: '\2659'
}

.symbol-chess-black-king:before {
    content: '\265A'
}

.symbol-chess-black-queen:before {
    content: '\265B'
}

.symbol-chess-black-rook:before {
    content: '\265C'
}

.symbol-chess-black-bishop:before {
    content: '\265D'
}

.symbol-chess-black-knight:before {
    content: '\265E'
}

.symbol-chess-black-pawn:before {
    content: '\265F'
}

.symbol-close:before {
    content: '\2297'
}

.symbol-cloud:before {
    content: '\2601'
}

.symbol-club:before {
    content: '\2663'
}

.symbol-command:before {
    content: '\2318'
}

.symbol-copyright:before {
    content: '\00a9';
    font-weight:700
}

.symbol-cross:before {
    content: '\271D'
}

.symbol-css:before {
    content: '\007b css\007D'
}

.symbol-david:before {
    content: '\2721'
}

.symbol-diamond:before {
    content: '\2666'
}

.symbol-dollar:before, .units-dollar:after {
    content: ' $'
}

.symbol-edit:before {
    content: '\270E'
}

.symbol-email:before {
    content: '\2709'
}

.symbol-euro:before, .units-euro:after {
    content: ' \20AC'
}

.symbol-favorite:before, .symbol-grid:before, .symbol-heart:before {
    content: '\2665'
}

.symbol-female:before, .symbol-planet-venus:before {
    content: '\2640'
}

.symbol-firstquartermoon:before {
    content: '\263D'
}

.symbol-flag:before {
    content: '\2691'
}

.symbol-flower:before {
    content: '\2741'
}

.symbol-forward:before {
    content: '\25B6\25B6'
}

.symbol-frowningface:before {
    content: '\2639'
}

.symbol-full:before {
    content: '\22A0'
}

.symbol-gear:before {
    content: '\2699'
}

.symbol-game:before {
    content: '\1F3AE'
}

.symbol-hammerandsickle:before {
    content: '\262D'
}

.symbol-hash:before {
    content: '\2317'
}

.symbol-html:before {
    content: '\003C html\003E'
}

.symbol-hipertextos:before {
    content: '\003C -\003E'
}

.symbol-hotsprings:before {
    content: '\2668'
}

.symbol-hours:before, .units-hours:after {
    content: ' hour(s)'
}

.symbol-hyperlink:before {
    content: '\221E';
    display: inline-block;
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform:rotate(45deg)
}

.symbol-infinity:before {
    content: '\221E'
}

.symbol-iching-heaven:before, .symbol-list:before {
    content: '\2630'
}

.symbol-iching-lake:before {
    content: '\2631'
}

.symbol-iching-fire:before {
    content: '\2632'
}

.symbol-iching-thunder:before {
    content: '\2633'
}

.symbol-iching-wind:before {
    content: '\2634'
}

.symbol-iching-water:before {
    content: '\2635'
}

.symbol-blog-layout:before, .symbol-iching-mountain:before {
    content: '\2636'
}

.symbol-grid:before, .symbol-iching-earth:before {
    content: '\2637'
}

.symbol-js:before {
    content: '\007b js\007D'
}

.symbol-justice:before {
    content: '\2696'
}

.symbol-keyboard:before {
    content: ' \2328'
}

.symbol-km:before, .units-km:after {
    content: ' km'
}

.symbol-lastquartermoon:before {
    content: '\263E'
}

.symbol-male:before, .symbol-planet-mars:before {
    content: '\2642'
}

.symbol-meters:before, .units-meters:after {
    content: ' meters'
}

.symbol-minutes:before, .units-minutes:after {
    content: ' minute(s)'
}

.symbol-moonstar:before {
    content: '\262A'
}

.symbol-more:before {
    content: '\2295'
}

.symbol-music-quarter:before {
    content: '\2669'
}

.symbol-music-eighth:before {
    content: '\266A'
}

.symbol-music-beamed-eighth:before, .symbol-musicnote:before {
    content: '\266B'
}

.symbol-music-beamed-sixteenth:before {
    content: '\266C'
}

.symbol-music-flat:before {
    content: '\266D'
}

.symbol-music-natural:before {
    content: '\266E'
}

.symbol-music-sharp:before {
    content: '\266F'
}

.link-ok:after, .symbol-ok:before {
    content: '\2714'
}

.symbol-paragraph:before {
    content: '\00b6'
}

.symbol-peace:before {
    content: '\262E'
}

.symbol-pic:before {
    content: '\25A3'
}

.symbol-phone:before {
    content: '\2706'
}

.symbol-planet-earth:before {
    content: '\2641'
}

.symbol-planet-jupiter:before {
    content: '\2643'
}

.symbol-planet-mercury:before {
    content: '\263F'
}

.symbol-planet-neptune:before {
    content: '\2646'
}

.symbol-planet-pluto:before {
    content: '\2647'
}

.symbol-planet-saturn:before {
    content: '\2644'
}

.symbol-planet-uranus:before {
    content: '\2645'
}

.symbol-play:before {
    content: '\25B6'
}

.symbol-pound:before, .units-pound:after {
    content: ' \00a3'
}

.symbol-radioactive:before {
    content: '\2622'
}

.symbol-recycle:before {
    content: '\267D'
}

.symbol-recycle2:before {
    content: '\267C'
}

.symbol-registered:before {
    content: '\00ae';
    font-weight: 700;
    margin:1px 0 -1px
}

.symbol-remove:before {
    content: '\2716';
    margin:1px 0 -1px
}

.symbol-return:before {
    content: '\21B5'
}

.symbol-rew:before {
    content: '\25B6\25B6';
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform:rotate(180deg)
}

.symbol-save:before {
    content: '\2713'
}

.symbol-scissors:before {
    content: '\2704'
}

.symbol-seconds:before, .units-seconds:after {
    content: ' second(s)'
}

.symbol-section:before {
    content: ' \00a7'
}

.symbol-share:before {
    content: '\23CD'
}

.symbol-skull:before {
    content: '\2620'
}

.symbol-smilingface:before {
    content: '\263A';
    margin:1px 0 -1px
}

.symbol-snow:before {
    content: '\2744'
}

.symbol-snowman:before {
    content: '\2603'
}

.symbol-spade:before {
    content: '\2660'
}

.symbol-spark:before {
    content: '\2737'
}

.symbol-stop:before {
    content: '\25A0'
}

.symbol-tools:before {
    content: '\2692'
}

.symbol-umbrella:before {
    content: '\2602'
}

.symbol-unable:before {
    content: '\2205'
}

.symbol-warning:before {
    content: '\26A0'
}

.symbol-watch:before {
    content: '\231A'
}

.symbol-whitephone:before {
    content: '\260F'
}

.link-starred:after, .symbol-whitestar:before {
    content: '\2606'
}

.symbol-wrong:before {
    content: '\2718'
}

.symbol-yingyang:before {
    content: '\262F'
}

.symbol-zodiac-aries:before {
    content: '\2648'
}

.symbol-zodiac-taurus:before {
    content: '\2649'
}

.symbol-zodiac-gemini:before {
    content: '\264A'
}

.symbol-zodiac-cancer:before {
    content: '\264B'
}

.symbol-zodiac-leo:before {
    content: '\264C'
}

.symbol-zodiac-virgo:before {
    content: '\264D'
}

.symbol-zodiac-libra:before {
    content: '\264E'
}

.symbol-zodiac-scorpio:before {
    content: '\264F'
}

.symbol-zodiac-sagittarius:before {
    content: '\2650'
}

.symbol-zodiac-capricorn:before {
    content: '\2651'
}

.symbol-zodiac-aquarius:before {
    content: '\2652'
}

.symbol-zodiac-piscis:before {
    content: '\2653'
}