// Mixins @mixin prefix($property, $value, $prefixes: ()) {

@each $prefix in $prefixes {
        #{'-' + $prefix + '-' + $property}: $value;
}

// Output standard non-prefixed declaration
#{$property}: $value;

}

/* Component styles */ @font-face {

font-family: 'Blokk';
src: url('../fonts/BLOKKRegular.eot');
src: url('../fonts/BLOKKRegular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/BLOKKRegular.woff') format('woff'),
         url('../fonts/BLOKKRegular.svg#BLOKKRegular') format('svg');
font-weight: normal;
font-style: normal;

} @font-face {

font-family: 'fontello';
src: url('../fonts/fontello.eot');
src: url('../fonts/fontello.eot#iefix') format('embedded-opentype'),
         url('../fonts/fontello.woff') format('woff'),
         url('../fonts/fontello.ttf') format('truetype'),
         url('../fonts/fontello.svg#fontello') format('svg');
font-weight: normal;
font-style: normal;

} .code-toggle, .anchor {

text-decoration: none;
&::before {
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        speak: none;

        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .2em;
        text-align: center;
        /* opacity: .8; */

        /* For safety - reset parent styles, that can break glyph codes*/
        font-variant: normal;
        text-transform: none;

        /* fix buttons height, for twitter bootstrap */
        line-height: 1em;
}

}

html {

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;

} body {

color: #333;
height: 100%;
line-height: 1.5em;
overflow-x: hidden;

} header {

background-color: #333;
box-sizing: border-box;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 1.5rem;
overflow: hidden;
padding: 3rem 16.66667%;
position: relative;
width: 100%;
height: 100vh;
min-height: 30rem;
text-shadow: 0 0 .5rem rgba(0,0,0,.125);
transition: all .25s ease-in-out;

&::before, &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transition: all .25s ease-in-out;
}
&::before {
        background-image: url('http://i.imgur.com/yYv5u81.jpg');
        background-size: cover;
        background-repeat: none;
        background-position: center center;

}
&::after {
        background-color: rgba(0,0,0,.5);
        opacity: 0;
}
&:hover::after {
        opacity: 1;
}

& > * {
        position: relative;
        z-index: 3;
}

h1 {
        font-weight: 300;
        font-size: 6rem;
        line-height: 1em;
        margin: 0 0 .5rem 0;
        text-align: center;
}
.byline {
        display: block;
        font-family: 'PT Serif', Palatino, Georgia, Cambria, "Times New Roman", Times, serif;
        font-size: 1.2em;
        font-style: italic;
        text-align: center;
}
#skip {
        border: none;
        display: block;
        position: absolute;
        bottom: 1.5rem;
        left: 0;
        right: 0;
        height: 1.5rem;
        svg {
                display: block;
                margin: 0 auto;
                width: 3rem;
                height: 1.5rem;
                path { fill: rgba(255,255,255,.75); }
        }
}

}

footer {

background-color: #333;
box-sizing: border-box;
color: #eee;
padding: 1.5rem 16.66667%;
width: 100%;

} h1,h2,h3,h4,h5,h6 {

font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 400;
line-height: 1.25em;
position: relative;
.user-message & {
        color: #eee;
        margin-top: 0;
        margin-bottom: .5rem;
}

} h2 {

font-size: 3em;

} h3 {

font-size: 2em;
margin: 4rem 0 1rem 0;
h2 + & { margin-top: 1rem; }

} h4 {

border-bottom: 1px solid rgba(0,0,0,.125);
color: #777;
font-size: 1.5em;
margin: 2.25rem 0 .25rem 0;

} a.anchor {

font-size: 1em;
opacity: 0;
position: absolute;
left: -1.5em;
width: 1em;
height: 1em;
text-decoration: none;
&::before { content: '\e800'; }
h2 & {
        font-size: 2rem;
}

} h2, h3, h4 {

&:hover a.anchor { opacity: 1; }

} p {

margin: 0;
margin-bottom: 1.5rem;

} .filler {

color: #999;
font-family: "Blokk", Arial, sans-serif;

} .message {

background-color: #FDC68A;
border-left: .75rem solid #F26C4F;
margin-bottom: 1.5rem;
padding: .75rem 1.5rem;
font-size: .85rem;
a:hover {
        border-color: rgba(0,0,0,.5);
        color: rgba(0,0,0,.5);
}
&.note {
        background-color: #7BCDC8;
        border-color: #00A99D;
}

} hr {

border: none;
border-top: .125rem solid #ddd;
margin-bottom: 1.375rem;

} a {

color: #333;
text-decoration: underline;
transition: all .125s ease-in-out;

}

