/*Vars*/
/* Colors */
/* Dimensions */
/* Breakpoints */
/* Fonts */
/* Sprites */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video
margin: 0
padding: 0
border: 0
font-size: 16px
vertical-align: bottom
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section
display: block
a
text-decoration: none
/* Fixes & Hacks*/
._justify,
.loader,
.sandbox,
.grid,
.grid .seperator
text-align: justify
font-size: 0.1px
font-family: 'PT sans narrow'
._justify > *,
.loader > *,
.sandbox > *,
.grid > *,
.grid .seperator > *
display: inline-block
vertical-align: top
text-align: left
font-family: 'Open sans condensed', sans-serif
._justify:after,
.loader:after,
.sandbox:after,
.grid:after,
.grid .seperator:after
content: ''
display: inline-block
width: 100%
._webkit-aa,
body,
.read-more,
.btn,
.ed_button,
.breadcrumbs p
-webkit-font-smoothing: antialiased
._force-gpu,
.dropdown,
.global-header,
.cart-link,
.glass:after,
.sandbox,
.live-config,
.live-config .dropdown,
.global-nav
-webkit-transform: translateZ(0)
-moz-transform: translateZ(0)
-ms-transform: translateZ(0)
transform: translateZ(0)
-webkit-backface-visibility: hidden
._no-select,
.dropdown,
.control-bar
-webkit-user-select: none
-moz-user-select: none
user-select: none
._pointer-events
-moz-pointer-events: none
pointer-events: none
._clear-last > *:last-child,
._clear-last > *:last-child > *:last-child,
._clear-last > *:last-child > *:last-child > *:last-child
margin-bottom: 0
/**
* Transitions
*/
._trans-150,
[class$="-logo"]:before,
[class*="-logo "]:before,
p a,
.read-more,
input[type="text"],
input[type="password"],
textarea,
.checkbox label,
.checkbox label:before,
.checkbox label:after,
.dropdown div,
.dropdown li,
.dropdown div::after,
.dropdown .carat,
.dropdown .carat:after,
.dropdown .selected::after,
.dropdown:after,
.btn,
.ed_button,
.close,
.cart-link,
.cart-link:before,
.cart-link:after,
.cart-link span,
.live-config .effect.checkbox .slider,
.global-nav .menu span,
.global-nav .get-mixitup .dl,
.grid .item header,
.grid h5,
.grid.topics .item header:after
-webkit-transition: 150ms
-moz-transition: 150ms
-ms-transition: 150ms
transition: 150ms
._trans-300,
.back-to-top,
.back-to-top:after,
.global-header .hamburger,
.global-header .hamburger:before,
.global-header .hamburger:after,
.global-header .toggle-options,
.live-config
-webkit-transition: 150ms
-moz-transition: 150ms
-ms-transition: 150ms
transition: 150ms
._trans-600
-webkit-transition: 600ms
-moz-transition: 600ms
-ms-transition: 600ms
transition: 600ms
._trans-nav,
.master-container,
.global-header,
.global-footer,
.global-nav,
.sidebar
-webkit-transition: -webkit-transform 200ms
-moz-transition: -moz-transform 200ms
-ms-transition: -ms-transform 200ms
transition: transform 200ms
/* ANIMATIONS*/
@-webkit-keyframes
0%
-webkit-transform: translate(0, 0px)
50%
-webkit-transform: translate(0, 5px)
100%
-webkit-transform: translate(0, 0px)
@-moz-keyframes
0%
-moz-transform: translate(0, 0px)
50%
-moz-transform: translate(0, 5px)
100%
-moz-transform: translate(0, 0px)
@keyframes
0%
transform: translate(0, 0px)
50%
transform: translate(0, 5px)
100%
transform: translate(0, 0px)
@-webkit-keyframes
0%
20%,
50%,
80%,
100%
-webkit-transform: translateY(0)
40%
-webkit-transform: translateY(-3px)
60%
-webkit-transform: translateY(-2px)
@-moz-keyframes
0%,
20%,
50%,
80%,
100%
-moz-transform: translateY(0)
40%
-moz-transform: translateY(-3px)
60%
-moz-transform: translateY(-2px)
@keyframes
0%,
20%,
50%,
80%,
100%
transform: translateY(0)
40%
transform: translateY(-3px)
60%
transform: translateY(-2px)
@-webkit-keyframes
0%,
50%
color: transparent
51%,
100%
color: limegreen
@-moz-keyframes
0%,
50%
color: transparent
51%,
100%
color: limegreen
@keyframes
0%,
50%
color: transparent
51%,
100%
color: limegreen
@-webkit-keyframes
0%
-webkit-transform: rotateY(-40deg)
10%
-webkit-transform: rotateY(-90deg)
90%
-webkit-transform: rotateY(-90deg)
@-webkit-keyframes
0%
-webkit-transform: rotateY(-25deg)
10%
box-shadow: inset 30px 0 20px -20px rgba(0, 0, 0, 0.02)
20%
-webkit-transform: rotateY(-25deg)
30%
-webkit-transform: rotateY(-85deg)
40%
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0.02)
50%
box-shadow: inset 80px 0 20px -20px rgba(0, 0, 0, 0.1)
90%
-webkit-transform: rotateY(-85deg)
@-webkit-keyframes
0%
-webkit-transform: rotateY(-15deg)
20%
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0.07)
30%
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0)
40%
-webkit-transform: rotateY(-15deg)
50%
-webkit-transform: rotateY(-80deg)
background: #fafafa
90%
-webkit-transform: rotateY(-80deg)
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0)
background: #fafafa
@-webkit-keyframes
40%
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0.07)
50%
box-shadow: inset 30px 0 20px -20px rgba(0, 0, 0, 0.02)
background: #fafafa
90%
box-shadow: inset 30px 0 20px -20px rgba(0, 0, 0, 0.02)
background: #fafafa
@-webkit-keyframes
0%
-webkit-transform: scale(0.4)
25%
-webkit-transform: scale(0.9)
60%
-webkit-transform: scale(0.9)
100%
-webkit-transform: scale(0.4)
@-moz-keyframes
0%
-moz-transform: scale(0.4)
25%
-moz-transform: scale(0.9)
60%
-moz-transform: scale(0.9)
100%
-moz-transform: scale(0.4)
@keyframes
0%
transform: scale(0.4)
25%
transform: scale(0.9)
60%
transform: scale(0.9)
100%
transform: scale(0.4)
/** GENERAL**/
html,
body
width: 100%
height: 100%
body
background hsl(36, 8%, 12%)
color: #333333
font-family: 'Open sans condensed', sans-serif
font-size: 0.1px
::-webkit-scrollbar-track
-webkit-box-shadow inset 0 0 1px hsla(100,80%,100%,.51)
background-color hsla(100,80%,10%,.51)
border-radius 10px
::-webkit-scrollbar
width 5px
background-color rgba(white,.2)
::-webkit-scrollbar-thumb
border-radius 10px
background-color #111
background-image -webkit-gradient(linear,
40% 0%,
75% 84%,
from(hsl(41, 83%, 50%)),
to(hsl(28, 93%, 39%)),
color-stop(.6,hsl(344, 84%, 52%)))
*
-webkit-box-sizing: border-box
-moz-box-sizing: border-box
box-sizing: border-box
/* MASTER CONTAINER */
.master-container
min-height: 100%
margin-bottom: 0
padding-top: 0
background: hsl(36, 8%, 0%)
.master-container:after
content: ''
display: block
height: 150px
.nav-open .master-container,
.nav-open .global-footer,
.nav-open .global-nav,
.nav-open .global-header
-webkit-transform: translateX(200px)
-moz-transform: translateX(200px)
-ms-transform: translateX(200px)
transform: translateX(200px)
/* CONTENT SECTIONS */
section article,
section > header
background: hsl(36, 8%, 12%)
padding: 15px
section article > *,
section > header > *
max-width: 700px
section article > form,
section > header > form
max-width: 100%
section article > *:last-child,
section > header > *:last-child,
section article > *:last-child > *:last-child,
section > header > *:last-child > *:last-child,
section article > *:last-child > *:last-child > *:last-child,
section > header > *:last-child > *:last-child > *:last-child
margin-bottom: 0
section > header
border-top: 3px solid #9dd8d9
border-bottom: 1px solid rgba(94, 168, 181, 0.9)
section > header .no
position: absolute
section > header .no + h3
margin-left: 1.8em
section .spacer
height: 20px
section.paragraph + .paragraph article,
section.paragraph + .code article,
section.paragraph + .codepen article,
section.code + .paragraph article,
section.code + .code article,
section.codepen + .paragraph article
padding-top: 0
/*TYPOGRAPHY*/
/* Headings
---------------------------------------------------------------------- */
h2,
h3
font-size: 30px
font-weight: 700
margin-bottom: .4em
h3
font-size: 22px
margin-bottom: .6em
-webkit-font-smoothing: auto
h4
font-size: 24px
font-weight: 300
margin-bottom: .6em
line-height: 1.3
h5
font-size: 16px
font-weight: 700
margin-bottom: 1em
h6
font-size: 18px
font-weight: 700
margin-bottom: 1em
h6 span
font-weight: 400
/* Copy
---------------------------------------------------------------------- */
p,
section article li
font-size: 18px
font-weight: 300
margin-bottom: 1.1em
line-height: 1.57
font-family: 'Open sans condensed', sans-serif
text-rendering: optimizing-legiblity
-webkit-font-smoothing: auto
letter-spacing: .01em
p strong,
section article li strong
font-weight: 500
-webkit-font-smoothing: antialiased
p.caption,
section article li.caption
margin: .3em 0 1.6em
line-height: 1.2
p.caption span,
section article li.caption span
font-size: .8em
font-weight: 500
-webkit-font-smoothing: antialiased
section article li
margin-left: 1.5em
a,
.read-more
color: #fff
display: inline-flex
p a,
.read-more
border-bottom: 1px dashed transparent
p a:hover,
.read-more:hover
border-color: rgba(3, 137, 156, 0.3)
a:hover .read-more
border-color: rgba(3, 137, 156, 0.3)
.read-more
font-weight: 500
.read-more:after
content: ' »'
.no
display: inline-block
font-size: 18px
font-weight: 700
font-style: normal
background: #e2e2e2
color: white
text-align: center
min-width: 1.5em
padding: .14em .3em
border-radius: 2px
-webkit-font-smoothing: auto
.dot
display: inline-block
vertical-align: middle
margin: 0 15px 0 5px
font-size: 16px
.dot:last-child
margin-right: 0
.dot.resolved
color: #92e094
.dot.under-review
color: #6bd2e8
/* Code
---------------------------------------------------------------------- */
pre,
pre.prettyprint
background: #3a3a3a !important
padding: 15px
font-family: 'PT sans narrow', monaco
color: #e8e8e8
font-size: 14px
border-radius: 1px
overflow: auto
webkit-tab-size: 4
-moz-tab-size: 4
tab-size: 4
white-space: pre-wrap
white-space: -moz-pre-wrap
white-space: -pre-wrap
white-space: -o-pre-wrap
word-wrap: break-word
-webkit-font-smoothing: auto
pre code,
pre.prettyprint code
background: transparent
padding: 0
margin: 0
code
font-family: 'PT sans narrow', monaco
background: #f2f2f2
padding: 6px 6px 3px
margin: 0 3px
border-radius: 2px
font-size: .8em
-webkit-font-smoothing: auto
/* Forms
---------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
textarea,
.btn
font-family: 'Open sans condensed', sans-serif
font-size: 16px
label,
.info span
display: inline-block
font-size: 14px
letter-spacing: 1px
font-weight: 500
line-height: 1.4
margin-bottom: .8em
text-align: left
max-width: 640px
label:last-child,
.info span:last-child
margin-bottom: 0
.info span
display: block
label
margin: 0 5px
/* USER INTERFACE*/
/* Form Elements */
.mix-form
text-align: justify
.mix-form .info,
.mix-form .spacer,
.mix-form h5
display: inline-block
width: 100%
.form-wrapper
border-top: 1px solid #f2f2f2
.field
display: inline-block
position: relative
margin: 0 0 2%
width: 100%
.field.hidden
visibility: hidden
margin: 0
.field.mini
width: 32%
vertical-align: top
.field .quicktags-toolbar
position: relative
.field.required-text:after,
.field.required-check:after,
.field.required-dropdown:after,
.field.required-text .quicktags-toolbar:after
position: absolute
right: 14px
top: 0
width: 10px
border-top: 2px solid #9dd8d9
content: ''
.field.required-text.bbp-content:after
display: none
.field.required-text .quicktags-toolbar:after
top: auto
bottom: -2px
.field.required-check:after
left: 5px
width: 8px
.field.invalid.required-text:after,
.field.invalid.required-check:after,
.field.invalid.required-dropdown:after
border-top-color: #e39a9a
.field.invalid input[type="text"],
.field.invalid input[type="password"],
.field.invalid .dropdown,
.field.invalid textarea
background: #f7e0e0
border-color: #ccc
.field.invalid input[type="text"]::-webkit-input-placeholder,
.field.invalid input[type="password"]::-webkit-input-placeholder,
.field.invalid .dropdown::-webkit-input-placeholder,
.field.invalid textarea::-webkit-input-placeholder
color: #bbb
@media all and (min-width: 641px)
.field.half
width: 49%
/* Text Inputs */
input[type="text"],
input[type="password"],
textarea
font-weight: 400
padding: 8px 10px
margin: 0
border: 2px solid #e2e2e2
border-bottom-width: 4px
width: 100%
resize: none
border-radius: 3px
-webkit-appearance: none
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus
border-color: #9dd8d9
outline: 0 none
textarea
font-weight: 300
::-webkit-input-placeholder
color: #ccc
font-weight: 400
-webkit-font-smoothing: antialiased
input:focus::-webkit-input-placeholder
color: #ddd
:-moz-placeholder
color: #aaa
font-weight: 400
::-moz-placeholder
color: #aaa
font-weight: 400
:-ms-input-placeholder
color: #ccc
font-weight: 400
/* Checkboxes */
.checkbox
display: inline-block
position: relative
cursor: pointer
.checkbox input[type="checkbox"]
position: absolute
display: block
top: 0
left: 0
height: 100%
width: 100%
cursor: pointer
margin: 0
opacity: 0
z-index: 1
.checkbox label
display: inline-block
vertical-align: top
text-align: left
padding-left: 1.5em
.checkbox label:before,
.checkbox label:after
content: ''
display: block
position: absolute
.checkbox label:before
left: 0
top: 0
width: 18px
height: 18px
margin-right: 10px
background: #ddd
border-radius: 3px
.checkbox label:after
content: ''
position: absolute
top: 4px
left: 4px
width: 10px
height: 10px
border-radius: 2px
background: #68b8c4
opacity: 0
pointer-events: none
.checkbox.invalid label:before
background: #f7e0e0
.checkbox input:checked ~ label:after
opacity: 1
.checkbox input:focus ~ label:before
background: #e8e8e8
/* DROPDOWNS */
.dropdown
position: relative
cursor: pointer
font-size: 16px
border: 2px solid #e2e2e2
border-bottom-width: 4px
border-radius: 3px
-webkit-transition: border 150ms
-moz-transition: border 150ms
-ms-transition: border 150ms
transition: border 150ms
.dropdown .selected::after,
.dropdown.scrollable div::after
pointer-events: none
.dropdown.open
z-index: 2
border-radius: 2px 2px 0 0
.dropdown.focus
border-color: #9dd8d9
.dropdown .carat
content: ''
position: absolute
right: 10px
top: 50%
margin-top: -4px
border: 7px solid transparent
border-top: 7px solid #999999
z-index: 2
-webkit-transform-origin: 50% 20%
-moz-transform-origin: 50% 20%
-ms-transform-origin: 50% 20%
transform-origin: 50% 20%
.dropdown.open .carat
-webkit-transform: rotate(180deg)
-moz-transform: rotate(180deg)
-ms-transform: rotate(180deg)
transform: rotate(180deg)
.dropdown .old
position: absolute
left: 0
top: 0
height: 0
width: 0
overflow: hidden
.dropdown.touch .old
width: 100%
height: 100%
overflow: visible
.dropdown.touch select
width: 100%
height: 100%
opacity: 0
.dropdown .selected,
.dropdown li
display: block
line-height: 1
color: #ccc
padding: 10px 10px 9px
overflow: hidden
white-space: nowrap
.dropdown.has-value .selected,
.dropdown.has-value li
color: #333
.dropdown div
position: absolute
height: 0
left: -2px
right: -2px
top: 100%
margin-top: 0px
background: white
overflow: hidden
border: 2px solid #e2e2e2
border-bottom-width: 4px
opacity: 0
border-radius: 0 0 3px 3px
-webkit-backface-visibility: hidden
.dropdown.open div
opacity: 1
z-index: 2
.dropdown.focus div
border-color: #9dd8d9
.dropdown.scrollable div::after
content: ''
position: absolute
left: 0
right: 0
bottom: 0
height: 50px
box-shadow: inset 0 -50px 30px -35px #ffffff
.dropdown.scrollable.bottom div::after
opacity: 0
.dropdown ul
position: absolute
left: 0
top: 0
height: 100%
width: 100%
min-height: 0 !important
padding: 0 !important
margin: 0 !important
list-style: none
overflow: hidden
.dropdown ul:after
display: none !important
.dropdown.scrollable.open ul
overflow-y: auto
.dropdown li
list-style: none
padding: 10px
font-size: 16px
margin: 0
font-weight: 400
.dropdown li.focus
position: relative
z-index: 3
color: #fff
background: #68b8c4
.dropdown li.active
color: #68b8c4
.dropdown li.active.focus
color: #fff
/* LABELS */
label
font-size: 14px
letter-spacing: 1px
font-weight: 500
line-height: 1.4
/* BUTTONS */
.btn,
.ed_button
font-family: 'Open sans condensed', sans-serif
font-size: 10px
line-height: 1
background: #68b8c4
padding: 14px 10px
margin: 0
min-width: 40px
cursor: pointer
text-align: center
text-transform: uppercase
letter-spacing: 1px
font-weight: 700
color: white
border: 0 none
border-top: 1px solid transparent
border-bottom: 1px solid #03899c
border-radius: 2px
-webkit-appearance: none
.btn.submit,
.ed_button.submit
min-width: 120px
text-align: center
margin-right: 1em
.btn:disabled,
.ed_button:disabled
background: #f2f2f2 !important
border-bottom: transparent
border-top: 1px solid #e2e2e2 !important
color: #999999
cursor: default
.btn.cta,
.ed_button.cta
background: #92e094
border-bottom-color: #36bd39
.btn.cta:hover,
.ed_button.cta:hover
background: #a6e6a7
border-bottom-color: #92e094
.btn.cta:active,
.ed_button.cta:active
border-top-color: #92e094
border-bottom-color: transparent
.btn:hover,
.ed_button:hover
background: #9dd8d9
border-bottom-color: #68b8c4
.btn:active,
.ed_button:active
border-top-color: #68b8c4
border-bottom-color: transparent
.btn:focus,
.ed_button:focus
outline: 0 none
/* SLIDERS */
.slider
position: relative
height: 8px
background: rgba(255, 255, 255, 0.4)
margin: 30px auto
border-radius: 3px
.slider .scrubber
-webkit-transition: -webkit-transform 150ms
-moz-transition: -moz-transform 150ms
transition: transform 150ms
position: absolute
left: 50%
width: 26px
height: 26px
background: #eee
margin: -9px 0 0 -13px
cursor: pointer
z-index: 4
border-radius: 999px
.slider .scrubber:before,
.slider .scrubber:after
position: absolute
opacity: 0
-moz-pointer-events: none
pointer-events: none
.slider .scrubber:after
content: attr(data-value)
width: auto
height: 25px
top: 0
right: 35px
padding: 0 6px
text-align: right
font-size: 15px
font-weight: 600
line-height: 25px
color: #fff
background: #000
border-radius: 2px
.slider .scrubber:before
content: ''
top: 9px
right: 25px
border: 4px solid transparent
border-left: 6px solid #000
.slider .scrubber.down
-webkit-transform: scale(1.1)
-moz-transform: scale(1.1)
-ms-transform: scale(1.1)
transform: scale(1.1)
.slider .scrubber.down:after,
.slider .scrubber.down:before
opacity: 1
/* WP EDITOR*/
.quicktags-toolbar .ed_button
background: #f2f2f2
border-bottom-color: #e2e2e2
color: #555555
margin: 0 2px 6px
.quicktags-toolbar .ed_button:first-child
margin-left: 0
font-weight: 900
.quicktags-toolbar .ed_button:nth-child(2)
font-style: italic
.quicktags-toolbar .ed_button:nth-child(3)
display: none
.quicktags-toolbar .ed_button:hover
color: #68b8c4
.quicktags-toolbar .ed_button:active
background: #f8f8f8
border-top-color: #f2f2f2
border-bottom-color: transparent
/* ALERT/INFO BOX */
.info
position: relative
padding: 10px 40px 10px 10px
background: #f8f8f8
border-radius: 2px
margin-bottom: 20px
.info.alert
background: #f7e0e0
.info .close
right: 0
top: 50%
margin-top: -17px
/* CONTROL-BAR */
.control-bar
background: transparent
padding: 5px 10px
text-align: left
.control-bar label
margin: 0 5px 0 15px
display: inline-block
vertical-align: middle
display: none
.control-bar .legend
text-align: left
display: inline-block
vertical-align: middle
.control-bar .legend label
margin: 0 20px 0 5px
.control-bar .legend .dot
margin: 0 5px 0 0
.control-bar form
text-align: left
width: 250px
margin: 0
display: inline-block
vertical-align: middle
margin: 5px 0
.control-bar,
.meta-bar
overflow: hidden
.control-bar .btn,
.meta-bar .btn
display: inline-block
vertical-align: middle
margin: 5px
background: transparent
color: #777
border-top: 1px solid transparent
border-bottom: 1px solid rgba(94, 168, 181, 1)
.control-bar .btn:hover,
.meta-bar .btn:hover
border-bottom: 1px solid rgba(215, 40, 92, 1)
color: rgba(215, 40, 92, 1)
.control-bar .btn.active,
.meta-bar .btn.active
color: white
font-weight: 700
border-top: 1px solid #03899c
border-bottom: 0 none
.control-bar .btn:active,
.meta-bar .btn:active
border-bottom-color: transparent
border-top: 1px solid #ddd
.control-bar.pagination .disabled,
.meta-bar.pagination .disabled
opacity: .5
cursor: default
pointer-events: none
/* BREADCRUMBS */
.breadcrumbs
background: white
padding: 10px 15px
border-bottom: 1px solid #f2f2f2
overflow-y: hidden
overflow-x: auto
white-space: nowrap
.breadcrumbs p
margin: 0
font-weight: 500
font-size: 16px
letter-spacing: 1px
.breadcrumbs p span
display: inline-block
position: relative
padding: 0 15px 0 8px
.breadcrumbs p a
border: none
.breadcrumbs p a:first-child span
padding-left: 0
.breadcrumbs p a span:before,
.breadcrumbs p a span:after
content: ''
position: absolute
right: 0
top: 50%
height: 1px
width: 30px
background: #e8e8e8
-webkit-transform-origin: 100% 50%
-moz-transform-origin: 100% 50%
-ms-transform-origin: 100% 50%
transform-origin: 100% 50%
.breadcrumbs p a span:before
-webkit-transform: rotate(60deg)
-moz-transform: rotate(60deg)
-ms-transform: rotate(60deg)
transform: rotate(60deg)
.breadcrumbs p a span:after
-webkit-transform: rotate(-60deg)
-moz-transform: rotate(-60deg)
-ms-transform: rotate(-60deg)
transform: rotate(-60deg)
/* BACK TO TOP */
.back-to-top
position: fixed
right: 30px
height: 40px
width: 40px
bottom: 30px
cursor: pointer
opacity: .7
-webkit-transform: scale(1)
-moz-transform: scale(1)
-ms-transform: scale(1)
transform: scale(1)
.back-to-top.hidden
opacity: 0
pointer-events: none
-webkit-transform: scale(0.7)
-moz-transform: scale(0.7)
-ms-transform: scale(0.7)
transform: scale(0.7)
.back-to-top:after
content: ''
border: 20px solid transparent
border-bottom: 25px solid #68b8c4
.back-to-top:hover
-webkit-animation: nod 0.3s infinite linear
-moz-animation: nod 0.3s infinite linear
-ms-animation: nod 0.3s infinite linear
animation: nod 0.3s infinite linear
/* CLOSE BUTTONS */
.close
position: absolute
right: -30px
top: -30px
height: 30px
width: 35px
font-size: 20px
color: #333
opacity: .3
text-align: center
line-height: 35px
cursor: pointer
.close:hover
opacity: 1
.close:before
content: '✖'
/**
* Global Footer
*/
.global-footer
border-top: 1px solid #e8e8e8
height: 150px
padding: 15px
background: #fff
text-align: justify
position: relative
z-index: 2
.global-footer > *
display: inline-block
.global-footer .medaillon
display: block
width: 210px
height: 90px
background: url(im/logo.svg)
background-size: cover
margin-bottom: 20px
.global-footer:after
content: ''
display: inline-block
width: 100%
.global-footer .legal
font-size: 17px
text-align: left
.global-footer .legal strong
font-weight: 400
.global-footer [class$="-logo"]
position: relative
right: -0.2em
/* MODAL*/
.modal-wrapper
display: none
position: fixed
width: 100%
height: 100%
top: 0
left: 0
-moz-pointer-events: none
pointer-events: none
.modal
display: none
position: absolute
height: 300px
width: 600px
top: 50%
left: 50%
margin: -150px 0 0 -300px
border-radius: 2px
border: 30px solid #fff
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1)
-moz-pointer-events: all
pointer-events: all
.modal .content
background: transparent
.modal textarea
width: 100%
height: 240px
background: rgba(50, 50, 50, 0.8)
border: 0 none
color: #fff
resize: none
font-size: 14px
font-family: 'PT sans narrow', monaco
-webkit-tab-size: 4
-moz-tab-size: 4
tab-size: 4
border-radius: 2px
.modal textarea:focus
border-color: #ddd
.modal .solid
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background: white
.modal .intercept label
margin-bottom: 20px
.modal .intercept .mix-form
text-align: center
.modal .intercept .mix-form .field
margin-right: 20px
/*LOADER*/
.loader-wrapper
display: none
position: fixed
width: 100%
height: 100%
top: 0
left: 0
background: rgba(255, 255, 255, 0.5)
.loader
position: absolute
height: 50px
width: 100px
top: 50%
left: 50%
margin: -25px 0 0 -50px
border-radius: 2px
-moz-pointer-events: all
pointer-events: all
.loader i
width: 25px
height: 25px
border-radius: 999px
background: rgba(104, 184, 196, 0.8)
.ie-blocker
position: absolute
top: 0
right: 0
bottom: 0
left: 0
position: fixed
background: white
z-index: 999
/**
* Illustrations
*/
.illustration
text-align: center
-webkit-transform: translateZ(0)
-moz-transform: translateZ(0)
-ms-transform: translateZ(0)
transform: translateZ(0)
-webkit-perspective: 300px
-moz-perspective: 300px
-ms-perspective: 300px
perspective: 300px
.illustration:before
content: ''
height: 100%
display: inline-block
vertical-align: middle
.dev
text-align: left
display: inline-block
position: relative
vertical-align: middle
font-size: 10px
width: 5em
height: 4em
.dev:before
content: '...'
color: limegreen
padding: 0 .5em
letter-spacing: -0.2em
font-weight: bold
font-family: 'PT sans narrow'
position: absolute
left: 0
top: 0
width: 5em
height: 3.5em
background: black
border-bottom: .6em solid #ccc
border-radius: .2em
-moz-box-sizing: border-box
box-sizing: border-box
-webkit-animation: flash 2s linear infinite
-moz-animation: flash 2s linear infinite
-ms-animation: flash 2s linear infinite
animation: flash 2s linear infinite
.dev:after
content: ''
position: absolute
left: 1em
top: 1.5em
width: 3em
height: 3em
background: #9dd8d9
border-radius: 999px
box-shadow: inset 0 -0.4em 0 rgba(0, 0, 0, 0.05), 0 -0.8em 0 -0.2em rgba(157, 216, 217, 0.3)
-webkit-animation: bounce 1s linear infinite
-moz-animation: bounce 1s linear infinite
-ms-animation: bounce 1s linear infinite
animation: bounce 1s linear infinite
.devgru .dev:nth-child(1):before
-webkit-animation-delay: 3.8s
-moz-animation-delay: 3.8s
-ms-animation-delay: 3.8s
-animation-delay: 3.8s
.devgru .dev:nth-child(1):after
background: #68b8c4
-webkit-animation-delay: 3.8s
-moz-animation-delay: 3.8s
-ms-animation-delay: 3.8s
-animation-delay: 3.8s
.devgru .dev:nth-child(2):before
-webkit-animation-delay: 0.5s
-moz-animation-delay: 0.5s
-ms-animation-delay: 0.5s
-animation-delay: 0.5s
.devgru .dev:nth-child(2):after
-webkit-animation-delay: 0.5s
-moz-animation-delay: 0.5s
-ms-animation-delay: 0.5s
-animation-delay: 0.5s
.devgru .dev:nth-child(3):before
-webkit-animation-delay: 2.3s
-moz-animation-delay: 2.3s
-ms-animation-delay: 2.3s
-animation-delay: 2.3s
.devgru .dev:nth-child(3):after
background: #e39a9a
-webkit-animation-delay: 2.3s
-moz-animation-delay: 2.3s
-ms-animation-delay: 2.3s
-animation-delay: 2.3s
box-shadow: inset 0 -0.4em 0 rgba(0, 0, 0, 0.05), 0 -0.8em 0 -0.2em rgba(227, 154, 154, 0.3)
.devgru .dev:nth-child(4):before
-webkit-animation-delay: 0.75s
-moz-animation-delay: 0.75s
-ms-animation-delay: 0.75s
-animation-delay: 0.75s
.devgru .dev:nth-child(4):after
background: #6bd2e8
-webkit-animation-delay: 0.75s
-moz-animation-delay: 0.75s
-ms-animation-delay: 0.75s
-animation-delay: 0.75s
.multi .dev
margin: 0 5px
.multi .devgru
display: inline-block
vertical-align: middle
width: 99%
.book
position: relative
display: inline-block
vertical-align: middle
font-size: 10px
width: 6em
height: 8em
background: #68b8c4
-webkit-transform: rotateX(45deg) rotateY(-15deg) rotateZ(20deg)
-moz-transform: rotateX(45deg) rotateY(-15deg) rotateZ(20deg)
-ms-transform: rotateX(45deg) rotateY(-15deg) rotateZ(20deg)
transform: rotateX(45deg) rotateY(-15deg) rotateZ(20deg)
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
transform-style: preserve-3d
.book:before
content: ''
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background: #9dd8d9
-webkit-transform-origin: 0
-moz-transform-origin: 0
-ms-transform-origin: 0
transform-origin: 0
-webkit-transform: rotateY(-40deg)
-moz-transform: rotateY(-40deg)
-ms-transform: rotateY(-40deg)
transform: rotateY(-40deg)
-webkit-animation: turnCover 5s ease infinite 2s
-moz-animation: turnCover 5s ease infinite 2s
-ms-animation: turnCover 5s ease infinite 2s
animation: turnCover 5s ease infinite 2s
.book .page
position: absolute
top: 0
right: 0
bottom: 0
left: 0
background: #f1f1f1
box-shadow: inset 70px 0 20px -20px rgba(0, 0, 0, 0.07)
-webkit-transform-origin: 0
-moz-transform-origin: 0
-ms-transform-origin: 0
transform-origin: 0
-webkit-transform: rotateY(-5deg)
-moz-transform: rotateY(-5deg)
-ms-transform: rotateY(-5deg)
transform: rotateY(-5deg)
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
transform-style: preserve-3d
-webkit-animation: turnPageThree 5s ease infinite 2s
-moz-animation: turnPageThree 5s ease infinite 2s
-ms-animation: turnPageThree 5s ease infinite 2s
animation: turnPageThree 5s ease infinite 2s
.book .page:nth-child(2)
background: #fcfcfc
-webkit-transform: rotateY(-15deg)
-moz-transform: rotateY(-15deg)
-ms-transform: rotateY(-15deg)
transform: rotateY(-15deg)
-webkit-animation: turnPageTwo 5s ease infinite 2s
-moz-animation: turnPageTwo 5s ease infinite 2s
-ms-animation: turnPageTwo 5s ease infinite 2s
animation: turnPageTwo 5s ease infinite 2s
.book .page:nth-child(3)
background: #fcfcfc
-webkit-transform: rotateY(-25deg)
-moz-transform: rotateY(-25deg)
-ms-transform: rotateY(-25deg)
transform: rotateY(-25deg)
-webkit-animation: turnPageOne 5s ease infinite 2s
-moz-animation: turnPageOne 5s ease infinite 2s
-ms-animation: turnPageOne 5s ease infinite 2s
animation: turnPageOne 5s ease infinite 2s
.bug
position: absolute
left: 50%
top: 50%
margin: -1.4em 0 0 -1em
font-size: .75em
width: 2em
height: 2.6em
color: #333
background: #e39a9a
border-top-left-radius: 1em 1.3em
border-top-right-radius: 1em 1.3em
border-bottom-left-radius: 1em 1.3em
border-bottom-right-radius: 1em 1.3em
box-shadow: inset -8px 0 0 rgba(0, 0, 0, 0.1)
-webkit-transform: scale(0.4)
-moz-transform: scale(0.4)
-ms-transform: scale(0.4)
transform: scale(0.4)
-webkit-animation: magnify 5s ease infinite 2s
-moz-animation: magnify 5s ease infinite 2s
-ms-animation: magnify 5s ease infinite 2s
animation: magnify 5s ease infinite 2s
.bug:before
content: ''
position: absolute
top: 0em
left: 50%
margin-left: -0.5em
background: #333
width: 1em
height: 0.6em
border-top-left-radius: 0.5em 0.3em
border-top-right-radius: 0.5em 0.3em
border-bottom-left-radius: 0.5em 0.3em
border-bottom-right-radius: 0.5em 0.3em
.bug:after
text-align: center
display: block
padding: .45em .1em
content: '• • ••'
line-height: .4
word-spacing: -0.1em
font-size: 1.6em
.glass
display: inline-block
vertical-align: middle
position: relative
font-size: 11px
width: 4em
height: 4em
border: 0.3em solid #68b8c4
border-radius: 999px
box-shadow: inset 0 0 10px #ffffff, inset -5px 0 0 #d2ebe1
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
transform: rotate(45deg)
.glass:after
content: ''
position: absolute
top: 100%
left: 50%
margin: 0.2em 0 0 -0.4em
width: .8em
height: 2.5em
border-radius: .3em
background: #9dd8d9
box-shadow: inset -8px 0 4px -3px rgba(100, 100, 100, 0.1)
/*SANDBOX*/
.sandbox-control-bar .btn[data-filter=".film"].active
background: transparent
.sandbox-control-bar .btn[data-filter=".realisateur"].active
background: transparent
.sandbox-control-bar .btn[data-filter=".auteur"].active
background: transparent
border-top-color: #919836
.sandbox-control-bar .toggle-config
width: 36px
vertical-align: middle
margin-left: 10px
margin-right: 0
cursor: pointer
background: #000
border: 0 none
opacity: .3
-webkit-transform: scale(0.9)
-moz-transform: scale(0.9)
-ms-transform: scale(0.9)
transform: scale(0.9)
.sandbox-control-bar .toggle-config:hover
-webkit-transform: scale(1)
-moz-transform: scale(1)
-ms-transform: scale(1)
transform: scale(1)
.sandbox-control-bar .toggle-config:active
border: 0 none
.sandbox-control-bar .toggle-config.config-open
opacity: 1
-webkit-transform: scale(1) rotate(90deg)
-moz-transform: scale(1) rotate(90deg)
-ms-transform: scale(1) rotate(90deg)
transform: scale(1) rotate(90deg)
.sandbox-control-bar .toggle-layout
position: relative
.sandbox-control-bar .toggle-layout:hover i
background: #919836
-webkit-transition: 0
-moz-transition: 0
-ms-transition: 0
transition: 0
.sandbox-control-bar .toggle-layout:hover i:after,
.sandbox-control-bar .toggle-layout:hover i:before
background: #68b8c4
-webkit-transition: 0
-moz-transition: 0
-ms-transition: 0
transition: 0
.sandbox-control-bar .toggle-layout i
position: absolute
top: 50%
left: 50%
margin: -2px 0 0 -10px
pointer-events: none
-webkit-transition: background-color 150ms
-moz-transition: background-color 150ms
-ms-transition: background-color 150ms
transition: background-color 150ms
.sandbox-control-bar .toggle-layout i:before,
.sandbox-control-bar .toggle-layout i:after
position: absolute
content: ''
right: 0
-webkit-transition: background-color 150ms
-moz-transition: background-color 150ms
-ms-transition: background-color 150ms
transition: background-color 150ms
.sandbox-control-bar .toggle-layout i:before
-webkit-transform: translateY(-220%)
-moz-transform: translateY(-220%)
-ms-transform: translateY(-220%)
transform: translateY(-220%)
.sandbox-control-bar .toggle-layout i:after
-webkit-transform: translateY(220%)
-moz-transform: translateY(220%)
-ms-transform: translateY(220%)
transform: translateY(220%)
.sandbox-control-bar .toggle-layout i,
.sandbox-control-bar .toggle-layout i:before,
.sandbox-control-bar .toggle-layout i:after
width: 20px
display: block
height: 3px
background: #555
border-radius: 1px
-webkit-transform-origin: 100% 0
-moz-transform-origin: 100% 0
-ms-transform-origin: 100% 0
transform-origin: 100% 0
.sandbox-control-bar .toggle-layout i:after
-webkit-transform-origin: 100% 100%
-moz-transform-origin: 100% 100%
-ms-transform-origin: 100% 100%
transform-origin: 100% 100%
.sandbox-control-bar .toggle-layout.grid-icon i
height: 16px
margin-top: -8px
.sandbox-control-bar .toggle-layout.grid-icon i:before,
.sandbox-control-bar .toggle-layout.grid-icon i:after
width: 22px
margin-right: -1px
background: transparent
height: 4px
-webkit-transform: translateY(150%)
-moz-transform: translateY(150%)
-ms-transform: translateY(150%)
transform: translateY(150%)
.sandbox-control-bar .toggle-layout.grid-icon i:after
-webkit-transform-origin: 50% 50%
-moz-transform-origin: 50% 50%
-ms-transform-origin: 50% 50%
transform-origin: 50% 50%
-webkit-transform: translateY(150%) rotate(90deg)
-moz-transform: translateY(150%) rotate(90deg)
-ms-transform: translateY(150%) rotate(90deg)
transform: translateY(150%) rotate(90deg)
.sandbox-control-bar.pagination .btn.active
background: #6bd2e8
border-top-color: #1c9cb7
.sandbox-control-bar.pagination .disabled
opacity: .5
cursor: default
pointer-events: none
.sandbox
background: hsl(36, 8%, 12%)
position: relative
min-height: 580px
padding: 0px
overflow: hidden
.sandbox-control-bar .group
display: inline-block
/** COULEURS TITRES ET FOND DE CHAQUE BOX **/
.sandbox .mix
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
transform-style: preserve-3d
position: relative
text-align: right
background: #726D62
margin-bottom: 4%
display: none
font-size: 25px
padding-right: 0
line-height: 1.8em
font-weight: 600
color: rgba(255, 255, 255, 0.9)
text-shadow: 1px 1px 1px #111
vertical-align: bottom
-webkit-backface-visibility: hidden
.sandbox .mix:before
content: ''
display: inline-block
padding-top: 60%
vertical-align: middle
.sandbox .mix:after
content: ''
position: absolute
border: 20px solid transparent
border-right-color: #78A1A5
top: -20px
left: -20px
-webkit-transform: rotate(45deg)
-moz-transform: rotate(45deg)
-ms-transform: rotate(45deg)
transform: rotate(45deg)
.sandbox .mix.film:after
border-right-color: #78A1A5
.sandbox .mix.realisateur:after
border-right-color: #D78C5C
.sandbox .mix.auteur:after
border-right-color: #7F8F32
.sandbox .gap,
.sandbox .mix
width: 48%
.sandbox.list .mix
width: 100%
.sandbox.list .mix:before
padding-top: 1%
.sandbox.pagination
min-height: 0
background: #6bd2e8
.sandbox.pagination .mix
margin-bottom: 4%
width: 48%
.sandbox.pagination .mix:before
padding-top: 45%
.sandbox.pagination .mix.film:after
border-right-color: #3fc5e1
.sandbox.pagination .mix.realisateur:after
border-right-color: #fff
.sandbox.pagination .mix.auteur:after
border-right-color: #C4D506
.live-config
position: absolute
right: -320px
top: 0
bottom: 0
width: 320px
padding: 15px
background: rgba(0, 0, 0, 0.7)
.live-config .btn
width: 100%
background: rgba(157, 216, 217, 0.1)
border: 0 none
padding: 17px
.live-config .btn:hover
background: rgba(157, 216, 217, 0.8)
.live-config .effect
margin-bottom: 15px
.live-config .effect label
margin-left: 0
color: rgba(255, 255, 255, 0.45)
font-weight: 700
.live-config .effect .slider
float: right
width: 180px
margin: 6px 0 0 15px
opacity: 1
.live-config .effect.checkbox input
width: 100px
.live-config .effect.checkbox label
margin-left: 5px
.live-config .effect.checkbox label:before
background: rgba(255, 255, 255, 0.45)
.live-config .effect.checkbox label:after
background: transparent
.live-config .effect.checkbox .slider
width: 120px
opacity: .5
.live-config .effect.checkbox input:checked + label
color: rgba(255, 255, 255, 0.9)
.live-config .effect.checkbox input:checked + label:after
background: rgba(255, 255, 255, 0.9)
.live-config .effect.checkbox input:checked ~ .slider
opacity: 1
.live-config .effect.checkbox input:checked ~ .slider .scrubber:hover
-webkit-transform: scale(1.1)
-moz-transform: scale(1.1)
-ms-transform: scale(1.1)
transform: scale(1.1)
.live-config .dropdown
border-color: rgba(255, 255, 255, 0.45)
.live-config .dropdown div
border-top: 2px solid white
border-color: rgba(255, 255, 255, 0.45)
background: #01292e
.live-config .dropdown .selected,
.live-config .dropdown li
color: white
.live-config .dropdown.scrollable div::after
box-shadow: inset 0 -50px 30px -35px #01292e
.config-open .live-config
-webkit-transform: translateX(-320px)
-moz-transform: translateX(-320px)
-ms-transform: translateX(-320px)
transform: translateX(-320px)
/**
* Various Demos
*/
#Demo1
min-height: 350px
padding: 15px
-webkit-transform: rotateX(-20deg) rotateY(40deg) translate3d(10%, 15%, 0)
-moz-transform: rotateX(-20deg) rotateY(40deg) translate3d(10%, 15%, 0)
-ms-transform: rotateX(-20deg) rotateY(40deg) translate3d(10%, 15%, 0)
transform: rotateX(-20deg) rotateY(40deg) translate3d(10%, 15%, 0)
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
transform-style: preserve-3d
-webkit-perspective: 3000
-moz-perspective: 3000
-ms-perspective: 3000
perspective: 3000
-webkit-perspective-origin: 50%
-moz-perspective-origin: 50%
-ms-perspective-origin: 50%
perspective-origin: 50%
#Demo1 .mix
-webkit-transform: translateZ(0)
-moz-transform: translateZ(0)
-ms-transform: translateZ(0)
transform: translateZ(0)
display: none
max-width: 400px
margin: 0 auto 20px
position: relative
height: 70px
line-height: 70px
padding: 0 10px
color: #fff
font-size: 40px
font-weight: 600
letter-spacing: -0.08em
background: rgba(157, 216, 217, 0.5)
-webkit-transform-style: preserve-3d
-moz-transform-style: preserve-3d
-ms-transform-style: preserve-3d
transform-style: preserve-3d
-webkit-transform-origin: 100% 0
-moz-transform-origin: 100% 0
-ms-transform-origin: 100% 0
transform-origin: 100% 0
#Demo1 .mix:before,
#Demo1 .mix:after
display: block
content: ''
position: absolute
background: rgba(157, 216, 217, 0.4)
#Demo1 .mix:before
height: 70px
width: 80px
left: 0
top: 0
opacity: .8
-webkit-transform: rotateY(90deg)
-moz-transform: rotateY(90deg)
-ms-transform: rotateY(90deg)
transform: rotateY(90deg)
-webkit-transform-origin: 0 0
-moz-transform-origin: 0 0
-ms-transform-origin: 0 0
transform-origin: 0 0
#Demo1 .mix:after
content: ''
height: 80px
width: 100%
max-width: 400px
left: 0
top: 0
opacity: .5
-webkit-transform: rotateX(-90deg)
-moz-transform: rotateX(-90deg)
-ms-transform: rotateX(-90deg)
transform: rotateX(-90deg)
-webkit-transform-origin: 100% 0
-moz-transform-origin: 100% 0
-ms-transform-origin: 100% 0
transform-origin: 100% 0
/*DOCUMENTATION*/
/* Config Object Menu */
.config-object-menu
-webkit-font-smoothing: auto
vertical-align: top
left: 0
z-index: 1
font-family: Consolas, monaco, 'consolas-wf', Courier, monospace
font-size: 15px
.config-object-menu.affixed
position: fixed
top: 0
-webkit-backface-visibility: hidden
.config-object-menu.affixed.bottom
position: absolute
top: auto
bottom: 0
.config-object-menu .bracket
color: #888
.config-object-menu .arg
color: #03899c
.config-object-menu ul
list-style: none
margin: 8px 0
line-height: 1
padding-left: 0
.config-object-menu ul li
margin: 0
max-height: 2em
overflow: hidden
.config-object-menu ul li.group .label
display: inline-block
cursor: pointer
padding: 8px 10px 6px 17px
border-left: 3px solid transparent
margin: 2px 0 5px
.config-object-menu ul li.group .label:hover
background: #f8f8f8
.config-object-menu ul li.group .label.active
background: #f8f8f8
border-left-color: #68b8c4
.config-object-menu ul li.group .label:after
color: #888
content: ' {...},'
.config-object-menu ul li.group .label:before
content: ''
display: inline-block
border: 5px solid transparent
border-left: 8px solid #03899c
position: relative
right: 7px
.config-object-menu ul li.group ul
margin: 0 0 5px
.config-object-menu ul li.group:last-child .label:after
content: ' {...}'
.config-object-menu ul li.group.open
max-height: 100%
.config-object-menu ul li.group.open .label:after
content: ' {'
.config-object-menu ul li.group.open .label:before
border: 5px solid transparent
border-top: 8px solid #03899c
top: 4px
right: 11px
margin-left: 3px
.config-object-menu ul li.group.open:after
display: block
color: #888
content: '},'
margin: 0 0 .5em 2.1em
.config-object-menu ul li.group.open:last-child:after
content: '}'
.config-object-menu ul li.prop
margin-left: 2.5em
display: block
cursor: pointer
padding: 8px 10px 6px 8px
border-left: 3px solid transparent
white-space: nowrap
.config-object-menu ul li.prop:hover
background: #f8f8f8
.config-object-menu ul li.prop.active
background: #f8f8f8
border-left-color: #68b8c4
.config-object-menu ul li.prop:after
color: #888
content: ','
.config-object-menu ul li.prop:last-child:after
content: ''
.config-object-menu ul li .val
color: #03899c
/** MEDIASCREEN **/
@media all and (min-width: 641px)
.btn,
.ed_button
font-size: 12px
.global-footer .legal
text-align: right
.global-footer .medaillon
display: inline-block
margin-bottom: 0
.sandbox.pagination .mix
width: 23.5%
margin-bottom: 0
.sandbox .mix
margin-bottom: 2%
font-size: 18px
.sandbox .mix:before
padding-top: 80%
.sandbox .gap,
.sandbox .mix
width: 23.5%
@media all and (min-width: 769px)
.master-container
padding-top: 0
.has-sidebar .master-container
margin-left: 320px
border-left: 1px solid #e8e8e8
.nav-open .master-container,
.nav-open .global-footer,
.nav-open .global-nav,
.nav-open .global-header
-webkit-transform: translateX(300px)
-moz-transform: translateX(300px)
-ms-transform: translateX(300px)
transform: translateX(300px)
section article,
section > header
padding: 30px
section.align-right article
direction: rtl
text-align: right
section.align-right article > *
direction: ltr
h2
font-size: 35px
h2.alt
font-size: 28px
h3
font-size: 28px
h4
font-size: 28px
h5
font-size: 20px
p,
section article li
font-size: 20px
.no
font-size: 22px
input[type="text"],
input[type="password"],
textarea
font-size: 18px
input[type="text"],
input[type="password"],
textarea,
.dropdown,
.dropdown li
font-size: 18px
.btn,
.ed_button
font-size: 14px
.control-bar
padding: 5px 30px
text-align: right
.control-bar label
display: inline-block
.control-bar.just
text-align: justify
.control-bar.just:after
content: ''
width: 100%
display: inline-block
.control-bar.just > *
display: inline-block
vertical-align: top
text-align: left
.control-bar.just > *
vertical-align: middle
.breadcrumbs
padding: 10px 30px
.global-footer
padding: 20px 30px
.loader
margin-left: 110px
.dev
font-size: 15px
.multi .dev
font-size: 10px
margin-bottom: 12px
.glass
margin: 3em 0
font-size: 16px
#Demo1
padding: 40px
-webkit-transform: rotateX(-20deg) rotateY(40deg) translate3d(5%, 15%, 0)
-moz-transform: rotateX(-20deg) rotateY(40deg) translate3d(5%, 15%, 0)
-ms-transform: rotateX(-20deg) rotateY(40deg) translate3d(5%, 15%, 0)
transform: rotateX(-20deg) rotateY(40deg) translate3d(5%, 15%, 0)
@media all and (min-width: 809px)
.sandbox-control-bar .group
display: inline-block
.sandbox-control-bar .group.pager-list
float: left
.sandbox-control-bar .toggle-layout
margin-left: 1em
.sandbox
padding: 0
.sandbox .mix:before
padding-top: 45%
.sandbox .gap,
.sandbox .mix
width: 23.5%
font-size: 20px
@media all and (min-width: 1261px)
.has-sidebar .master-container
margin-left: 30%
section article > *,
section > header > *
max-width: 740px
h2
font-size: 40px
h2.alt
font-size: 32px
h3
font-size: 30px
h4
font-size: 32px
p,
section article li
font-size: 21px
.no
font-size: 25px
.loader
margin-left: -25px
left: 63.5%
!
