/* --- name: Colors template: colors tag: - variable - color colors: - variable: "body" description: "The main background color" value: "#FFF" - variable: "text" description: "The default text color on the body" value: "#202023" - variable: "text-gray" description: "The default color for grayed-out text (e. g. for disabled items or subcaptions)" value: "#6A6A6A" - variable: "text-inverted" description: "The default inverted text color on the body" value: "#FFF" - variable: "action" description: "The main action color used for links and buttons" value: "#3031FE" - variable: "line" description: "The default color for lines (e. g. border lines)" value: "#e0e0e0" - variable: "success" description: "The color for positive feedback (e. g. confirmation messages)" value: "#00A685" - variable: "error" description: "The color for negative feedback (e. g. error messages)" value: "#DC153A" --- Color variables that are used throughout the library are defined in the `theme.colors` hash. By default, the following keys are defined: */ /* --- name: rem category: Functions/rem tag: - function --- Converts from `px` to `rem`, based on the assumption that `16px` are equivalent to `1rem`. ## Definition: ```stylus rems = rem(pixels); ``` */ /* --- name: chooseMaxContrast category: Functions/chooseMaxContrast tag: - color - function --- Given one or more foreground colors `fgs` and one background color `bg`, returns the foreground color with the highest contrast ratio with respect to `bg`. ## Definition: ```stylus fg = chooseMaxContrast(fgs, bg); ``` ## Example: ```stylus bg = theme.colors.footer; fg = theme.colors.text; fgInverted = theme.colors.text-inverted; theme.components.color-box.footer = { background-color: (bg), color: (chooseMaxContrast((fg fgInverted), bg)), } ``` */ /* --- name: Global settings template: variables tag: - variable variables: - name: "text-line-height" description: "The line height of the body" default: "1.5rem" - name: "text-font" description: "The `font-family` to be used for regular text" default: "'Roboto', serif" - name: "heading-font" description: "The `font-family` to be used for headings (and possibly subcaptions)" default: "'Roboto', serif" - name: "text-rendering" description: "The `text-rendering` of the body" default: "optimizeLegibility" - name: "transition-duration" description: "The duration of the slide transitions" default: "0.3s" - name: "border-radius" description: "The default radius for borders" default: "2px" --- The `theme.settings` hash defines several global settings for text formatting and styling: */ /* --- name: Global settings category: Shared/Variables template: variables tag: - variables variables: - name: "text-line-height" description: "The line height of the body" default: "1.5rem" - name: "font-family" description: "The font-family of the body" default: "'Helvetica', sans-serif" - name: "text-rendering" description: "The text-rendering of the body" default: "optimizeLegibility" - name: "transition-duration" description: "The duration of the slide transitions" default: "0.4s" - name: "border-radius" description: "The default radius for borders" default: "2px" --- These variables setups some global text formatting and styling. */ /* --- name: Global Reset category: Globals/Reset tag: - reset --- The lernetz css library has a set of reset style to have the same behaviour on every browser. Furthermore this reset sets some global variables like: * body font-families * body line-height * body text-rendering * :root font-size for proper rem conversion */ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:inherit;font-weight:inherit;vertical-align:baseline}:root{font-size:16px}html{font-size:100%}body{line-height:1.5rem;color:;font-family:'Helvetica' , sans-serif;text-rendering:optimizeLegibility;background-color:;-webkit-font-smoothing:antialiased}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}select{vertical-align:middle}textarea{width:100%}table{border-collapse:collapse;border-spacing:0}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}a{text-decoration:none;color:inherit}img{display:block}ul,ol{margin-left:1.25rem}/* --- name: Global helpers category: Globals/Helpers tag: - helper - box-model - display - position - visibility compile: true --- A collection of global helpers to control common styles. Note that every global helper is perfixed with an underscore to indicate that this is a global rule according to rscss. ## Z-Index: ```jade div._z-1 z-index: 1; div._z-2 z-index: 2; div._z-3 z-index: 3; div._z-4 z-index: 4; div._z-5 z-index: 5; div._z-6 z-index: 6; ``` ## Position: ```jade div._absolute position: absolute; div._relative position: relativ; div._fixed position: fixed; div._sticky position: sticky; div._static position: static; ``` ## Display: ```jade div._block display: block; div._inline-block display: inline-block; div._inline display: inline; div._flex display: flex; div._inline-flex display: inline-flex; div._table display: table; div._table-row display: table-row; div._table-cell display: table-cell; div._hidden display: none; ``` ## Visibility: ```jade div._visible visibility: visible; div._invisible visibility: hidden; ``` */ ._z-1{z-index:1}._z-2{z-index:2}._z-3{z-index:3}._z-4{z-index:4}._z-5{z-index:5}._z-6{z-index:6}._absolute{position:absolute}._relative{position:relative}._fixed{position:fixed}._sticky{position:sticky}._static{position:static}._block{display:block}._inline-block{display:inline-block}._inline{display:inline}._flex{display:flex}._inline-flex{display:inline-flex}._table{display:table}._table-row{display:table-row}._table-cell{display:table-cell}._hidden{display:none}._visible{visibility:visible}._invisible{visibility:hidden}/* --- name: .abs-layout category: Components/.abs-layout tag: - component - layout compile: true --- A simple component to position an element absolute. Default is top, left ## Variants The variants for the vertical positioning are `.-top`, `.-vcenter` and `.-bottom`. The variants for the horizontal positioning are `.-right`, `.-hcenter` and `.-left`. Additinally the `-center` variant will center horizontal and vertical. Variants to stretch an item to its full width/height can be dine with `.item.-stretch`. In some situations the abs-layout itself needs to stretch so use the stretch variant on the component. `.abs-layout.-stretch` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-center ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-top.-hcenter ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-top.-right ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-right.-vcenter ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-right.-bottom ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-bottom.-hcenter ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-bottom.-left ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-left.-vcenter ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-left.-top ``` ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-stretch ``` ## Z-Index Every item can controll its z index with the `.-z{i}`variants. ```jade div.abs-layout(style="width: 100%; height: 50px") div.aigis-debug.item.-top.-left.-z1 div.aigis-debug.item.-top.-left.-z2 ``` */ .abs-layout{position:relative}.abs-layout.-stretch{width:100%;height:100%}.abs-layout > .item{position:absolute}.abs-layout > .item.-top{top:0}.abs-layout > .item.-right{right:0}.abs-layout > .item.-bottom{bottom:0}.abs-layout > .item.-left{left:0}.abs-layout > .item.-vcenter{top:50%;transform:translateY(-50%)}.abs-layout > .item.-hcenter{left:50%;transform:translateX(-50%)}.abs-layout > .item.-center{top:50%;left:50%;transform:translate(-50%,-50%)}.abs-layout > .item.-stretch{top:0;left:0;width:100%;height:100%}.abs-layout > .item.-z1{z-index:1}.abs-layout > .item.-z2{z-index:2}.abs-layout > .item.-z3{z-index:3}.abs-layout > .item.-z4{z-index:4}.abs-layout > .item.-z5{z-index:5}.abs-layout > .item.-z6{z-index:6}.abs-layout > .item.-z7{z-index:7}.abs-layout > .item.-z8{z-index:8}.abs-layout > .item.-z9{z-index:9}.abs-layout > .item.-z10{z-index:10}/* --- name: .border-box category: Components/.border-box tag: - component - border compile: true --- A box to control borders on all four sides. ```jade div.border-box.-left Some demo content ``` ```jade div.border-box.-all Some demo content ``` */ .border-box.-top{border-top-style:solid;border-width:1px;border-color:#e0e0e0}.border-box.-right{border-right-style:solid;border-width:1px;border-color:#e0e0e0}.border-box.-bottom{border-bottom-style:solid;border-width:1px;border-color:#e0e0e0}.border-box.-left{border-left-style:solid;border-width:1px;border-color:#e0e0e0}.border-box.-all{border-style:solid;border-width:1px;border-color:#e0e0e0}.border-box.-round{border-radius:50%}/* --- name: .button-style category: Components/.button-style tag: - component - button compile: true --- A button component as a base for different button variants defined in its configuration. ```jade button.button-style default ``` ```jade button.button-style.-disabled -disabled ``` ```jade button.button-style.-hover -hover ``` ```jade button.button-style.-main -main ``` ```jade button.button-style.-main.-hover -main -hover ``` */ .button-style{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:none;display:inline-block;cursor:pointer;outline:none;white-space:nowrap;display:flex;align-items:center}.button-style.-main{color:#fff;background-color:#3031fe;padding:.5rem 1rem}.button-style.-main.-hover:hover{color:#fff;background-color:#1616bd}.button-style.-hover{transition:all .1s}.button-style.-hover:hover{color:#3031fe}.button-style.-disabled{cursor:inherit;background-color:#b6b6b6}/* --- name: .color-box category: Components/.color-box tag: - component - color compile: true --- Controls the background and/or foreground color(s) of the styled element. ## Configuration This component produces a variant for each key in the `theme.components.color-box` hash. For example, you can therefore a `-footer` variants by including the following in the file `color-box.var.styl`: ```stylus theme.components.color-box.footer = { background-color: theme.colors.footer, // assuming this non-default key is defined elsewhere color: theme.colors.text, }; ``` ## Default variants: By default, the following `color-box` variants are defined via `theme.components.color-box`: ```jade div(style="display:flex") div.color-box.-body(style="width:100px;height:100px;margin:5px;padding:5px") span -body div.color-box.-action(style="width:100px;height:100px;margin:5px;padding:5px") span -action div.color-box.-black(style="width:100px;height:100px;margin:5px;padding:5px") span -black div.color-box.-white(style="width:100px;height:100px;margin:5px;padding:5px") span -white ``` ## See also: * [chooseMaxContrast](../../Shared/Functions/index.html#chooseMaxContrast) — In order to guarantee good legibility, the foreground `color` should be chosen in relation to the `background-color` such that a reasonably high contrast ratio will result. If you are working with `theme.colors` variables instead of fixed color values, this can help you select the best one; see there for an example. */ .color-box.-body{background-color:#fff;color:#202023}.color-box.-action{background-color:#3031fe;color:#fff}.color-box.-white{background-color:#fff;color:#000}.color-box.-black{background-color:#000;color:#fff}/* --- name: .display-responsive category: Components/.display-responsive tag: - responsive - display compile: true --- Controls the display of an element depending on the current breakpoint ## Hide `.-hide-medium` hides an element as long as the screen is wider than the breakpoint `medium`. ```jade div.display-responsive.-hide-medium Only shown when the screen is wider than the breakpoint medium ``` ## Show `.-show-medium` show an element as long as the screen is narrower than the breakpoint `medium`. ```jade div.display-responsive.-show-medium Only shown when the screen is narrower than the breakpoint `medium` ``` */ @media all and (max-width:31.25rem){.display-responsive.-hide-small{display:none}}@media all and (min-width:31.25rem){.display-responsive.-show-small{display:none}}@media all and (max-width:47.9375rem){.display-responsive.-hide-medium{display:none}}@media all and (min-width:47.9375rem){.display-responsive.-show-medium{display:none}}@media all and (max-width:75rem){.display-responsive.-hide-large{display:none}}@media all and (min-width:75rem){.display-responsive.-show-large{display:none}}/* --- name: .fixed-layout category: Components/.fixed-layout tag: - container - layout - fixed --- Fixed container You can position the container with the different variants `.-top`, `.-bottom`, `.-left`, `.-right`. To span full width / height use `.-left` & `.-right` / `.-top` & `.-bottom` Fixed top and full width ```jade div.fixed-layout.-top.-left.-right.aigis-debug top left fullwidth ``` Fixed right and full height ```jade div.fixed-layout.-top.-bottom.-right.aigis-debug top right fullheight ``` */ .fixed-layout{position:fixed}.fixed-layout.-top{top:0}.fixed-layout.-bottom{bottom:0}.fixed-layout.-left{left:0}.fixed-layout.-right{right:0}/* --- name: .fixed-page-layout category: Components/.fixed-page-layout tag: - component - layout - fixed - page compile: true --- A page layout with a fixed header and optional sidebars. With the `-margin-{top|left|right}`, `-margin-{top|left|right}-small` variants you can control the spacing. If the content for example needs a spacing towards the header use: `.content.-margin-top`. If the sidebar show be below the header use: `.sidebar.-left.-margin-top`. There are variants to resize the header and sidebars to a smaller width/height: `.header.-small`, `.sidebar.-small`. If you need a spacing on your content or sidebar you need to adjust that manually like this: ``` div.fixed-page-layout div.header.-small div.aigis-debug(style="width:100%;height:100%") Header div.content.-margin-top-small Content div.sidebar.-left.-margin-top-small.-small div.aigis-debug(style="height:100%") Left Sidebar ``` ## Header with sidebars ```jade div.fixed-page-layout div.header div.aigis-debug(style="width:100%;height:100%") Header div.content.-margin-top Content div.sidebar.-left.-margin-top div.aigis-debug(style="height:100%") Left Sidebar div.sidebar.-right div.aigis-debug(style="height:100%") Right Sidebar ``` */ .fixed-page-layout > .header{position:fixed;top:0;left:0;right:0;height:3.125rem}.fixed-page-layout > .header.-small{height:1.875rem}.fixed-page-layout > .header.-hide{transform:translateY(-100%)}.fixed-page-layout > .sidebar{position:fixed;top:0;bottom:0;width:14.5625rem}.fixed-page-layout > .sidebar.-small{width:3.125rem}.fixed-page-layout > .sidebar.-margin-top{top:3.125rem}.fixed-page-layout > .sidebar.-margin-top-small{top:1.875rem}.fixed-page-layout > .sidebar.-left{left:0}.fixed-page-layout > .sidebar.-left.-hide{transform:translateX(-100%)}.fixed-page-layout > .sidebar.-right{right:0}.fixed-page-layout > .sidebar.-right.-hide{transform:translateX(100%)}.fixed-page-layout > .content.-margin-right{margin-right:14.5625rem}.fixed-page-layout > .content.-margin-left{margin-left:14.5625rem}.fixed-page-layout > .content.-margin-right-small{margin-right:3.125rem}.fixed-page-layout > .content.-margin-left-small{margin-left:3.125rem}.fixed-page-layout > .content.-margin-top{margin-top:3.125rem}.fixed-page-layout > .content.-margin-top-small{margin-top:1.875rem}/* --- name: .flex-layout category: Components/.flex-layout tag: - component - layout - flexbox compile: true --- A layout system based on flexbox to align and distribute items horizontally and vertically. # Alignment of items The `-center` shortcut will center all items horizontal & vertical ```jade div(style="height: 100px").flex-layout.-center div.aigis-debug Item 1 div.aigis-debug Item 2 div.aigis-debug Item 3 ``` `-baseline` will align items based on their baseline. Works good if all the items contain text. ```jade div.flex-layout.-baseline div.aigis-debug Item div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2 ``` `-items-top` & `-items-bottom` will align the items either on top or bottom ```jade div.flex-layout.-items-top div.aigis-debug Item 1 div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2 div.aigis-debug Item 3 ``` ```jade div.flex-layout.-items-bottom div.aigis-debug Item 1 div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2 div.aigis-debug Item 3 ``` `-items-center` will center the items vertically ```jade div.flex-layout.-items-center div.aigis-debug Item 1 div.aigis-debug(style="padding-top: 50px;padding-bottom: 30px;") Item 2 div.aigis-debug Item 3 ``` # Alignment of individual items ```jade div(style="height: 100px").flex-layout div.aigis-debug.item.-top top div.aigis-debug.item.-center center div.aigis-debug.item.-bottom bottom div.aigis-debug.item.-stretch stretch ``` # Row mode If you like a container that spans the full width with item that resize themself you can use the `-row` variant. ```jade div.flex-layout.-row div.aigis-debug.item Item 1 div.aigis-debug.item Item 2 div.aigis-debug.item Item 3 ``` If you like to fix an item based on its content width use the `-content` variant. This is a shortcut for `-no-grow -no-shrink`. ```jade div.flex-layout.-row div.aigis-debug.item.-content img(src="http://via.placeholder.com/350x80") div.aigis-debug.item Item 2 div.aigis-debug.item Item 3 ``` You can control the sizing of the items with `-grow`, `-shrink`, `-no-grow`, `-no-shrink`. ```jade div.flex-layout.-row div.aigis-debug.item.-no-shrink img(src="http://via.placeholder.com/350x80") div.aigis-debug.item.-no-grow Item 2 div.aigis-debug.item Item 3 ``` # Distribution of items Use `-[v/h]-space-around` & `-[v/h]-space-between` to distribute the items in the flex container. ```jade div.flex-layout.-h-space-around div.aigis-debug Item 1 div.aigis-debug Item 2 div.aigis-debug Item 3 ``` ```jade div.flex-layout.-h-space-between div.aigis-debug Item 1 div.aigis-debug Item 2 div.aigis-debug Item 3 ``` ```jade div(style="height: 200px").flex-layout.-v-space-around.-wrap div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div(style="height: 200px").flex-layout.-v-space-between.-wrap div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` # Alignment of multiline items with wrap If you have alot on items that wrap you can align the multilines with the following variants: ```jade div.flex-layout.-wrap.-h-center div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div.flex-layout.-wrap.-left div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div.flex-layout.-wrap.-right div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div(style="height: 200px").flex-layout.-wrap.-v-center div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div(style="height: 200px").flex-layout.-wrap.-top div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` ```jade div(style="height: 200px").flex-layout.-wrap.-bottom div.aigis-debug Item longer 1 div.aigis-debug Item longer 2 div.aigis-debug Item longer 3 div.aigis-debug Item longer 4 div.aigis-debug Item longer 5 div.aigis-debug Item longer 6 div.aigis-debug Item longer 7 div.aigis-debug Item longer 8 div.aigis-debug Item longer 9 ``` */ .flex-layout{display:flex}.flex-layout.-inline{display:flex-inline}.flex-layout.-wrap{flex-wrap:wrap}.flex-layout.-row{flex-wrap:nowrap}.flex-layout.-row > .item{flex:1 1 auto}.flex-layout.-column{flex-direction:column}.flex-layout.-center{justify-content:center;align-items:center;align-content:center}.flex-layout.-baseline{align-items:baseline}.flex-layout.-left{justify-content:flex-start}.flex-layout.-right{justify-content:flex-end}.flex-layout.-top{align-content:flex-start}.flex-layout.-bottom{align-content:flex-end}.flex-layout.-v-center{align-content:center}.flex-layout.-v-space-between{align-content:space-between}.flex-layout.-v-space-around{align-content:space-around}.flex-layout.-h-center{justify-content:center}.flex-layout.-h-space-between{justify-content:space-between}.flex-layout.-h-space-around{justify-content:space-around}.flex-layout.-items-top{align-items:flex-start}.flex-layout.-items-bottom{align-items:flex-end}.flex-layout.-items-center{align-items:center}.flex-layout.-items-stretch{align-items:flex-stretch}.flex-layout > .item.-stretch{align-self:stretch}.flex-layout > .item.-top{align-self:flex-start}.flex-layout > .item.-center{align-self:center}.flex-layout > .item.-bottom{align-self:flex-end}.flex-layout > .item.-content{flex:none}.flex-layout > .item.-grow{flex-grow:1}.flex-layout > .item.-shrink{flex-shrink:1}.flex-layout > .item.-no-grow{flex-grow:0}.flex-layout > .item.-no-shrink{flex-shrink:0}/* --- name: .grid-layout category: Components/.grid-layout tag: - component - layout - grid - responsive - flexbox compile: true --- A grid layout system based on flexbox. It provides sizing variants to size on different percentages. ## Percentage based sizing The easiest use case is to use simple `.item -w1`, `.item -w1-2`, `.item -w1-3`, `.item -w1-4` for a percentage based side-by-side rendering. ```jade div.grid-layout div.item.-w1 div.aigis-debug item -w1 div.item.-w1-2 div.aigis-debug item -w1-2 div.item.-w1-2 div.aigis-debug item -w1-2 div.item.-w1-3 div.aigis-debug item -w1-3 div.item.-w2-3 div.aigis-debug item -w2-3 div.item.-w1-4 div.aigis-debug item -w1-4 div.item.-w1-2 div.aigis-debug item -w1-2 div.item.-w1-4 div.aigis-debug item -w1-4 ``` ## Layouts on different devices The breakpoints for different screen sizes are specified in the global settings `theme.settings.breakpoints` and can be overwritten in `theme.components.grid-layout.breakpoints`. The default settings define breakpoints with labels: `.-small-X-X`, `.-medium-X-X`, `.-large-X-X`. ```jade div.grid-layout div.item.-w1.-small-1-3.-medium-1-2.-large-1-4 div.aigis-debug item -w1 -small-1-3 -medium-1-2 -large-1-4 div.item.-w1.-small-1-3.-medium-1-2.-large-1-4 div.aigis-debug item -w1 -small-1-3 -medium-1-2 -large-1-4 div.item.-w1-2.-small-1-3.-medium-1-2.-large-1-4 div.aigis-debug item -w1-2 -small-1-3 -medium-1-2 -large-1-4 div.item.-w1-2.-small-1.-medium-1-2.-large-1-4 div.aigis-debug item -w1-2 -small-1 -medium-1-2 -large-1-4 ``` ## Gutter If you need a spacing between the columns add the `-gutter` variant. The size of the gutter is specified in the `grid-gutter`variable. ```jade div.grid-layout.-gutter div.item.-w1-4 div.aigis-debug col -w1-4 div.item.-w1-4 div.aigis-debug col -w1-4 div.item.-w1-2 div.aigis-debug col -w1-2 ``` ## Reverse order To reverse the order in which the columns are displayed, you can add the modifier class `.-reverse` to your table-grid. The columns will be in DOM order when viewport switches to small layout. ```jade div.grid-layout.-reverse div.item.-w1-4 div.aigis-debug First column in DOM div.item.-w1-4 div.aigis-debug Second column in DOM div.item.-w1-4 div.aigis-debug Third column in DOM div.item.-w1-4 div.aigis-debug Fourth column in DOM ``` ## Vertical centering You can vertical center with the help of the `flex-layout` component. ```jade div.grid-layout.flex-layout div.item.-w1-4 div.aigis-debug A column with a lot of content that should wrap on fixed size. div.item.-bottom div.aigis-debug bottom div.item.-center div.aigis-debug center div.item.-stretch div.aigis-debug(style="height:100%") stretch ``` */ .grid-layout{display:flex;flex-wrap:wrap}.grid-layout.-gutter{margin:-.625rem -.9375rem}.grid-layout.-gutter > .item{padding:.625rem .9375rem}.grid-layout.-reverse{flex-direction:row-reverse}.grid-layout > .item.-w1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-w1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-w1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-w2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-w1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-w3-4{flex:0 0 75%;max-width:75%}@media all and (min-width:31.25rem){.grid-layout > .item.-small-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-small-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-small-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-small-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-small-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-small-3-4{flex:0 0 75%;max-width:75%}}@media all and (min-width:47.9375rem){.grid-layout > .item.-medium-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-medium-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-medium-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-medium-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-medium-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-medium-3-4{flex:0 0 75%;max-width:75%}}@media all and (min-width:75rem){.grid-layout > .item.-large-1{flex:0 0 100%;max-width:100%}.grid-layout > .item.-large-1-2{flex:0 0 50%;max-width:50%}.grid-layout > .item.-large-1-3{flex:0 0 33.333333333333336%;max-width:33.333333333333336%}.grid-layout > .item.-large-2-3{flex:0 0 66.66666666666667%;max-width:66.66666666666667%}.grid-layout > .item.-large-1-4{flex:0 0 25%;max-width:25%}.grid-layout > .item.-large-3-4{flex:0 0 75%;max-width:75%}}/* --- name: .image-responsive category: Components/.image-responsive tag: - component - responsive - image - media compile: true --- This class makes the image scaling to its max width. ```jade img.image-responsive(src='http://www.byui.edu/images/agriculture-life-sciences/flower.jpg') ``` ## Variants `.-full` forces the picture to span to 100% of the parent ```jade img.image-responsive.-full(src='http://www.byui.edu/images/agriculture-life-sciences/flower.jpg') ``` */ .image-responsive{max-width:100%;height:auto;display:block}.image-responsive.-full{width:100%}.image-responsive.-inset{max-height:100%}/* --- name: .max-width-layout category: Components/.max-width-layout tag: - component - layout - responsive compile: true --- This component will limit its content to a maximum width. Forthermore it can center its content. Usefull for page content that should not span the full width. ## Percentage based sizing */ @media all and (min-width:31.25rem){.max-width-layout{max-width:41.75rem}}@media all and (min-width:47.9375rem){.max-width-layout{max-width:55.75rem}}@media all and (min-width:75rem){.max-width-layout{max-width:68.75rem}}.max-width-layout.-center{margin-left:auto;margin-right:auto}/* --- name: .media-responsive category: Components/.media-responsive tag: - responsive - media compile: true --- `.media-responsive` - This makes a the `.media-responsive` div a container for any media element (iframe, video, ... ) that responsive scales with a fix ratio. The media element ( child ) needs the class `.media` to fully fill out the parents size. The `.media-responsive` component has to predefined modifiers: `.-media-4-3`, `.-media-16-9` that define a fix ratio. ```jade div.media-responsive.-media-16-9 iframe.media(src="https://www.youtube.com/embed/TCd6PfxOy0Y") ``` ```jade div.media-responsive.-media-4-3 iframe.media(src="https://www.youtube.com/embed/TCd6PfxOy0Y") ``` */ .media-responsive{width:100%;position:relative;padding-bottom:50%}.media-responsive.-media-1-1{padding-bottom:50%}.media-responsive.-media-4-3{padding-bottom:75%}.media-responsive.-media-16-9{padding-bottom:56.25%}.media-responsive > .media{position:absolute;top:0;left:0;width:100%;height:100%}/* --- name: .overflow-text category: Components/.overflow-text tag: - component - text compile: true --- This component cuts the text on a given height and adds a fadeout effect. This is usefull for text containers that have more content than space. ```jade div.overflow-text(style="width: 200px;height: 70px") This is a very long text that is rwaped and cut at the end. ``` */ .overflow-text{overflow:hidden;position:relative}.overflow-text:after{content:"";position:absolute;bottom:0;right:0;left:0;height:2.1875rem;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 70%)}/* --- name: .shadow-box category: Components/.shadow-box tag: - component - shadow compile: true --- A box to control box-shadows with different variants ## Default variants ```jade div.shadow-box Demo content div.shadow-box.-inset Demo content div.shadow-box.-zero Use zero shadow in animations ``` */ .shadow-box{box-shadow:0 1px 6px 0 rgba(0,0,0,0.17)}.shadow-box.-inset{box-shadow:inset 0 1px 6px 0 rgba(0,0,0,0.17)}.shadow-box.-zero{box-shadow:inset 0 0 0 0 rgba(0,0,0,0.17)}/* --- name: .spacer-box category: Components/.spacer-box tag: - component - layout - box-model compile: true --- This component is used to control spacing of a box. It mainly sets the margin and padding with a fixed set of configuration values. The default space sizes are: ``` xxs: 2 xs: 4 s: 8 default: 16 l: 32 xl: 64` ``` To control the padding/margin for a specific space you can use the following variants: ``` -{kind}-{side}-{space} -{kind}-{axis}-{space} -{kind}-{space} kind: m | p side: top | right | bottom | left space: xxs | xs | s | l | xl axis: v | h ``` Or to use the `default` padding space you can use the following shortcuts: ``` -{kind}-{side} -{kind}-{axis} -{kind} kind: m | p side: top | right | bottom | left axis: v | h ``` ## Examples Here are some example that show the usage with specific space sizes. ```jade div.spacer-box.-m-s div.aigis-debug Apply s margin on all sides ``` ```jade div.spacer-box.-p-v-xl div.aigis-debug Apply xl padding on vertical sides ``` ```jade div.spacer-box.-p-top-l div.aigis-debug Apply l padding on top side ``` Here are some examples that show the usage with default space size. ```jade div.spacer-box.-p div.aigis-debug Apply default padding on all sides ``` ```jade div.spacer-box.-m-h div.aigis-debug Apply default margin on horizontal axis ``` ```jade div.spacer-box.-m-bottom div.aigis-debug Apply default margin on bottom side ``` ## Auto margin For setting the vertical margin to auto the `.-auto` variant can be used. ```jade div.spacer-box.-auto(style="width: 200px") div.aigis-debug Apply margin auto to left and right ``` */ .spacer-box.-m-top-xxs{margin-top:.125rem}.spacer-box.-p-top-xxs{padding-top:.125rem}.spacer-box.-m-right-xxs{margin-right:.125rem}.spacer-box.-p-right-xxs{padding-right:.125rem}.spacer-box.-m-bottom-xxs{margin-bottom:.125rem}.spacer-box.-p-bottom-xxs{padding-bottom:.125rem}.spacer-box.-m-left-xxs{margin-left:.125rem}.spacer-box.-p-left-xxs{padding-left:.125rem}.spacer-box.-m-h-xxs{margin-left:.125rem;margin-right:.125rem}.spacer-box.-m-v-xxs{margin-top:.125rem;margin-bottom:.125rem}.spacer-box.-m-xxs{margin:.125rem .125rem}.spacer-box.-p-h-xxs{padding-left:.125rem;padding-right:.125rem}.spacer-box.-p-v-xxs{padding-top:.125rem;padding-bottom:.125rem}.spacer-box.-p-xxs{padding:.125rem .125rem}.spacer-box.-m-top-xs{margin-top:.25rem}.spacer-box.-p-top-xs{padding-top:.25rem}.spacer-box.-m-right-xs{margin-right:.25rem}.spacer-box.-p-right-xs{padding-right:.25rem}.spacer-box.-m-bottom-xs{margin-bottom:.25rem}.spacer-box.-p-bottom-xs{padding-bottom:.25rem}.spacer-box.-m-left-xs{margin-left:.25rem}.spacer-box.-p-left-xs{padding-left:.25rem}.spacer-box.-m-h-xs{margin-left:.25rem;margin-right:.25rem}.spacer-box.-m-v-xs{margin-top:.25rem;margin-bottom:.25rem}.spacer-box.-m-xs{margin:.25rem .25rem}.spacer-box.-p-h-xs{padding-left:.25rem;padding-right:.25rem}.spacer-box.-p-v-xs{padding-top:.25rem;padding-bottom:.25rem}.spacer-box.-p-xs{padding:.25rem .25rem}.spacer-box.-m-top-s{margin-top:.5rem}.spacer-box.-p-top-s{padding-top:.5rem}.spacer-box.-m-right-s{margin-right:.5rem}.spacer-box.-p-right-s{padding-right:.5rem}.spacer-box.-m-bottom-s{margin-bottom:.5rem}.spacer-box.-p-bottom-s{padding-bottom:.5rem}.spacer-box.-m-left-s{margin-left:.5rem}.spacer-box.-p-left-s{padding-left:.5rem}.spacer-box.-m-h-s{margin-left:.5rem;margin-right:.5rem}.spacer-box.-m-v-s{margin-top:.5rem;margin-bottom:.5rem}.spacer-box.-m-s{margin:.5rem .5rem}.spacer-box.-p-h-s{padding-left:.5rem;padding-right:.5rem}.spacer-box.-p-v-s{padding-top:.5rem;padding-bottom:.5rem}.spacer-box.-p-s{padding:.5rem .5rem}.spacer-box.-m-top{margin-top:1rem}.spacer-box.-p-top{padding-top:1rem}.spacer-box.-m-right{margin-right:1rem}.spacer-box.-p-right{padding-right:1rem}.spacer-box.-m-bottom{margin-bottom:1rem}.spacer-box.-p-bottom{padding-bottom:1rem}.spacer-box.-m-left{margin-left:1rem}.spacer-box.-p-left{padding-left:1rem}.spacer-box.-m-h{margin-left:1rem;margin-right:1rem}.spacer-box.-m-v{margin-top:1rem;margin-bottom:1rem}.spacer-box.-m{margin:1rem 1rem}.spacer-box.-p-h{padding-left:1rem;padding-right:1rem}.spacer-box.-p-v{padding-top:1rem;padding-bottom:1rem}.spacer-box.-p{padding:1rem 1rem}.spacer-box.-m-top-l{margin-top:1.5rem}.spacer-box.-p-top-l{padding-top:1.5rem}.spacer-box.-m-right-l{margin-right:1.5rem}.spacer-box.-p-right-l{padding-right:1.5rem}.spacer-box.-m-bottom-l{margin-bottom:1.5rem}.spacer-box.-p-bottom-l{padding-bottom:1.5rem}.spacer-box.-m-left-l{margin-left:1.5rem}.spacer-box.-p-left-l{padding-left:1.5rem}.spacer-box.-m-h-l{margin-left:1.5rem;margin-right:1.5rem}.spacer-box.-m-v-l{margin-top:1.5rem;margin-bottom:1.5rem}.spacer-box.-m-l{margin:1.5rem 1.5rem}.spacer-box.-p-h-l{padding-left:1.5rem;padding-right:1.5rem}.spacer-box.-p-v-l{padding-top:1.5rem;padding-bottom:1.5rem}.spacer-box.-p-l{padding:1.5rem 1.5rem}.spacer-box.-m-top-xl{margin-top:2rem}.spacer-box.-p-top-xl{padding-top:2rem}.spacer-box.-m-right-xl{margin-right:2rem}.spacer-box.-p-right-xl{padding-right:2rem}.spacer-box.-m-bottom-xl{margin-bottom:2rem}.spacer-box.-p-bottom-xl{padding-bottom:2rem}.spacer-box.-m-left-xl{margin-left:2rem}.spacer-box.-p-left-xl{padding-left:2rem}.spacer-box.-m-h-xl{margin-left:2rem;margin-right:2rem}.spacer-box.-m-v-xl{margin-top:2rem;margin-bottom:2rem}.spacer-box.-m-xl{margin:2rem 2rem}.spacer-box.-p-h-xl{padding-left:2rem;padding-right:2rem}.spacer-box.-p-v-xl{padding-top:2rem;padding-bottom:2rem}.spacer-box.-p-xl{padding:2rem 2rem}.spacer-box.-m-top-xxl{margin-top:3rem}.spacer-box.-p-top-xxl{padding-top:3rem}.spacer-box.-m-right-xxl{margin-right:3rem}.spacer-box.-p-right-xxl{padding-right:3rem}.spacer-box.-m-bottom-xxl{margin-bottom:3rem}.spacer-box.-p-bottom-xxl{padding-bottom:3rem}.spacer-box.-m-left-xxl{margin-left:3rem}.spacer-box.-p-left-xxl{padding-left:3rem}.spacer-box.-m-h-xxl{margin-left:3rem;margin-right:3rem}.spacer-box.-m-v-xxl{margin-top:3rem;margin-bottom:3rem}.spacer-box.-m-xxl{margin:3rem 3rem}.spacer-box.-p-h-xxl{padding-left:3rem;padding-right:3rem}.spacer-box.-p-v-xxl{padding-top:3rem;padding-bottom:3rem}.spacer-box.-p-xxl{padding:3rem 3rem}.spacer-box.-m-top-xxxl{margin-top:4rem}.spacer-box.-p-top-xxxl{padding-top:4rem}.spacer-box.-m-right-xxxl{margin-right:4rem}.spacer-box.-p-right-xxxl{padding-right:4rem}.spacer-box.-m-bottom-xxxl{margin-bottom:4rem}.spacer-box.-p-bottom-xxxl{padding-bottom:4rem}.spacer-box.-m-left-xxxl{margin-left:4rem}.spacer-box.-p-left-xxxl{padding-left:4rem}.spacer-box.-m-h-xxxl{margin-left:4rem;margin-right:4rem}.spacer-box.-m-v-xxxl{margin-top:4rem;margin-bottom:4rem}.spacer-box.-m-xxxl{margin:4rem 4rem}.spacer-box.-p-h-xxxl{padding-left:4rem;padding-right:4rem}.spacer-box.-p-v-xxxl{padding-top:4rem;padding-bottom:4rem}.spacer-box.-p-xxxl{padding:4rem 4rem}.spacer-box.-m-top-xxxxl{margin-top:8rem}.spacer-box.-p-top-xxxxl{padding-top:8rem}.spacer-box.-m-right-xxxxl{margin-right:8rem}.spacer-box.-p-right-xxxxl{padding-right:8rem}.spacer-box.-m-bottom-xxxxl{margin-bottom:8rem}.spacer-box.-p-bottom-xxxxl{padding-bottom:8rem}.spacer-box.-m-left-xxxxl{margin-left:8rem}.spacer-box.-p-left-xxxxl{padding-left:8rem}.spacer-box.-m-h-xxxxl{margin-left:8rem;margin-right:8rem}.spacer-box.-m-v-xxxxl{margin-top:8rem;margin-bottom:8rem}.spacer-box.-m-xxxxl{margin:8rem 8rem}.spacer-box.-p-h-xxxxl{padding-left:8rem;padding-right:8rem}.spacer-box.-p-v-xxxxl{padding-top:8rem;padding-bottom:8rem}.spacer-box.-p-xxxxl{padding:8rem 8rem}.spacer-box.-auto{margin-left:auto;margin-right:auto}/* --- name: .svg-icon category: Components/.svg-icon template: icons tag: - component - symbol - icon - media - svg compile: true --- Defines common SVG icon/symbol sizes and presentation styles. ## Default The -default variant applies automatically (but can be specified explicitly if desired). ```jade div(style="display: inline-block; border: solid 1px #ccc;") svg.svg-icon use(xlink:href="#stars-icon") div(style="display: inline-block; border: solid 1px #ccc;") svg.svg-icon.-default use(xlink:href="#stars-icon") ``` ## -scale The -span variant will automatically fit (scale & center) the SVG icon into its parent container. ```jade div(style="display:inline-block; border: solid 1px #ccc; width:50px; height:100px") svg.svg-icon.-scale use(xlink:href="#stars-icon") div(style="display:inline-block; border: solid 1px #ccc; width:200px; height:100px") svg.svg-icon.-scale use(xlink:href="#stars-icon") ``` */ .svg-icon{fill:currentColor;display:block;width:1.5rem;height:1.5rem}.svg-icon.-inline{display:inline-block}.svg-icon.-scale{width:100%;height:100%}/* --- name: .text-style category: Components/.text-style tag: - component - text compile: true --- A text styling component for different text styles ## Default heading ```jade div.text-style Default heading ``` ## H1 ```jade div.text-style.-h1 The h1 header ``` ## H2 ```jade div.text-style.-h2 The h2 header ``` ## H3 ```jade div.text-style.-h3 The h3 header ``` ## Bold ```jade div.text-style.-bold Bold text ``` ## Align center ```jade div.text-style.-center Centered text ``` ## Align right ```jade div.text-style.-right Right aligned text ``` */ .text-style.-big{font-family:EuclidCircularB-Bold-WebS;font-size:70px;line-height:86px}.text-style.-h1{font-family:EuclidCircularB-Bold-WebS;font-size:58px;line-height:76px}.text-style.-h2{font-family:EuclidCircularB-Bold-WebS;font-size:36px;line-height:48px}.text-style.-h3{font-family:EuclidCircularB-Bold-WebS;font-size:26px;line-height:36px}.text-style.-h4{font-family:EuclidCircularB-Bold-WebS;font-size:20px;line-height:30px}.text-style.-h5{font-family:EuclidCircularB-Bold-WebS;font-size:15px;line-height:20px}.text-style.-h6{font-family:EuclidCircularB-Medium-WebS;font-size:14px;line-height:18px}.text-style.-para{font-family:EuclidCircularB-Medium-WebS;font-size:20px;line-height:30px}.text-style.-p-big{font-family:EuclidCircularB-Medium-WebS;font-size:30px;line-height:42px}.text-style.-small{font-size:15px;line-height:24px}.text-style.-caption{font-family:EuclidCircularB-Regular-WebS;font-size:15px;line-height:21px}.text-style.-button{font-size:15px;line-height:20px}.text-style.-medium{font-family:EuclidCircularB-Medium-WebS}.text-style.-center{text-align:center}.text-style.-right{text-align:right}.text-style.-wide{letter-spacing:2.5px}.text-style.-black-1{color:#232323}.text-style.-primary-pink{color:#e67699}.text-style.-grey-2{color:#e1e1e1}.text-style.-white{color:#fff}.text-style.-secondary-green{color:#2ea861}.text-style.-a{text-decoration:underline}.text-style.-list{font-family:EuclidCircularB-Medium-WebS;font-size:20px;line-height:30px}.text-style.-b{font-family:EuclidCircularB-Bold-WebS;font-size:20px;line-height:30px}.text-style.-b600{font-weight:600}.text-style.-i{font-style:italic}.text-style.-kg-heading-1{font-family:kg_happy_solidregular;font-size:50px;line-height:68px;letter-spacing:-1px}/* --- name: .transform-box category: Components/.transform-box tag: - component - transform - box-model compile: true --- A box to control common transformations ## Rotate ```jade div.transform-box.-rot90 Some demo content div.transform-box.-rot180 Some demo content div.transform-box.-rot270 Some demo content ``` ## Flip ```jade div.transform-box.-flipX Some demo content div.transform-box.-flipY Some demo content ``` */ .transform-box.-rot90{transform:rotate(90deg)}.transform-box.-rot180{transform:rotate(180deg)}.transform-box.-rot270{transform:rotate(270deg)}.transform-box.-flipX{transform:scaleX(-1)}.transform-box.-flipY{transform:scaleY(-1)}/* --- name: .transition-box category: Components/.transition-box tag: - component - transition - box-model compile: true --- A box to control transition on divs ## Enable all transitions ```jade div.transition-box.-all All transitions enabled ``` ## Control the speed of the transition ```jade div.transition-box.-all.-slow Apply the slow duration variant div.transition-box.-all.-fast Apply the fast duration variant ``` */ .transition-box{transition-duration:.3s;transition-property:all}.transition-box.-slow{transition-duration:.6s}.transition-box.-fast{transition-duration:.15s}.carousel-box{position:relative}.carousel-box > .content{overflow:hidden;position:relative}.carousel-box > .dots{position:absolute;width:100%;bottom:-2rem;z-index:3}.carousel-box > .dots > div > .dot{background-color:#000;height:.625rem;width:.625rem;border-radius:50%;margin:0 .1875rem;cursor:pointer}.carousel-box > .dots > div > .dot.-active,.carousel-box > .dots > div > .dot:hover{background-color:#808080}.carousel-box > .nav{position:absolute;cursor:pointer;background-color:#fff;top:50%;z-index:3}.carousel-box > .nav.-left{left:0}.carousel-box > .nav.-left:hover{opacity:1}.carousel-box > .nav.-right{right:0}.carousel-box > .nav.-right:hover{opacity:1}.crossfade-box{transition:height .4s}.crossfade-box > .front{position:absolute;width:100%;transition:opacity 0s;z-index:2}.crossfade-box > .front.-do-transition{transition:opacity .4s;opacity:0}.crossfade-box > .back{position:absolute;width:100%;z-index:-1}/* --- name: DropDown category: UI/DropDown tag: - component - dropdown compile: true --- A dropdown list to select one option out of many in the list. ## Example ```jade div(view='DropDown',items='[[ [ { "label":"option 1", "value":1 }, { "label":"option 2", "value":2 }, { "label":"option 3", "value":3 } ] ]]') ``` */ .drop-down:not(.-open ) > .list{display:none}.drop-down.-float{position:relative}.drop-down.-float > .list{position:absolute;z-index:1000}.drop-down.-float > .list.-v-t-l{bottom:100%}.drop-down.-float > .list.-v-t-r{right:0;bottom:100%}.drop-down.-float > .list.-h-t-r{right:0;bottom:100%;transform:translate(100%,100%)}.drop-down.-float > .list.-h-b-r{right:0;bottom:0;transform:translate(100%,0%)}.drop-down.-float > .list.-v-b-r{right:0}.drop-down.-float > .list.-h-t-l{top:0;transform:translate(-100%,0)}.drop-down.-float > .list.-h-b-l{bottom:0;transform:translate(-100%,0)}.about-box{background-color:#f7c809}.about-box .description a{text-decoration:underline}.about-box .link-list .link-item:first-child{border-top:3px solid #232323}.about-box .link-list .link-item{border-bottom:3px solid #232323}.about-box .link-list .link-item .icon{width:32px;height:32px}.about-box .icon{width:44px;height:44px;color:#232323}.about-box .icon:hover{color:#e67699}.about-box .icon.-website{width:24px;height:25px}.additional-song-component .header{border:3px solid #232323;border-radius:2px;background-color:#f7c809;transition:background-color 300ms linear}.additional-song-component .header:hover{cursor:pointer}.additional-song-component .header .toggle .icon{width:14px;height:9px;transform:rotate(0deg);transition:transform 300ms linear}.additional-song-component .container{overflow:hidden;max-height:0;transition:max-height 300ms linear;background-color:#232323}.additional-song-component .container .download-item:hover{color:#e67699}.additional-song-component .container .download-item:hover .text-style.-white,.additional-song-component .container .download-item:hover .text-style.-grey-2{color:#e67699}.additional-song-component .container .link-item .icon{color:#fff;width:44px;height:44px}.additional-song-component .container .link-item .icon:hover{color:#e67699;cursor:pointer}.additional-song-component .container .line{border-top:1px dashed #fff}.additional-song-component.-opened .header{background-color:#fff;transition:background-color 300ms linear}.additional-song-component.-opened .header .toggle .icon{transform:rotate(180deg);transition:transform 300ms linear}.additional-song-component.-opened .container{overflow:hidden;transition:max-height 300ms linear;height:auto;max-height:1000px}.audio-player-element{z-index:10}.audio-player-element .audio-item{border-top:3px solid #fff}.audio-player-element .audio-item:last-child{border-bottom:3px solid #fff}.audio-player-element .audio-item .icon{color:#e67699;width:32px;height:32px}.audio-player-element .audio-item .icon:hover{cursor:pointer}.audio-player-element .audio-item .icon._hidden{display:none}.audio-player-element .audio-item .progressbar-container{cursor:pointer}.audio-player-element .audio-item .progressbar-container .progressbar .range{width:100%;width:100px;-webkit-appearance:none;width:100%;height:3px;border-radius:2px;background-color:rgba(255,255,255,0.4);outline:none}.audio-player-element .audio-item .progressbar-container .progressbar .range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:15px;height:15px;border-radius:50%;background:#e67699;cursor:pointer}.audio-player-element .audio-item .progressbar-container .progressbar .range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#e67699;cursor:pointer}@media all and (max-width:31.25rem){.audio-player-element .progressbar,.audio-player-element .progresstext{display:none}}.background-block{border-top:3px solid #232323}.button-style{display:inline-block}.button-style.-primary{color:#fff;font-size:15px;font-family:EuclidCircularB-Bold-WebS;line-height:20px;padding:12px 16px;display:inline-block;border-radius:24px;letter-spacing:0}.button-style.-primary .icon{margin-right:8px}.button-style.-primary.-big{font-size:20px;line-height:1.5;padding:15px 19px}.button-style.-primary.-round{border-radius:16px;height:32px}.button-style.-primary.-round .cross{width:14px;height:14px}.button-style.-primary.-inverted{background-color:#fff;color:#e67699;border:3px solid #e67699;line-height:17px}.button-style.-primary.-pink{background-color:#e67699}.button-style.-primary.-black{background-color:#232323}.button-style.-primary.-transparent{border:3px solid #232323;color:#232323}.button-style.-primary.-full{display:block;width:100%}.button-style.-primary:hover{filter:brightness(120%)}.button-style.-secondary{border:3px solid;font-family:EuclidCircularB-Bold-WebS;font-size:20px;line-height:1.5;letter-spacing:0;padding:12px 16px}.button-style.-secondary.-pink{color:#e67699;border-color:#e67699}.button-style.-secondary.-pink:hover{background-color:#e67699;color:#fff}.button-style.-secondary.-black-1{border-color:#232323;color:#232323}.button-style.-secondary.-black-1:hover{background-color:#232323;color:#fff}.button-style.-secondary.-blue{border-color:#31b2c0;color:#31b2c0}.button-style.-secondary.-blue >.svg-icon{color:#31b2c0;width:16px;height:16px;padding:2px}.button-style.-secondary.-blue:hover{background-color:#31b2c0;color:#fff}.button-style.-secondary.-blue:hover >.svg-icon{color:#fff}.button-style.-icon{display:flex;align-items:center}.button-style.-icon >.svg-icon{color:currentColor;margin-right:8px}.button-style.-dropdown{border:3px solid #fff;border-radius:2px}.carousel-box{height:540px;background-color:#e1e1e1;background-size:cover}.carousel-box .dots{bottom:20px}.carousel-box .dots div .dot{border-radius:50%;margin:0 .1875rem;cursor:pointer;width:10px;height:10px;background-color:#fff}.carousel-box .dots div .dot:hover{cursor:pointer;background-color:#fff}.carousel-box .dots div .dot.-active{width:16px;height:16px}.carousel-box .dots._hidden,.carousel-box .dots .svg-icon._hidden{display:none}.carousel-box .dots .svg-icon.-play,.carousel-box .dots .svg-icon.-pause{width:36px;height:36px;color:#fff}.carousel-box .dots .svg-icon.-play:hover,.carousel-box .dots .svg-icon.-pause:hover{cursor:pointer;color:#e67699}.carousel-box .slide{height:540px;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:center top;width:100%;height:100%;position:absolute;opacity:0;transition:opacity 2s linear}.carousel-box .slide.-selected{opacity:1;transition:opacity 2s linear}.carousel-box .slide .content{height:412px}.carousel-box .slide .image{margin:auto}.carousel-box .slide >.nav{transform:translate(0%,-50%);position:relative;position:absolute;cursor:pointer;top:50%;z-index:3}.carousel-box .slide >.nav:hover .svg-icon{display:none}.carousel-box .slide >.nav:hover .svg-icon.-hover{display:block}.carousel-box .slide >.nav .svg-icon{width:44px;height:44px}.carousel-box .slide >.nav .svg-icon._hidden{display:none}.carousel-box .slide >.nav .svg-icon.-hover{display:none}.carousel-box .slide >.nav.-left{left:0}.carousel-box .slide >.nav.-right{right:0}.carousel-box .slide >.nav.-right .svg-icon{transform:rotate(180deg)}.carousel-box .slide.-light{color:#232323}.carousel-box .slide.-dark{color:#fff}.carousel-box .slide.-dark .text-style.-para{color:#e1e1e1}.carousel-box .slide.-dark .button-style.-secondary.-black-1{color:#fff;border-color:#fff}.carousel-box .slide.-dark .button-style.-secondary.-black-1:hover{background-color:#fff;color:#232323}.carousel-box .slide.-dark .newsleter .input{border-bottom:3px solid #fff}@media all and (max-width:47.9375rem){.carousel-box{display:none}}.code-input .input{width:100%;height:44px;border-radius:2px;border:3px solid #232323}.code-input .error{color:#f7c809}.container-page{display:flex;min-height:100vh;flex-direction:column}.container-page .main-content{flex:1}.content-block{border-top:3px solid #232323}.content-block .image-responsive{margin:auto}.content-block .input{border-radius:2px;border:2px solid #232323;height:44px;padding:0 16px;font-family:EuclidCircularB-Medium-WebS;font-size:20px;font-weight:500;line-height:1.5;letter-spacing:normal}.download-container.-single .tabs .tab{cursor:auto}.download-container .tabs{background-color:#232323;border:3px solid #fff}.download-container .tabs .tab{cursor:pointer}.download-container .tabs .tab.-selected{background-color:#fff;color:#2e2e2e}.download-container .tabs .tab.-left{border-top-left-radius:2px}.download-container .tabs .tab.-right{border-top-right-radius:2px}.download-container .tabs .tab.-links{border-left:3px solid #fff}.download-container .tabs .tab.-media{border-right:3px solid #fff}.download-container .tabs .tab .mobile{display:none}.download-container .content{background-color:#2e2e2e}.download-container .content .element:last-child{padding-bottom:10px}.download-container .download-item{color:#fff}.download-container .download-item:hover{cursor:pointer;color:#e67699}.download-container .download-item:hover .text-style.-white,.download-container .download-item:hover .text-style.-grey-2{color:#e67699}.download-container .text-item a,.download-container .download-item a{text-decoration:underline}.download-container .text-item .svg-icon,.download-container .download-item .svg-icon{min-width:24px;min-height:24px}.download-container .text-item .line,.download-container .download-item .line{border-top:1px dashed #fff}@media all and (max-width:47.9375rem){.download-container .tabs .tab .mobile{display:block}.download-container .tabs .tab .desktop{display:none}}.drop-down{display:inline-block;position:relative}.drop-down .list{position:absolute}.drop-down .list .item{cursor:pointer}.drop-down .list .item:hover{color:#e67699}.element-layout{max-width:1140px;margin:0 auto;padding:0 16px}.element-layout.-extended{max-width:1500px;padding:0 0}.element-layout.-full{max-width:100%;padding:0 0;margin:0}.element-layout.-medium{max-width:700px}.external-script .mauticform-message{color:#e67699;font-family:EuclidCircularB-Medium-WebS;font-size:30px;line-height:42px;margin-bottom:12px}.external-script label{width:150px;display:inline-block;margin-bottom:12px}.external-script input{width:300px}.external-script .mauticform-row.mauticform-checkboxgrp.mauticform-field-6 label,.external-script .mauticform-checkboxgrp-row label{display:inline;width:auto}.external-script .mauticform-checkboxgrp-row input{width:auto}.external-script .mauticform-checkboxgrp-row{margin-top:12px;margin-bottom:12px}.external-script button{margin-top:12px}.footer-component{position:relative;background-color:#232323;z-index:6;border-top:3px solid #fff}.footer-component .bird-container .bird{width:150px;height:136px}.footer-component a:hover{color:#e67699}@media all and (max-width:47.9375rem){.footer-component .bird-container .bird{width:259px;height:70px}}@media all and (max-width:31.25rem){.footer-component .bird-container .bird{width:100px;height:100px}}.handbook-quarter-card{border-radius:24px;background-color:#af95c5;box-shadow:0 1.575px 12.597px 0 rgba(0,0,0,0.05)}.handbook-quarter-card .image{width:220px;height:205px;border-radius:24px}.header-component{position:sticky;top:0;background-color:#232323;box-shadow:inset 0 -3px 0 0 #3d3d3d;z-index:30;width:100%}.header-component.-mobile-open{z-index:20}.header-component .separator{height:44px;width:2px;border-left:2px solid #fff;display:inline-block}.header-component .profilenavigation{display:inline-block;width:44px;height:44px}.header-component .profilenavigation:hover{cursor:pointer}.header-component .library .svg-icon{display:inline-block}.header-component .placeholder{border-right:3px solid #fff}.header-component .logo{width:95px;height:44px}.header-component .navi.-mobile{display:none}.header-component .hamburger-navigation{display:none}.header-component .navi.-selected,.header-component .navi:hover{color:#e67699}@media all and (max-width:900px){.header-component .placeholder{border-right:0}.header-component >.logo{width:95px;height:44px}.header-component .hamburger{cursor:pointer}.header-component .hamburger-navigation.-open{display:block;position:fixed;top:0;bottom:0;right:0;width:100%;background-color:rgba(0,0,0,0.7);overflow-y:auto}.header-component .hamburger-navigation.-open .container{background-color:#232323;position:absolute;top:0;bottom:0;right:0;width:85%;z-index:30}.header-component .hamburger-navigation.-open .placeholder{width:24px;height:3px;background-color:#fff}.header-component .hamburger-navigation.-open .close .svg-icon{cursor:pointer;margin:0 0 0 auto;color:#fff;width:30px;height:30px}.header-component .hamburger-navigation.-open .close .svg-icon:hover{color:#e67699}.header-component .navi.-desktop{display:none}.header-component .navi.-mobile{display:block}}.heart-transparent.-empty{color:#232323;transition:color 1s}.heart-transparent.-empty.-blue{color:#31b2c0}.heart-transparent.-full{color:#e67699;transition:color 1s}.heart-transparent.-full.-animate{animation:animate-full 1s ease}@keyframes animate-full{0%{transform:scale(1)}50%{transform:scale(1.5)}100%{transform:scale(1)}}._hidden{display:none !important}@media all and (max-width:31.25rem){.desktop-only{display:none}}.html-component .text-style.-h3{margin-top:32px;margin-bottom:24px}.html-component .text-style.-h4{margin-top:24px;margin-bottom:16px}.html-component .text-style.-para{margin-top:16px;margin-bottom:16px}.html-component .text-style.-list{margin-top:16px;margin-bottom:16px}@media all and (max-width:47.9375rem){.html-component .text-style.-h3{margin-top:32px;margin-bottom:16px}.html-component .text-style.-h4{margin-top:16px;margin-bottom:16px}}@media all and (max-width:31.25rem){.html-component .text-style.-h3{margin-top:24px;margin-bottom:16px}}.ie11-error{background:url("/image/mb-background.svg") no-repeat center center fixed;background-repeat:no-repeat;background-position:center;background-size:cover;position:relative;min-height:100vh}.ie11-error .container{background-color:#fff;width:90%;margin:64px auto;padding:16px}.library-navigation .tab{height:50px;cursor:pointer}.library-navigation .tab.-selected.songs{border-bottom:6px solid #e67699}.library-navigation .tab.-selected.tutorials{border-bottom:6px solid #31b2c0}.library-navigation .tab.-selected.favorites{border-bottom:6px solid #fff}.library-news .strip-component{position:absolute;transform:translate(-8px,-8px)}.library-preview{position:relative;z-index:5;padding-top:80px;background-image:url("/image/notes.svg");background-repeat:no-repeat;background-position:50% 11px;background-size:142px 193px}.library-preview .title,.library-preview .description,.library-preview .button{position:relative;z-index:5}.library-preview .element{animation:wiggle 5s ease-in-out infinite}@keyframes wiggle{0%{transform:translate(0,0)}50%{transform:translate(10px,-10px)}100%{transform:translate(0,0)}}@media all and (max-width:47.9375rem){.library-preview{background-size:154px 114px}}@media all and (max-width:31.25rem){.library-preview{background-size:121px 90px}}.license-element{position:relative;z-index:10;background-color:#d8d8d8}.license-element .svg-icon.guitar{position:absolute;left:40%;top:40px;transform:translate(-50%,0%);width:323px;height:301px;z-index:-1;animation:wiggle 5s infinite}.license-element .button{width:300px}@keyframes wiggle{0%{transform:rotate(0deg)}50%{transform:rotate(5deg)}100%{transform:rotate(0deg)}}@media (max-width:47.9375rem){.license-element .svg-icon.guitar{left:30%}}@media (max-width:31.25rem){.license-element .svg-icon.guitar{width:261px;height:240px}}.list-style.-pipe-separated > :not(:first-child)::before{content:'|'}.logout-box{background-color:#f7c809}.mail-chimp-slide .newsletter{position:relative;width:100%;margin:0 auto}.mail-chimp-slide .newsletter .input{border-bottom:3px solid #000;width:100%;line-height:48px;text-align:center}.mail-chimp-slide .message{background-color:#fff;position:absolute;padding:5px;top:-38px;text-align:center;width:100%}.mail-chimp-slide .message:after{content:'';position:absolute;top:100%;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #fff;border-left:solid 10px transparent;border-right:solid 10px transparent}.mobile-navigation-toggle{display:none}@media all and (max-width:47.9375rem){.mobile-navigation-toggle{cursor:pointer;display:block;position:fixed;bottom:20px;width:64px;height:64px;right:25px;z-index:25}.mobile-navigation-toggle .navi{width:64px;height:64px}.mobile-navigation-toggle.-open{right:40%;transform:translate(50%,0%);transition:.3s right linear}.mobile-navigation-toggle.-open .navi.-open{display:none}.mobile-navigation-toggle.-close{transition:.2s right linear}.mobile-navigation-toggle.-close .navi.-close{display:none}.mobile-navigation-toggle.-close .navi.-open{display:block}}@media all and (max-width:31.25rem){.mobile-navigation-toggle.-open{right:50%}}.modal-element{display:none;position:fixed;top:0;left:0;width:100%;min-height:100vh;height:100vh;z-index:50;overflow-y:scroll}.modal-element.-open{display:block}.modal-element >.close{position:absolute;right:16px;top:16px}.modal-element >.close .svg-icon{width:30px;height:30px;cursor:pointer}.modal-element >.close .svg-icon.-close-hover{display:none}.modal-element >.close:hover .svg-icon.-close-hover{display:block}.modal-element >.close:hover .svg-icon.-close{display:none}.modal-element .page-tutorial.-general{padding-bottom:24px;min-height:100vh}.modal-element .page-tutorial.-general .header-component,.modal-element .page-tutorial.-general .footer-component,.modal-element .page-tutorial.-general .sub-header.-scroll{display:none}.modal-element .page-tutorial.-general .heart-transparent.-empty{color:#31b2c0}.modal-overlay{display:grid;place-items:center;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(34,34,34,0.75);padding:1rem;max-width:100vw;z-index:100}.modal-overlay.-small >.content{width:500px}.modal-overlay >.content{display:grid;gap:1.75rem;grid-template-rows:max-content 1fr max-content;background-color:#fff;border-radius:3px;justify-content:center;position:relative}.modal-overlay >.content >.close{cursor:pointer;position:absolute;right:24px;top:24px;width:32px;height:32px}@media (max-width:47.9375rem){.modal-overlay.-small >.content{width:100%}.modal-overlay.-small >.content >.flex-layout.-center{justify-content:space-between}}.news-banner{position:fixed;bottom:0;left:0;right:0;width:100%;background-color:#f7c809;z-index:10}.news-banner .close{position:absolute;top:10px;right:10px;cursor:pointer}.news-banner .logo .svg-icon{width:109px;height:93px}@media (max-width:47.9375rem){.news-banner{z-index:10}.news-banner .content{margin:0 16px}.news-banner .flex-layout{display:block}.news-banner .logo{display:none}.news-banner .title{margin-top:16px}.news-banner .button .button-style{text-align:center;display:block;margin-top:24px}}.newsletter-element{background-repeat:no-repeat;background-size:cover;background-position:center top;position:relative;z-index:7}.newsletter-element.-light{background-color:#31b2c0;color:#232323}.newsletter-element.-dark{background-color:#232323;color:#fff}.newsletter-element.-dark .text-style.-para{color:#e1e1e1}.newsletter-element.-dark .text .button-style.-secondary{color:#fff;border-color:#fff}.newsletter-element.-dark .text .button-style.-secondary:hover{background-color:#fff;color:#232323}.newsletter-element.-dark .text .newsletter >.input{border-bottom:3px solid #fff}.newsletter-element .text{position:relative}.newsletter-element .text .newsletter{position:relative;width:100%;margin:0 auto}.newsletter-element .text .newsletter .input{border-bottom:3px solid #000;width:100%;line-height:48px;text-align:center}.newsletter-element .text .newsletter .message{background-color:#e67699;position:absolute;padding:5px;top:-48px;text-align:center;width:100%}.newsletter-element .text .newsletter .message._hidden{display:none}.newsletter-element .text .newsletter .message:after{content:'';position:absolute;top:100%;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #e67699;border-left:solid 10px transparent;border-right:solid 10px transparent}@media (max-width:47.9375rem){.newsletter-element .image{margin:0 auto}.newsletter-element .text{text-align:center}.newsletter-element .text .newsletter{max-width:540px;margin:0 auto}}.page-handbook-overview{background-color:#2e0e4d;color:#fff}.page-handbook-overview .handbook-card .image{width:264;height:356px;-o-object-fit:cover;object-fit:cover;border-radius:24px;margin-bottom:16px}.page-handbook{background-color:#2e0e4d;color:#fff}.page-handbook .top .image{width:362px;height:511px;border-radius:32px}.page-landing{background-repeat:no-repeat;background-size:cover;background-position:center;height:100%}.page-landing .header{padding:0 16px}.page-landing .header .logo{height:86px;width:154px;color:#fff}.page-landing .content{margin-bottom:300px}.page-landing .message{background-color:#fff;position:absolute;padding:5px;top:-38px;text-align:center;width:100%}.page-landing .message:after{content:'';position:absolute;top:100%;left:50%;margin-left:-10px;width:0;height:0;border-top:solid 10px #fff;border-left:solid 10px transparent;border-right:solid 10px transparent}.page-landing .footer{width:100%;padding:30px 16px;background-color:#f7c809;position:fixed;bottom:0;left:0;right:0}.page-landing .footer .bird-container{position:relative}.page-landing .footer .bird-container >.bird{position:absolute;top:-150px}.page-landing .footer .newsletter{position:relative}.page-landing .footer .newsletter .input{border-bottom:3px solid #000;width:100%;line-height:48px;text-align:center}@media (max-width:31.25rem){.page-landing{background-position:unset;display:flex;min-height:100vh;flex-direction:column}.page-landing .header,.page-landing .footer{flex-shrink:0}.page-landing .content{flex-grow:1}.page-landing .header .logo{width:155px;height:50px}.page-landing .header.element-layout{padding:16px 0}.page-landing .content{padding:10px 0;margin-bottom:150px}.page-landing .footer{position:relative}.page-landing .footer .bird-container{margin-bottom:24px}.page-landing .strip-component{padding:12px 8px}.page-landing .element-layout{margin:0 0}.page-landing .spacer-box.-p-l{padding:15px}.page-landing .spacer-box.-m-bottom-xl{margin-bottom:24px}.page-landing .spacer-box.-m-bottom-xxxl{margin-bottom:32px}.page-landing .text-style.-h1{font-size:34px;line-height:46px}.page-landing .text-style.-h2{font-size:20px;line-height:30px}.page-landing .text-style.-h3{font-size:18px;line-height:29px}.page-landing .text-style.-h4{font-size:15px;line-height:24px}}.page-library{background-color:#232323;color:#fff}.page-library .library-header{z-index:7;position:relative}.page-library .element{position:relative;z-index:6}.page-library .songs .notes{height:132px;width:98px;margin:0 0 0 auto}@media all and (max-width:47.9375rem){.page-library.-downscrolling .header-component{top:-75px;transition:.3s top linear}.page-library.-downscrolling .sub-header{top:0;transition:.3s top linear}}.page-profile{position:absolute;top:0;left:0;min-height:100vh;width:100%;background-color:#fff}.page-profile .close{cursor:pointer;position:fixed;right:32px;top:32px;width:32px;height:32px}.page-profile .navigation .navi{border-bottom:2px solid #000}.page-profile .checkbox{width:24px;height:24px}.page-profile .code{border:3px solid #4f4f4f;border-radius:2px}.page-shop .color-container{background-color:#31b2c0}.page-shop .footer-component .disclaimer{visibility:hidden}.page-shop .footer-component .phone{display:block}.page-single{background-color:#f1f1f1;color:#000}.page-single .element:last-child{margin-bottom:128px}.page-single >.footer-component{color:#fff}.page-splash{position:fixed;top:0;left:0;right:0;background-color:#232323;z-index:20;height:100%;min-height:100vh;opacity:1;z-index:200;width:100vw}.page-splash .video{position:relative;top:50%;left:50%;transform:translate(-50%,-50%)}.page-splash .video video{width:100%}.page-splash.-close{opacity:0;transition:opacity .8s ease-out}.page-splash.-faded{min-height:0;height:0;top:-2000px}.page-start{color:#fff;background-color:#232323}.page-start.-scrolling .header-component{background-color:#232323;position:fixed;box-shadow:inset 0 -3px 0 0 #3d3d3d}.page-start.-scrolling .header-component .logo{width:95px;height:44px;transition:width .5s,height .5s ease-in}.page-start .header-component{align-items:normal;color:#fff;background-color:transparent;box-shadow:none}.page-start .header-component .logo{width:215px;height:98px;transition:width .5s,height .5s ease-in}.page-start .celebration{position:absolute;right:0}@media all and (max-width:900px){.page-start.-scrolling .header-component .logo{width:95px;height:44px}.page-start .startpage-cover .logo{width:95px;height:44px}}@media all and (max-width:31.25rem){.page-start.-scrolling .header-component .logo{width:95px;height:44px}.page-start .logo{width:95px;height:44px}.page-start .celebration canvas{width:180px}}.page-student{color:#fff}.page-student .logo{height:86px;width:154px;color:#fff;margin-left:46px;margin-top:27px}.page-tutorial.-free-song .video-component .iframely{border:3px solid #f7c809}.page-tutorial.-intro,.page-tutorial.-default{background-color:#232323;color:#fff}.page-tutorial.-intro .video-component,.page-tutorial.-default .video-component{width:66%}.page-tutorial.-intro .video-component .html-component .text-style.-para,.page-tutorial.-default .video-component .html-component .text-style.-para,.page-tutorial.-intro .video-component .html-component .text-style.-list,.page-tutorial.-default .video-component .html-component .text-style.-list{color:#e1e1e1}.page-tutorial.-intro .video-component .iframely,.page-tutorial.-default .video-component .iframely{aspect-ratio:16/9}.page-tutorial.-general{background-color:#31b2c0;color:#232323}.page-tutorial.-general .video-component .html-component .text-style.-para,.page-tutorial.-general .video-component .html-component .text-style.-list{color:#232323}.page-tutorial.-general .video-component .iframely{aspect-ratio:16/9}.page-tutorial.-general .share-container .share-menu{right:0;transform:translate(0%)}.page-tutorial.-general .video-component{width:100%}.page-tutorial.-general .footer-component{color:#fff}.page-tutorial.-general .sub-header{display:none;color:#fff;padding:8px 0}.page-tutorial.-general .sub-header.-scroll{display:block}.page-tutorial.-general .sub-header.-scroll + .element-layout{margin-top:0}.page-tutorial .share-container{position:relative}.page-tutorial .share-container .share-menu{position:absolute;top:60px;transform:translate(-50%,0);background-color:#fff;z-index:100}.page-tutorial .share-container .share-menu .close{cursor:pointer}.page-tutorial .share-container .share-menu .close .svg-icon.-close-hover{display:none}.page-tutorial .share-container .share-menu .close:hover .svg-icon.-close{display:none}.page-tutorial .share-container .share-menu .close:hover .svg-icon.-close-hover{display:block}.page-tutorial .share-container .share-menu .url{white-space:nowrap}.page-tutorial .share-container .share-menu .input{border-radius:2px;border:3px solid #232323;height:44px}.page-tutorial .share-container .share-menu .copy-message{background-color:#2ea861}@media all and (max-width:47.9375rem){.page-tutorial.-downscrolling .header-component{top:-75px;transition:.3s top linear}.page-tutorial.-downscrolling .sub-header{top:0;transition:.3s top linear}.page-tutorial.-intro .video-component,.page-tutorial.-default .video-component{width:100%}.page-tutorial.-general .mobile-navigation-toggle{display:none}.page-tutorial .share-container{display:none}}.pricing-dropdown{border:2px solid #232323}.pricing-dropdown .header{cursor:pointer}.pricing-dropdown .container{display:none}.pricing-dropdown .text-style ol{margin-bottom:0}.pricing-dropdown.-open .container{display:block;background-color:#232323}.pricing-view .color-container{background-color:#31b2c0}.pricing-view .separator{width:100%;border-top:3px solid #232323}.product-box{background-color:#fff;box-shadow:3px 3px 16px 0 rgba(0,2,4,0.2)}.product-box.-single{background-color:#e1e1e1}.product-box .header{background-color:#000}.product-box .image{width:192px;height:120px}.profile-menu{position:relative}.profile-menu .content{border-radius:1px;box-shadow:3px 3px 16px 0 rgba(0,0,0,0.2);position:absolute;top:26px;right:0;width:400px;background-color:#fff}.profile-menu .content .profile{width:103px;height:103px}.profile-menu .content .separator{width:100%;height:3px;background-color:#e1e1e1}.progress-ring{width:32px;height:32px;border-radius:50%;border:3px solid rgba(29,161,242,0.2);border-left-color:3px solid #e67699;background:transparent;animation:rotate 1s linear infinite}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}.related-content{background-color:#31b2c0}.related-content .text-style.-h3{max-width:275px}.related-content .container{position:relative}.related-content .container .text-style.-h3{font-size:20px;line-height:30px}.related-content .container .navi-left,.related-content .container .navi-right{position:absolute;color:#fff;z-index:5;top:53px;cursor:pointer}.related-content .container .navi-left .svg-icon,.related-content .container .navi-right .svg-icon{width:44px;height:44px}.related-content .container .navi-left._hidden,.related-content .container .navi-right._hidden{display:none}.related-content .container .navi-right{right:0}.related-content .container .navi-right .svg-icon{transform:rotate(180deg)}.related-content .container .outer-stage{overflow:hidden}.related-content .container .outer-stage .item{cursor:pointer}.related-content .container .outer-stage .inner-stage{position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;left:0;transition:.4s left ease-out}.related-content .container .outer-stage .inner-stage .tutorial-preview .container{width:275px}.related-content .container .outer-stage .inner-stage .tutorial-preview .container .favorite{position:absolute;top:17px;right:17px}@media all and (max-width:47.9375rem){.related-content .container .text-style.-h3{font-size:18px;line-height:28px}}.separator-component{width:100%;border-bottom:3px solid #3d3d3d}.song-navigation .image{width:96px;min-width:96px}.song-navigation .guest .item .lock{display:none}.song-navigation .guest .item.-selected:hover{cursor:inherit}.song-navigation .guest .item.-selected:hover .image{opacity:1}.song-navigation .guest .item.-disabled{cursor:auto}.song-navigation .guest .item.-disabled:hover{background-color:#232323}.song-navigation .guest .item.-disabled .container{position:relative}.song-navigation .guest .item.-disabled .container .image{opacity:.7}.song-navigation .guest .item.-disabled .container .lock{display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.song-navigation .guest .item.-disabled .container .title{color:#d3d3d3}.song-navigation .tutorial{cursor:pointer;border-bottom:2px solid #808080}.song-navigation .tutorial:hover .container .play{display:block}.song-navigation .tutorial .container{position:relative}.song-navigation .tutorial .container .play{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.song-navigation .tutorial:hover .image{opacity:.7}.song-navigation .tutorial.-selected,.song-navigation .tutorial:hover{background-color:#4f4f4f}@media all and (max-width:47.9375rem){.song-navigation{display:block;position:fixed;top:0;bottom:0;right:-40%;transition:.3s right linear;overflow-y:auto;width:40%;background-color:#232323;box-shadow:6px 6px 21px 0 #000;z-index:20}.song-navigation .tutorial-scroll{display:none}.song-navigation .overlay{background-color:#000;height:100%;position:fixed;z-index:9;opacity:0;right:0%;top:-100vh;left:0}.song-navigation .svg-icon{width:48px;height:48px}.song-navigation .main-title{margin-top:32px;margin-bottom:16px}.song-navigation .container .spacer-box.-m-right{margin:0}.song-navigation .container >.item.flex-layout.-items-center{display:block}.song-navigation .container >.item.flex-layout.-items-center:hover .image{opacity:.7}.song-navigation .container >.item.flex-layout.-items-center .inner .svg-icon{width:24px;height:22px}.song-navigation .container >.item.flex-layout.-items-center >.container{display:block}.song-navigation .container >.item.flex-layout.-items-center >.container .image{width:100%;margin-bottom:10px}.song-navigation .container >.item.flex-layout.-items-center >.container .title.text-style.h4{font-size:13px;line-height:18px}.song-navigation.-open{right:0;transition:.3s right linear}.song-navigation.-open .overlay{opacity:.7;top:0;right:40%;transition:.3s opacity linear,.3s right linear}}@media all and (max-width:31.25rem){.song-navigation{right:-50%;width:50%}.song-navigation .svg-icon{width:24px;height:24px}.song-navigation.-open .overlay{right:50%}}.sp-line{width:100%;height:3px;background-color:#3d3d3d}.sp-paragraph a{text-decoration:underline}.sp-paragraph a:hover{color:#e67699}.sp-paragraph a::after{content:"";background-image:url("/image/icon-link.png");background-size:100% 100%;display:inline-block;height:20px;width:20px;margin-right:5px;position:relative;left:5px;top:3px}.sp-paragraph ul,.sp-paragraph ol{margin-bottom:16px}.sp-paragraph ul:not(:first-child),.sp-paragraph ol:not(:first-child){margin-top:16px}.sp-paragraph ul li,.sp-paragraph ol li{margin-top:0;margin-bottom:0}.sp-paragraph ul + p,.sp-paragraph ol + p{margin-top:16px}.sp-paragraph p + p{margin-top:32px}@media all and (max-width:47.9375rem){.spacer-box.-m-top-xxxxl{margin-top:6rem}.spacer-box.-p-top-xxxxl{padding-top:6rem}.spacer-box.-m-right-xxxxl{margin-right:6rem}.spacer-box.-p-right-xxxxl{padding-right:6rem}.spacer-box.-m-bottom-xxxxl{margin-bottom:6rem}.spacer-box.-p-bottom-xxxxl{padding-bottom:6rem}.spacer-box.-m-left-xxxxl{margin-left:6rem}.spacer-box.-p-left-xxxxl{padding-left:6rem}.spacer-box.-m-h-xxxxl{margin-left:6rem;margin-right:6rem}.spacer-box.-m-v-xxxxl{margin-top:6rem;margin-bottom:6rem}.spacer-box.-m-xxxxl{margin:6rem 6rem}.spacer-box.-p-h-xxxxl{padding-left:6rem;padding-right:6rem}.spacer-box.-p-v-xxxxl{padding-top:6rem;padding-bottom:6rem}.spacer-box.-p-xxxxl{padding:6rem 6rem}}.sponsor-element{border-top:3px solid #232323}.startpage-cover{position:relative;color:#fff;height:100vh}.startpage-cover >.video,.startpage-cover .cover{position:absolute;top:0%;left:0%;width:100%;height:100%;overflow:hidden;opacity:1}.startpage-cover >.video video,.startpage-cover .cover video,.startpage-cover >.video img,.startpage-cover .cover img{height:100vh;width:100vw;-o-object-fit:cover;object-fit:cover}.startpage-cover >.video img,.startpage-cover .cover img{filter:brightness(70%)}.startpage-cover >.video.-fade-in,.startpage-cover .cover.-fade-in{opacity:1;transition:opacity 3s}.startpage-cover >.video.-fade-out,.startpage-cover .cover.-fade-out{opacity:0;transition:opacity 3s}.startpage-cover .overlay-container{position:relative;width:100%;height:100vh}.startpage-cover .overlay-container >.overlay{position:absolute;top:35%;transform:translate(0%,-50%)}.strip-component{display:block;padding:20px 0;-webkit-mask-image:url("/image/strip.svg");mask-image:url("/image/strip.svg");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 120%;mask-size:100% 120%;z-index:10;text-align:left;min-width:180px}.strip-component.-blue{background-color:#31b2c0}.strip-component.-pink{background-color:#e67699}.strip-component.-green{background-color:#2ea861}.strip-component.-small{padding:5px 0;-webkit-mask-size:cover;mask-size:cover}.sub-header{position:relative;z-index:7;background-color:#232323}.sub-header.-vinyl.-scroll .scrollto-element .animation{display:inline-block;width:62px;height:62px}.sub-header.-vinyl.-scroll .scrollto-element .tooltip{right:70px}.sub-header.-vinyl .scrollto-element .tooltip{right:126px}.sub-header.-vinyl .scrollto-element .animation{display:inline-block;width:126px;height:126px}.sub-header.-bird.-scroll .scrollto-element .animation{width:80px;height:60px}.sub-header.-bird.-scroll .scrollto-element .tooltip{right:80px}.sub-header.-bird .scrollto-element .tooltip{right:126px}.sub-header.-bird .scrollto-element .animation{display:inline-block;width:195px;height:143px}.sub-header .scrollto-element{position:relative;top:-100px}.sub-header .scrollto-element:hover .tooltip{opacity:1}.sub-header .scrollto-element .button{cursor:pointer}.sub-header .scrollto-element .tooltip{background-color:#fff;box-shadow:0 2px 4px 0 #000;position:absolute;opacity:0;transition:1s opacity ease-out;margin-right:10px;white-space:nowrap;opacity:1}.sub-header .scrollto-element .tooltip::after{content:"";position:absolute;right:-23px;top:0;width:0;height:0;border-top:23px solid transparent;border-bottom:23px solid transparent;border-left:23px solid #fff}.sub-header .scrollto-element .tooltip.-active{opacity:1;transition:1s opacity ease-out}.sub-header.-scroll{position:fixed;top:75px;width:100%;z-index:8;border-bottom:3px solid #3d3d3d}.sub-header.-scroll + .element-layout{margin-top:200px}.sub-header.-scroll .title{font-size:36px;line-height:48px}.sub-header.-scroll .title.spacer-box.-m-bottom{margin-bottom:0}.sub-header.-scroll .subtitle{display:none}.sub-header.-scroll.spacer-box.-m-top-xxxxl{margin-top:0}.sub-header.-scroll .scrollto-element{position:relative;top:0;padding-top:10px;padding-bottom:10px}.sub-header.-scroll .scrollto-element.spacer-box.-m-top-xl{margin-top:0}.sub-header.-scroll .scrollto-element .button{line-height:0}@media all and (max-width:47.9375rem){.sub-header.-vinyl .tooltip{opacity:0}}@media all and (max-width:31.25rem){.sub-header.-vinyl .scrollto-element .animation{width:62px;height:62px}.sub-header.-vinyl.-scroll .animation{margin-right:10px}}.tag-element .svg-icon{width:34px;height:34px}@media all and (max-width:31.25rem){.tag-element .label{display:none}}.text-image-element{padding-top:32px;background-repeat:no-repeat;background-position:-15% 110%}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ){margin-bottom:128px}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .text-style.-grey-2,.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .text-style.-white{color:#232323}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .button-style.-secondary.-pink{color:#232323;border-color:#232323}.text-image-element.-bg-color:not(.text-image-element.-free-song-teaser ) >.container .button-style.-secondary.-pink:hover{background-color:#232323;color:#fff}.text-image-element.-free-song-teaser{margin-bottom:0}.text-image-element.-free-song-teaser >.container{padding-bottom:68px}.text-image-element.-free-song-teaser >.container .text-style.-grey-2{color:#fff}.text-image-element.-free-song-teaser >.container .button-style.-secondary.-pink{color:#e1e1e1;border-color:#e1e1e1}.text-image-element.-free-song-teaser >.container .button-style.-secondary.-pink:hover{filter:brightness(120%)}.text-image-element.-free-song-teaser >.container .image-responsive{border:3px solid #f7c809}.text-image-element .container{background-repeat:no-repeat;background-size:150px 162px;animation:animatedBackground 2s linear infinite alternate}@keyframes animatedBackground{from{background-position:48% -13px}to{background-position:52% -10px}}@media all and (max-width:47.9375rem){.text-image-element .container{background-size:120px 130px}@keyframes animatedBackground{from{background-position:48% -3px}to{background-position:52% 10px}}}@media all and (max-width:31.25rem){.text-image-element{background-image:none !important}.text-image-element .container{background-size:94px 102px}}.text-style ul,.text-style ol{margin-bottom:16px}.text-style.-link:hover{color:#e67699}.text-style.-p-big.-force .text-style.-para{font-size:inherit;line-height:inherit}@media all and (max-width:47.9375rem){.text-style.-big{font-size:60px;line-height:86px}.text-style.-h1{font-size:48px;line-height:58px}.text-style.-h2{font-size:36px;line-height:46px}.text-style.-h3{font-size:22px;line-height:36px}.text-style.-h4,.text-style.-bold{font-size:18px;line-height:28px}.text-style.-para{font-size:18px;line-height:28px}.text-style.-p-big{font-size:26px;line-height:38px}}@media all and (max-width:31.25rem){.text-style.-big{font-size:48px;line-height:58px}.text-style.-h1{font-size:36px;line-height:46px}.text-style.-h2{font-size:26px;line-height:36px}.text-style.-h3{font-size:20px;line-height:30px}.text-style.-h4{font-size:18px;line-height:28px}.text-style.-button{font-size:13px;line-height:18px}.text-style.-para{font-size:18px;line-height:28px}}.toggle-favorite .svg-icon{cursor:pointer;float:right;margin-right:4px}.tutorial-preview{cursor:pointer}.tutorial-preview.-free-song .image{border:3px solid #f7c809}.tutorial-preview.-free-song .free-song{display:block;position:absolute;bottom:0;background-color:#f7c809;width:100%;height:50px;text-align:center}.tutorial-preview.-free-song .free-song .label{line-height:50px}.tutorial-preview .free-song{display:none}.tutorial-preview .container .image{filter:brightness(90%)}.tutorial-preview .container .favorite{position:absolute;top:12px;right:16px}.tutorial-preview .container .lock{display:none}.tutorial-preview.-border .image{border:6px solid #31b2c0}.tutorial-preview:hover .container .play-video{display:block}.tutorial-preview:hover .container .image{filter:brightness(70%)}.tutorial-preview.-locked:hover .container .play-video{display:none}.tutorial-preview.-locked .container .image{filter:brightness(70%)}.tutorial-preview.-locked .container .lock{width:36px;height:36px;display:block;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.tutorial-preview.-coming-soon .container .image{filter:brightness(70%)}.tutorial-preview.-coming-soon .container .locked-video{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;white-space:nowrap}.tutorial-preview.-coming-soon .container .locked-video .svg-icon{margin:0 auto;width:36px;height:48px;margin-bottom:8px}.tutorial-preview .container{position:relative}.tutorial-preview .container .play-video{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px}.tutorial-preview .container .indicator{position:absolute;bottom:16px;right:16px}.tutorial-preview .preview{max-height:210px}.tutorial-preview .strip-component{position:absolute;transform:translate(-8px,-8px)}.url-item .link:hover{color:#e67699}.welcome-banner{background-color:#fff}.welcome-banner .bird{width:110px;height:100px}body{overscroll-behavior-y:none}body{overscroll-behavior-y:none}