a:hover {
        color: #4a7298;
}

ul {

margin-top: -.75rem;

} a.code-toggle {

border: none;
background-color: #CFCFCF;
display: block;
font-weight: bold;
line-height: 1.5rem;
padding: .5rem 1rem;
text-align: center;
&::before {
        content: '\e801';
        margin-right: .5rem;
}
& ~ pre { margin-top: 0; }

} pre, pre {

background-color: #f5f2f0;
border: 1px solid #CFCFCF;
box-sizing: border-box;
display: block;
margin-bottom: 1.5rem;
padding: 0;
font-size: .85rem;
width: 100%;

p + & {
        margin-top: -.75rem;
}

& > code[data-language]::before {
        font-family: 'Open Sans';
        letter-spacing: 1px;
        opacity: 0;
        padding: 0 .5rem;
        text-transform: uppercase;
        transition: all .25s ease-in-out;
}
&:hover code[data-language]::before { opacity: 1; }

} code {

background-color: #f5f2f0;
border: 1px solid #CFCFCF;
border-radius: 4px;
display: inline-block;
font-size: .875rem;
margin: 0 .125rem;
padding: 0 .25rem;
pre > &,
pre[class*=language-] > &[data-language] {
        background-color: transparent;
        border: none;
        border-radius: 0;
        display: block;
        overflow: visible;
        padding: 1rem;
}
pre & a {
        border: none;
        &:hover { color: inherit; }
}
.user-message & {
        background-color: rgba(#eee,.75);
        border-color: rgba(#333,.5);
        color: #333;
        line-height: 1.25em;
}

} button {

background-color: #4a7298;
border: 1px solid rgba(0,0,0,.25);
box-shadow: inset 0 0 1px 0 rgba(255,255,255,.5);
border-radius: 4px;
color: #eee;
cursor: pointer;
line-height: 1rem;
margin-bottom: 1.5rem;
padding: .75rem 2rem;

&[disabled] {
        background-color: #999;
        cursor: not-allowed;
}
&:hover {
        background-image: linear-gradient(to bottom, rgba(0,0,0,.125) 0%, rgba(0,0,0,0) 50%);
}

} .user-message {

background: rgb(102,102,102); /* Old browsers */
background: linear-gradient(135deg,  rgba(102,102,102,1) 0%,rgba(85,85,85,1) 100%); /* W3C */
border-radius: 4px;
color: #eee;
margin-bottom: 1.5rem;
padding: .5rem 1rem .5rem 4rem; 
position: relative;

&::before, &::after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        width: 3rem;
}
&::after {
        color: rgba(#333,.75);
        top: 50%;
        font-weight: bold;
        text-align: center;
        transform: translateY(-50%);
}
&::before {
        background-color: rgba(#eee,.5);
        top: 0;
        bottom: 0;
}

&.warning {
        background: rgb(206,129,57); /* Old browsers */
        background: linear-gradient(135deg,  rgba(206,129,57,1) 0%,rgba(177,49,49,1) 100%); /* W3C */
        color: #eee;
        &::after { content: '!'; }
}
&.reminder {
        background: rgb(249,211,107); /* Old browsers */
        background: linear-gradient(135deg,  rgba(249,211,107,1) 0%,rgba(234,167,72,1) 100%); /* W3C */
        color: #7c541f;
        &::after { content: '!'; }
}
&.note {
        background: rgb(97,149,198); /* Old browsers */
        background: linear-gradient(135deg,  rgba(97,149,198,1) 0%,rgba(74,114,152,1) 100%); /* W3C */
        color: #eee;
        &::after { content: '\002021'; }
}
&.approved {
        background: rgb(103,168,42); /* Old browsers */
        background: linear-gradient(135deg,  rgba(103,168,42,1) 0%,rgba(70,124,31,1) 100%); /* W3C */
        color: #eee;
        &::after { content: '\002714'; }
}
& > *:last-child {
        margin-bottom: 0;
}

a {
        color: #eee;
}
&.reminmder a {
        color: #7c541f;
}

/* Responsive messages */
&[data-viewport-threshold] {
        display: none;
}

}

div.user-message {
        margin: 3rem 0;
        padding: 1.5rem 3rem 1.5rem 5rem;
}

table {

border-collapse: collapse;
line-height: 1.5em;
margin-bottom: 3rem;
position: relative;
width: 100%;

&.wider {
        left: -12.5%;
        width: 125%;
}

// General cells
td, th {
        border-left: 2px solid #fff;
        border-right: 2px solid #fff;
        padding: 1rem;
        & > *:last-child {
                margin-bottom: 0;
        }
        &:first-child { border-left: none; }
        &:last-child  { border-right: none; }
}

// Specific table compartment styles
thead {
        font-size: .8rem;
        font-weight: bold;
        letter-spacing: 2px;
        line-height: 1rem;
        text-transform: uppercase;
        td, th {
                border-bottom: 3px solid #ccc;
                padding: .25rem 1rem;
        }
}
tbody {
        tr {
                &:nth-child(odd) {
                        background-color: #e6e6e6;
                }
                &:last-child {
                        border-bottom: 1px solid #ccc;
                }
                &:target {
                        background-color: transparent;
                        th { background-color: #8BA3B0; color: #eee; }
                        td { background-color: rgba(#8BA3B0, .5); }
                        a.anchor { color: #8BA3B0; opacity: 1; }
                }
                th {
                        text-align: left;
                }
        }
}

p {
        margin-bottom: .5rem;
}

pre {
        white-space: pre-wrap;
        word-wrap: break-word;
}
p + pre, p + pre[class*=language-] {
        margin-top: .25rem;
}

}

/* Main */ main {

margin: 0 16.66667%;
section {
        border-bottom: 1px solid #ccc;
        margin-bottom: 1.5rem;
        padding: 1.5rem 0;
}

}

/* Cards */ .cards {

display: flex;
flex-flow: row wrap;
margin: -.25rem;
margin-bottom: 1.25rem;
overflow: hidden;

svg {
        display: block;
        margin: 0 auto .75rem;
        width: 5.25rem;
        height: 5.25rem;
        transition: all .125s ease-in-out;
        & path {
                fill: #eee;
                transition: fill .125s ease-in-out;
        }
}

& > a {
        box-sizing: border-box;
        border: none;
        border-radius: 4px;
        color: #eee;
        flex: 1 auto;
        margin: .25rem;
        padding: 1.5rem;
        text-align: center;
        text-decoration: none;
        transition: all .25s ease-in-out;

        &.card-medium {
                background-color: #57ad68;
                flex-basis: 100%;
                svg { background-color: #eee; path { fill: #57ad68; } }
        }
        &.card-github {
                background-color: #ff9933;
                flex-basis: auto;
        }
        &.card-cdnjs {
                background-color: #bf3e11;
                flex-basis: auto;
                .branding {
                        display: block;
                        font-family: "Ubuntu", Tahoma, "Helvetica Neue", Helvetica, Arial, sans-serif;
                        letter-spacing: 1px;
                        line-height: 5rem;
                        margin-bottom: .75rem;
                        font-size: 3em;
                }
        }

        .branding {
                transition: all .25s ease-in-out;
        }
        &:hover .branding {
                @include prefix(transform, scale(1.25), webkit ms);
        }
}

}

/* Three dimensional visualization of Fluidbox */ fluidbox-3d {

margin: 0 0 1.5rem 0;
padding: 0;
position: relative;
perspective: 5000;      /* Keep things isometric */
width: 100%;
height: 600px;
position: relative;
* {
        display: block;
        transform-style: preserve-3d;
}
figcaption {
        font-size: .85rem;
        position: absolute;
        bottom: 0;
        margin-top: .75rem;
        text-align: center;
        width: 100%;
}
.canvas {
        position: absolute;
        top: 60%;
        left: 50%;
        transform: translate(-50%,-50%) rotateX(45deg) rotateZ(45deg);
        transition: all .5s ease-in-out;
}
a, .fluidbox__wrap {
        border: none;
}
img {
        display: block;
        opacity: .5 !important;                 /* Override required for presentation, do not use in actual production code! */
        width: 20rem;
        transition: all .25s ease-in-out;
        transform: translate3d(0,0,0);
}
.fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
        position: absolute;
        opacity: .5 !important;                         /* Override required for presentation, do not use in actual production code! */
        top: 0 !important;                                      /* Override required for presentation, do not use in actual production code! */
        left: 0 !important;                                     /* Override required for presentation, do not use in actual production code! */
        transition: all .25s ease-in-out;
        transition-delay: 0;
        &::after {
                background-color: #333;
                border-radius: 4px;
                color: #eee;
                display: block;
                opacity: 0 !important;
                pointer-events: none;
                position: absolute;
                padding: .5rem 1rem;
                top: 0;
                left: 100%;
                width: 10rem;
                transform: rotateZ(-45deg) rotateX(-65deg) translate(1rem, -50%) !important;
                transform-origin: 0% 0%;
        }

        &:hover {
                &::after { opacity: 1 !important; }
        }
}
.fluidbox__ghost {
        background-image: url('http://i.imgur.com/ouqMP4F.jpg');
        transform: translate3d(0, 0, 6rem) !important;          /* Override required for presentation, do not use in actual production code! */
        &::after {
                content: 'Ghost element will be expanded to fill screen (conditionally, based on available image resolution)';
        }
}
.fluidbox__loader {
        background-image: url('http://placehold.it/500x500/333333/eeeeee/&text=Loader');
        background-size: cover;
        pointer-events: auto;
        perspective: none;                                                              /* Override required for presentation, do not use in actual production code! */
        transform: translate3d(0, 0, 12rem) !important; /* Override required for presentation, do not use in actual production code! */
        &::after {
                content: 'Loader will be hidden when image is loaded in actual scenario';
        }
        &::before {
                display: none;
        }
}
.fluidbox__overlay {
        background-image: url('http://placehold.it/500x500/cccccc/333333/&text=Overlay');
        background-size: cover;
        opacity: 0 !important;                                                          /* Override required for presentation, do not use in actual production code! */
        transform: translate3d(0, 0, 3rem) !important;          /* Override required for presentation, do not use in actual production code! */
        &::after {
                content: 'Overlay to fade out other elements on page';
        }
}

.fluidbox--opened {
        .fluidbox__ghost {
                transform: translate3d(0, 0, 12rem) !important; /* Override required for presentation, do not use in actual production code! */
        }
        .fluidbox__loader {
                transform: translate3d(0, 0, 18rem) !important; /* Override required for presentation, do not use in actual production code! */
        }
        .fluidbox__overlay {
                opacity: .5 !important;                                                 /* Override required for presentation, do not use in actual production code! */
                transform: translate3d(0, 0, 6rem) !important;  /* Override required for presentation, do not use in actual production code! */
        }
}

&:hover {
        @include prefix(perspective, 2000, webkit);
        .canvas {
                transform: translate(-50%,-33%) rotateX(65deg) rotateZ(45deg);
        }
        img, .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
                opacity: .25 !important;        /* Override required for presentation, do not use in actual production code! */
                &:hover {
                        opacity: 1 !important;  /* Override required for presentation, do not use in actual production code! */
                }
        }
}

}

/* Adjust positioning of images to introduce variety */ .demo {

a {
        &.fluidbox--closed {
                background-color: #eee;
                border: none;
                cursor: -webkit-zoom-in;
                cursor: -moz-zoom-in;
                margin-bottom: 1.5rem;
        }

        &.fluidbox--opened {
                cursor: -webkit-zoom-out;
                cursor: -moz-zoom-out;
        }

        img, picture {
                display: block;
                margin: 0 auto;
                max-width: 100%;
        }

        &[class^='float'] {
                margin: 1rem;
                margin-top: 0;
                width: 33.33333%;
                &.float-left {
                        float: left;
                        margin-left: 0;
                }
                &.float-right {
                        float: right;
                        margin-right: 0;
                }
        }

        &.has-border img {
                border: 4px solid #111;
        }
        &.has-padding img {
                padding: 4px;
        }
}

.gallery {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-between;
        a {
                margin-bottom: 1rem;
                &.col-1 { width: 100%; }
                &.col-2 { width: 49%; width: calc(50% - .5rem); }
                &.col-3 { width: 32%; width: calc(33.33333% - .66667rem); }
        }
}

.box {
        background-color: #eee;
        border: 1px solid rgba(0,0,0,.25);
        box-sizing: border-box;
        padding-bottom: 66.66667%;
        position: relative;
        width: 100%;
        img {
                position: absolute;
                top: 2rem;
                left: 2rem;
                width: 50%;
        }
}

}

/* Flexbox */ .cols {

display: flex;
flex-flow: row wrap;
margin: 0 -1rem 2rem -1rem;

& > * {
        flex-grow: 1;
        margin-left: 1rem;
        margin-right: 1rem;
}

&.cols-nowrap {
        flex-wrap: nowrap;
        & > * {
                flex-grow: 1;
                margin-bottom: 0 !important;
        }
}

@for $i from 1 through 5 {
        &.cols-#{$i} > * {
                width: percentage(1/$i);
        }
}

figcaption { margin-top: .5rem; }

}

/* Width overrides */ .full-width {

position: relative;
left: -25%;
width: 150%;

}

/* Code blocks */ .code-block {

margin-bottom: 1.5rem;
pre { margin-bottom: 0; }

}

.code-block pre {
        margin-bottom: 0;
}

.token { &.cr, &.lf, &.tab:not(:empty) { &::before { content: ''; } } }

/* Custom events */ custom-events-demo {

& > div:first-child {
        flex-grow: 0;
        text-align: center;
        img {
                margin-bottom: 1rem;
                max-height: 30rem;
        }
}

} fluidbox-toggle {

appearance: none;
background-color: #fafafa;
border: 1px solid #d3d3d3;
border-radius: .75rem;
box-shadow: inset 0 0 0 1px #d3d3d3;
cursor: pointer;
outline: none;
height: 1.5rem;
position: relative;
transition: border .25s .15s, box-shadow .25s .3s, padding .25s, opacity .25s;
width: 3rem;
vertical-align: top;
&::after {
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-radius: 50%;
        content: '';
        display: block;
        height: calc(1.5rem - 4px);
        left: 0;
        position: absolute;
        right: calc(1.5rem);
        top: 0;
        transition: border .25s .15s, left .25s .1s, right .15s .175s;
}
&:checked {
        border-color: #53d76a;
        box-shadow: inset 0 0 0 .75rem #53d76a;
        padding-left: 1.5rem;
        transition: border .25s, box-shadow .25s, padding .25s .15s;
        &::after {
                border-color: #53d76a;
                left: calc(1.5rem);
                right: 0;
                transition: border .25s, left .15s .25s, right .25s .175s;
        }
}
&:disabled {
        opacity: 0.5;
}
& + label {
        color: #666;
        margin-left: .5rem;
}

} custom-events__log {

position: relative;
text-align: left;
div {
        border: 1px solid rgba(0,0,0,.125);
        background-color: #eee;
        padding: 1rem 2rem;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow-y: auto;
}
ul {
        list-style: none;
        padding: 0;
        li { 
                margin-bottom: .5rem;
                & > span { display: block; }
                & > .evt {
                        background-color: #999;
                        border-radius: .5em;
                        display: block;
                        float: left;
                        font-size: .75em;
                        margin: .5em .5em 0 0;
                        padding: 0 .5em 0;
                        height: 1em;
                        &.dsc { padding-left: 1.5em; }
                }

                &.fluidbox-event-ready,
                &.fluidbox-event-destroyed,
                &.fluidbox-event-openend,
                &.fluidbox-event-closeend {
                        border-bottom: 1px dashed rgba(#555,.25);
                        padding-bottom: .5rem;
                }
                &:last-child {
                        border: none;
                        padding-bottom: 0;
                }
        }
}

} custom-trigger-1-social {

position: fixed;
bottom: 2.5%;
left: 0;
right: 0;
opacity: 0;
padding: 1rem 0;
background-color: rgba(255,255,255,.75);
z-index: 1011;
text-align: center;
transition: all .25s ease-in-out;
transform: translateY(100%);

&.visible {
        opacity: 1;
        transform: translateY(0);
}

ul {
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        li { padding: 0 1rem; }
        a {
                background-color: rgba(0,0,0,.125);
                border-radius: 4px;
                border: none;
                display: inline-block;
                padding: 0 .5rem;
                &:hover {
                        background-color: rgba(74,114,152,.75);
                        color: #eee;
                }
        }
}

}

/* Dynamic image loading button */ loadImg + article {

background-color: #eee;
border: 1px solid rgba(0,0,0,.25);
box-sizing: border-box;
padding: 1rem 2rem;

}

/* Custom overlays */ .fluidbox__overlay {

.overlay-1 & { background-color: rgba(153,145,139,.85); }
.overlay-2 & {
        background-color: transparent;
        background-image: linear-gradient(to top left, rgba(130,168,158,0.85), rgba(134,150,173,.85));
}
.overlay-3 & {
        background-color: #000;
        &::before {
                background-image: url('http://i.imgur.com/3qj1wfN.jpg');
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                opacity: .33333;
                filter: blur(4px);
        }
}

}

/* Footer */ footer {

p {
        color: #999;
        margin: 0;
        text-align: center;
}
a {
        color: #ccc;
        &:hover {
                border-bottom-color: #eee;
                color: #eee;
        }
}
svg {
        display: block;
        fill: #ccc;
        width: 2rem;
        height: 2rem;
        margin: 0 auto 1rem;
}

}

/* Media queries, unrelated to functionality of Fluidbox */ @media only screen and (max-width: 768px) {

header {
        max-height: 500px;
        h1 {
                font-size: 5rem;
        }
}
.cards {
        flex-flow: row wrap;
}
.demo a[class^='float'] {
        width: 50%; 
}
.filler {
        font-size: .75em;
}

/* Adjust float */
.demo a[class^='float'] {
        width: 25%;
}

/* Fluidbox 3D */
#fluidbox-3d {
        .fluidbox__ghost, .fluidbox__loader, .fluidbox__overlay {
                &::after {
                        top: 100%;
                        left: 100%;
                        width: 10rem;
                        transform: rotateZ(-45deg) rotateX(-65deg) translate(-50%, -50%) !important;
                }
        }
}

/* Responsive tables */
table, thead, tbody, th, td, tr { 
        display: block; 
}
table {
        font-size: 1rem;
        left: 0;
        line-height: 1.5rem;
        width: 100%;
        td, th {
                border: none;
                position: relative;
                padding-left: 35%;
                &::before {
                        padding: 0 .5rem;
                        position: absolute;
                        left: 0;
                        width: 35%; 
                        white-space: nowrap;
                }
        }
        thead {
                display: none;
                td { border: none; }
        }
        tbody {
                tr {
                        background-color: transparent !important;
                        margin-bottom: 1rem;
                        th {
                                background-color: #ddd;
                                border-bottom: 2px solid rgba(#000,.1);
                        }
                        td {
                                background-color: rgba(#ddd, .5);
                                border-bottom: 1px solid #fff;
                                &:last-child { border: none; }
                        }
                        th, td {
                                &::before {
                                        font-size: .8rem;
                                        font-weight: bold;
                                        letter-spacing: 2px;
                                        line-height: 1.5rem;
                                        text-transform: uppercase;
                                }
                        }
                        &:target {
                                th { background-color: #8BA3B0; }
                                td { background-color: rgba(#8BA3B0,.5); }
                        }
                }
        }
}
#markup-details {
        tbody {
                td:nth-of-type(1)::before       { content: 'Variable'; }
                td:nth-of-type(2)::before       { content: 'Description'; }
        }
}
#configuration-options {
        tbody { 
                th::before                                      { content: 'Property'; }
                td:nth-of-type(1)::before       { content: 'Type'; }
                td:nth-of-type(2)::before       { content: 'Default'; }
                td:nth-of-type(3)::before       { content: 'Description'; }
        }
}
.cols {
        flex-wrap: wrap;
        & > * { width: 100%; }
        &.cols-nowrap {
                flex-wrap: wrap;
                & > * {
                        margin-bottom: 1rem !important;
                        width: 100%;
                }
        }
}
#custom-events__log {
        div {
                position: relative;
                max-height: 50vh;
        }
}

} @media only screen and (max-width: 600px) {

.user-message {
        &[data-viewport-threshold="600"] {
                display: block;
        }
}
.demo {
        .gallery {
                a {
                        &, &[class^='col'] {
                                margin-bottom: .5rem;
                                width: 100%;
                        }
                }
        }
        a[class^='float'] {
                float: none;
                margin: 0 0 1rem 0;
                width: 100%;
        }
}

} @media only screen and (max-width: 480px) {

html {
        font-size: 12px;
}

}

@supports (backdrop-filter: none) {

header::after {
        backdrop-filter: blur(10px);
}
#custom-trigger-1-social {
        backdrop-filter: blur(10px);
}

}