Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="banner" class="banner">
  <h1 class="hero animated"><span>๐Ÿฉ&nbsp;</span><span style="color:#482f18;">B</span><span style="color:#61482d;">a</span><span style="color:#796141;">n</span><span style="color:#927a56;">n</span><span style="color:#aa936a;">e</span><span style="color:#c3ac7f;">r</span><span style="color:#dbc593;">&nbsp;</span><span style="color:#d4b783;">B</span><span style="color:#cca873;">a</span><span style="color:#c59a64;">k</span><span style="color:#bd8c54;">e</span><span style="color:#b67d44;">r</span><span style="color:#ae6f34;">y</span></h1>
  <p class="slogan animated"><i class="icon-bolt"></i> A fast banner builder! <i class="icon-bolt"></i></p>
</div>
<!-- EDITOR -->
<div id="editor-wrapper">
  <h1 id="click-expander">Banner properties &nbsp;&nbsp;&nbsp;<span id="expander-btn" class="close">&#10005;</span></h1>
  <div id="editor-hider">
    <p class="form-controls">
      <button id="reset">๐Ÿ New banner</button>
      <button id="_bannerName" class="btn">Banner name</button>&nbsp; Size:&nbsp;
      <select name="size_sl" id="size_sl">
							<option value="500x400">500x400 New Document</option>
							<optgroup label="Horizontal:">
								<option value="300x250" selected >300x250 Medium Rectangle</option>
								<option value="728x90">728x90 Leaderboard</option>
                <option value="468x60">468x60 Main Banner</option>
                <option value="480x320">480x320 Mobile Landscape</option>
                <option value="320x50">320x50 Mobile</option>
                <option value="320x100">320x100 Large Mobile</option>
								<option value="970x66">970x66</option>
								<option value="970x250">970x250 Billboard Masthead</option>
								<option value="768x90">768x90 Tablet</option>
								<option value="428x60">428x60 Full Banner</option>
								<option value="250x250">250x250 Square Popup</option>
                <option value="200x200">200x200 Small Square</option>
								<option value="336x280">336x280 Large Rectangle</option>
								<option value="720x300">720x300 Pop-Under</option>
								<option value="940x400">940x400 Website Slider</option>
								<option value="234x60">234x60 Half Banner</option>
								<option value="180x150">180x150 Rectangle</option>
								<option value="125x125">125x125 Square Button</option>
								<option value="120x90">120x90 Button</option>
								<option value="120x60">120x60 Button</option>
								<option value="88x31">88x31 Micro Bar</option>
							</optgroup>
							<optgroup label="Vertical:">
								<option value="160x600">160x600 Wide Skyscraper</option>
								<option value="300x600">300x600 Half Page Ad</option>
                <option value="320x480">320x480 Mobile Portrait</option>
								<option value="120x600">120x600 Skyscraper</option>
								<option value="120x240">120x240 Vertical Banner</option>
								<option value="240x400">240x400 Vertical Rectangle</option>
							</optgroup>
              <optgroup label="Facebook">
                <option value="851x315">851x315 Cover</option>
                <option value="1200x900">1200x900 Post</option>
                <option value="1200x628">1200x628 Ad</option>
                <option value="1200x444">1200x444 Page Like Ad</option>
                <option value="600x600">600x600 Click to Website Ad</option>
                <option value="400x400">400x400 Profile Picture</option>
              </optgroup>
              <optgroup label="Twitter">
                <option value="1500x500">1500x500 Cover</option>
                <option value="1024x512">1024x512 Post</option>
                <option value="800x320">800x320 Lead Generation Ad</option>
                <option value="400x400">400x400 Profile Picture</option>
              </optgroup>
              <optgroup label="YouTube">
                <option value="2580x1440">2580x1440 Channel Cover</option>
                <option value="1280x760">1280x760 Video Thumbnail</option>
              </optgroup>  
              <optgroup label="Social Networks">
                <option value="600x1200">600x1200 Pinterest Post</option>
                <option value="1080x608">1080x608 Google Plus Cover</option>
                <option value="1080x1080">1080x1080 Instagram Post</option>
                <option value="1200x628">1200x628 Instagram Ad</option>
              </optgroup> 
						</select>&nbsp; Background:&nbsp;
<input id="_color" type="color" value="#FFFFFF" />&nbsp;Images:&nbsp;<select id="_include_size"><option value="0">No size</option>
    <option value="2">In CSS</option>
    <option value="3">In CSS w/BG</option>
    <option value="1">In HTML</option>
    <option value="4">In HTML w/Position</option>
    </select>
      Template:&nbsp;
      <select id="template">
  <option value="NONE" selected>No template</option>
        <option value="BASIC">Basic html</option>
  <option value="DCM">Doubleclick Campaign Manager (DCM)</option>
    <option value="DCSTUDIO">Doubleclick Studio</option>
        <option value="ADWORDS">Google Adwords</option>
    <option value="SIZMEK">Sizmek</option>
        <option value="FLASHTALKING">FlashTalking</option>
    <option value="ATLAS">Atlas</option>
</select> &nbsp;
      <button id="copy_btn" class="btn">๐Ÿ“‹ COPY</button>
    </p>
    <p class="form-controls">
      <button id="zoom-in">โž•</button>
      <button id="actual-size">๐Ÿ’ฏ%</button>
      <button id="zoom-out">โž–</button>
      <input id="_showStage" type="checkbox" class="small-checkbox" /><label for="_showStage" class="small-checkbox-label">&nbsp;Show off-stage objects</label>
      <input id="_retina" type="checkbox" class="small-checkbox" /><label for="_retina" class="small-checkbox-label">&nbsp;Retina banner</label>
      <input id="_onionSkin" type="checkbox" class="small-checkbox" /><label for="_onionSkin" class="small-checkbox-label">&nbsp;Onion Skin</label>
      <span class="separator">&nbsp;|&nbsp;</span>Align: <select id="align-element">
      <option value="none">Select</option>
        <option value="tl">โ†– top left</option>
        <option value="t">โฌ† TOP</option>
        <option value="tr">โ†— top right</option>
        <option value="l">โฌ… LEFT</option>
        <option value="c">โ†” CENTER</option>
      <option value="m">โ†• MIDDLE</option>
        <option value="r">โžก RIGHT</option>
        <option value="bl">โ†™ bottom left</option>
        <option value="b">โฌ‡ BOTTOM</option>
        <option value="br">โ†˜ bottom right</option>
      </select>
      <button id="open-layers">๐Ÿ“‚ Layers</button>
    </p>
    <textarea name="" id="_code" cols="30" rows="10" class="form-control">
Drop your images โ›ฐ in the banner area to generate your HTML code ๐Ÿ“„
  </textarea>
    <p>Drop your images in the banner area to create the html structure of your ad. Drop your guides in the code textarea to resize the banner and organize the layout.</p>
  </div>
</div>
<div class="layer-comps">
  <div class="layer-window">
    <span class="title">Layers</span>
    <span class="close">โœ–๏ธ</span>
    <div class="sort-styles form-controls">Click to turn on/off visibility. Sort: <select id="_sort">
      <option value="none">Select</option>
      <option value="name">Name</option>
      <option value="zindex">Z-Index</option>
      <option value="size">Image size</option>
      <option value="left">Left</option>
      <option value="top">Top</option>
      </select>
      <select id="_sortOrder">
        <option value="0">Up</option>
        <option value="1">Down</option>
      </select>
      <button id="_hide-all">๐Ÿšซ</button>
      <button id="_show-all">๐Ÿ‘๏ธ</button>
      </div>
    <div class="element-list"></div>
    <div class="form-controls">
      <p><span class="hidden"><input id="_useSASS" type="checkbox" class="small-checkbox" checked="checked" /><label id="_useSASSLabel" for="_useSASS" class="small-checkbox-label">&nbsp;Use classanimation.scss</label></span>Frames:&nbsp;<input id="_frames" type="number" value="0" step="1" min="0" class="input-box" /><button id="_fx" title="Current object transition" style="display: none;">๐ŸŽž๏ธ Object transition</button>
Slide animator: <select id="_magic">
        <option value="none">Select</option>
        <option value="fade">Fade</option>
        <option value="slide">Slide</option>
        <option value="drop">Drop</option>
        <option value="jump">Jump</option>
        <option value="pop">Pop</option>
        </select>
        <span class="small">Only selected layers will be affected.</span>
       </p>
    </div>
    <div class="form-controls">
      <button id="delete-object">๐Ÿ—‘๏ธ Delete object</button>
    </div>
  </div>
</div>
<!--
TODO LIST

DELETE ELEMENT
REWRITE ELEMENT
CUSTOM SIZE BUTTON/ MENU ITEM

REPOSITION ELEMENT
oldWidthRatio = element.x / banner.width
banner.width = newBannerWidth
if(element.x < banner.width){
element.x = banner.width * oldWidthRatio
}

CANCEL BUTTON ON FX PROMPT
TIMELINE (VERTICAL LIKE IN PPT OR HORIZONTAL IN REGULAR ANIMATION PROGRAMS)

-->
              
            
!

CSS

              
                @charset "UTF-8";
///************** โœ COPY + PASTE โœ **************//


///   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 
///   |c|l|a|s|s|a|n|i|m|a|t|i|o|n|.|s|c|s|s| 
///   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+-+ 

///   OPTIMIZATIONS FOR BANNER ANIMATION?
///   Uses transitions as the animation engine
///   Saves easings in easy to use names
///   Standardizes times for different animations
///   Helps to create banner size and appearance classes easily
///   Outputs prefixed css
///   Uses timeScale to change timeline and animation duration

///   Use Koala for SCSS compilation: http://koala-app.com/
///   +-+-+-+-+-+
///   |U|t|i|l|s|
///   +-+-+-+-+-+
///   Helper function to get a random a number

@function getRandom($val) {
  @return if($val != 0, random($val) - $val/2, 0);
}
///   Helper function to get a random a number between 2 values

@function getRandomRange($min, $max){
  @return floor(random($max - $min) + $min)
}

///   +-+-+-+-+-+-+-+-+-+
///   |C|o|n|s|t|a|n|t|s|
///   +-+-+-+-+-+-+-+-+-+

$NONE: 'none';
$NORMAL: 'normal';
$CENTER: 'center';
$PAUSED: 'paused';
$TOP: 'top';
$BOTTOM: 'bottom';
$LEFT: 'left';
$RIGHT: 'right';
$XS: 'xs';
$SM: 'sm';
$MD: 'md';
$LG: 'lg';
$XL: 'xl';
$XXL: 'xxl';
$BOUNCE: 'bounce';
$SWING: 'swing';
$SNAP: 'snap';


///   +-+-+-+-+-+-+-+-+-+
///   |V|a|r|i|a|b|l|e|s|
///   +-+-+-+-+-+-+-+-+-+

$time-scale: 1;
/// Function to change the time scale of the animations

@function timeScale($val){
  $time-scale: $val !global;
  @return $time-scale;
}
@mixin timeScale($val){
  $temp: timeScale($val);
}
$force3D: false;
@function force3D(){
  $force3D: true !global;
  @return $force3D;
}
@mixin force3D(){
  $temp: force3D();
}

///   +-+-+-+-+-+
///   |T|i|m|e|s|
///   +-+-+-+-+-+

$times: (
  'intro': 0.5s,
  'outro': 0.3s,
  'timeline': 15s,
  'none': 0s,
  'xs': 0.1s,
  'sm': 0.2s,
  'md': 0.4s,
  'lg': 0.6s,
  'xl': 0.8s,
  'xxl': 1s,
  'fast': 0.25s,
  'normal': 0.5s,
  'slow': 0.75s,
  'short': 0.3s,
  'long': 0.7s,
  'frame': 2s,
  'slide': 4s,
  'paused': 8
);
@function time($duration) {
  @if map-has-key($times, $duration) {
    @return map-get($times, $duration);
  }
  @return 0.5s;
}


///   +-+-+-+-+-+-+-+
///   |E|a|s|i|n|g|s|
///   +-+-+-+-+-+-+-+


$eases: (
  'sine-ease-in': cubic-bezier(.47, 0, .745, .715),
  'sine-ease-out': cubic-bezier(.39, .575, .565, 1),
  'sine-ease-in-out': cubic-bezier(.39, .575, .565, 1),
  'quad-ease-out': cubic-bezier(0.25, 0.46, 0.45, 0.94),
  'quad-ease-in': cubic-bezier(0.55, 0.09, 0.68, 0.53),
  'quad-ease-in-out': cubic-bezier(.455, .03, .515, .955),
  'cubic-ease-in': cubic-bezier(0.55, 0.06, 0.68, 0.19),
  'cubic-ease-out': cubic-bezier(0.22, 0.61, 0.36, 1),
  'cubic-ease-in-out': cubic-bezier(0.65, 0.05, 0.36, 1),
  'quart-ease-in': cubic-bezier(.895, .03, .685, .22),
  'quart-ease-out': cubic-bezier(.165, .84, .44, 1),
  'quart-ease-in-out': cubic-bezier(.77, 0, .175, 1),
  'quint-ease-in': cubic-bezier(.755, .05, .855, .06),
  'quint-ease-out': cubic-bezier(.23, 1, .32, 1),
  'quint-ease-in-out': cubic-bezier(.86, 0, .07, 1),
  'circ-ease-in': cubic-bezier(.6, .04, .98, .335),
  'circ-ease-out': cubic-bezier(.075, .82, .165, 1),
  'circ-ease-in-out': cubic-bezier(.785, .135, .15, .86),
  'expo-ease-out': cubic-bezier(.19, 1, .22, 1),
  'expo-ease-in': cubic-bezier(.6, .04, .98, .335),
  'expo-ease-in-out': cubic-bezier(.785, .135, .15, .86),
  'back-in': cubic-bezier(0.6, -0.28, 0.74, 0.05),
  'back-out': cubic-bezier(0.18, 0.89, 0.32, 1.28),
  'back-in-out': cubic-bezier(.68, -.55, .265, 1.55),
  'bounce-in': cubic-bezier(.24, -0.44, .17, .27),
  'bounce-out': cubic-bezier(.64, .57, .67, 1.53),
  'bounce-in-out': cubic-bezier(0.76, -0.245, 0.24, 1.245),
  'snap-out': cubic-bezier(0, 1, .5, 1),
  'snap-in': cubic-bezier(.06, .98, .19, .99),
  'smooth': cubic-bezier(.365, .005, .355, 1),
  'sine': cubic-bezier(0.39, 0.58, 0.57, 1),
  'quad': cubic-bezier(0.25, 0.46, 0.45, 0.94),
  'cubic': cubic-bezier(0.22, 0.61, 0.36, 1),
  'expo': cubic-bezier(.19, 1, .22, 1),
  'circ': cubic-bezier(.075, .82, .165, 1),
  'bounce': cubic-bezier(.65, 1.95, .03, .32),
  'spring': cubic-bezier(.25, 2, .75, .5),
  'elastic': cubic-bezier(0.47, 2.02, 0.31, -0.36),
  'swing': cubic-bezier(.175, .885, .32, 1.275),
  'overshoot': cubic-bezier(.41, .41, .35, 1.2),
  'anticipate': cubic-bezier(.5, 0, .8, .15),
  'hesitate': cubic-bezier(.2, 1, .9, -0.5),
  'snap': cubic-bezier(.755, .05, .855, .06),
  'sharp': cubic-bezier(0.4, 0.0, 0.6, 1),
  'acceleration': cubic-bezier(0.4, 0.0, 1, 1),
  'deceleration': cubic-bezier(0.0, 0.0, 0.2, 1),
  'standard': cubic-bezier(0.4, 0.0, 0.2, 1),
  'paused': cubic-bezier(0.00, 1.00, 1.00, 0.00),
  'circ-in-out': cubic-bezier(0.88, 0.14, 0.12, 0.86),
  'cubic-in-out': cubic-bezier(0.66, 0.00, 0.34, 1.00),
  'ease-in-out': cubic-bezier(0.42, 0.00, 0.58, 1.00),
  'expo-in-out': cubic-bezier(0.90, 0.00, 0.10, 1.00),
  'quad-in-out': cubic-bezier(0.48, 0.04, 0.52, 0.96),
  'quart-in-out': cubic-bezier(0.76, 0.00, 0.24, 1.00),
  'quint-in-out': cubic-bezier(0.84, 0.00, 0.16, 1.00),
  'fast-slow': cubic-bezier(0.00, 0.45, 0.45, 1.00),
  'fast-fast-slow': cubic-bezier(0.00, 0.90, 0.45, 1.00),
  'fast-slow-slow': cubic-bezier(0.00, 0.45, 0.10, 1.00),
  'slow-fast': cubic-bezier(0.45, 0.00, 1.00, 0.45),
  'slow-fast-fast': cubic-bezier(0.45, 0.00, 1.00, 0.15),
  'slow-slow-fast': cubic-bezier(0.90, 0.00, 1.00, 0.45),
  'ant-s1': cubic-bezier(1.00, -0.51, 0.00, 1.51),
  'ant-s2': cubic-bezier(0.99, -2.18, 0.01, 3.18),
  'ant-q1': cubic-bezier(0.50, -1.00, 0.50, 2.00),
  'ant-q2': cubic-bezier(0.50, -1.50, 0.50, 2.50),
  'smooth-operator': cubic-bezier(0.64, 0.03, 0.07, 0.97),
  'endless-bummer': cubic-bezier(0.99, 0.03, 0.42, 0.97),
  'get-around': cubic-bezier(1.00, 0.07, 0.11, 1.00),
  'unknown-soldier': cubic-bezier(0.33, 0.02, 0.11, 1.00),
  'spanish-caravan': cubic-bezier(0.76, 0.00, 0.43, 0.94),
  'five-to-one': cubic-bezier(0.32, 0.05, 0.27, 1.00),
  'wild-in-the-streets': cubic-bezier(0.50, 1.00, 0.35, 1.00),
  'daniel': cubic-bezier(0.00, 0.10, 0.53, 1.34),
  'cocodrile-tears': cubic-bezier(0.47, 1.35, 0.53, 1.33),
  'crystal-ship': cubic-bezier(0.99, -0.55, 0.73, 1.00),
  'tencc': cubic-bezier(0.14, -0.14, 0.00, 1.00),
  'bishop': cubic-bezier(1.00, -0.66, 0.42, 0.97),
  'scarborough-fair': cubic-bezier(1.00, 0.06, 0.73, 0.98),
  'tulsa-time': cubic-bezier(0.19, 2.51, 0.43, 1.00),
  'norwegian-skog': cubic-bezier(0.25, 0.51, 0.35, 0.95),
  'weird-fishes': cubic-bezier(0.88, 0.04, 0.88, 0.95),
  'brave-strangers': cubic-bezier(0.00, 0.01, 0.00, 1.00),
  'stranger-than-diction': cubic-bezier(1.00, 0.00, 0.74, 1.00),
  'the-gambler': cubic-bezier(0.47, -0.48, 0.00, 1.03),
  'cracklin-rose': cubic-bezier(0.05, 0.03, 0.00, 1.16),
  'ease-10': cubic-bezier(.1, 0, .9, 1),
  'ease-20': cubic-bezier(.2, 0, .8, 1),
  'ease-30': cubic-bezier(.3, 0, .7, 1),
  'ease-40': cubic-bezier(.4, 0, .6, 1),
  'ease-50': cubic-bezier(.5, 0, .5, 1),
  'ease-60': cubic-bezier(.6, 0, .4, 1),
  'ease-70': cubic-bezier(.7, 0, .3, 1),
  'ease-80': cubic-bezier(.8, 0, .2, 1),
  'ease-90': cubic-bezier(.9, 0, .1, 1),
  'ease-100': cubic-bezier(1, 0, 0, 1),
  'ease-0-10': cubic-bezier(0, 0, .1, 1),
  'ease-0-20': cubic-bezier(0, 0, .2, 1),
  'ease-0-30': cubic-bezier(0, 0, .3, 1),
  'ease-0-40': cubic-bezier(0, 0, .4, 1),
  'ease-0-50': cubic-bezier(0, 0, .5, 1),
  'ease-0-60': cubic-bezier(0, 0, .6, 1),
  'ease-0-70': cubic-bezier(0, 0, .7, 1),
  'ease-0-80': cubic-bezier(0, 0, .8, 1),
  'ease-0-90': cubic-bezier(0, 0, .9, 1),
  'ease-50-0': cubic-bezier(.5, 0, 0, 1),
  'ease-50-10': cubic-bezier(.5, 0, .1, 1),
  'ease-50-20': cubic-bezier(.5, 0, .2, 1),
  'ease-50-30': cubic-bezier(.5, 0, .3, 1),
  'ease-50-40': cubic-bezier(.5, 0, .4, 1),
  'ease-50-50': cubic-bezier(.5, 0, .5, 1),
  'ease-50-60': cubic-bezier(.5, 0, .6, 1),
  'ease-50-70': cubic-bezier(.5, 0, .7, 1),
  'ease-50-80': cubic-bezier(.5, 0, .8, 1),
  'ease-50-90': cubic-bezier(.5, 0, .9, 1),
  'ease-50-100': cubic-bezier(.5, 0, 1, 1),
  'boing': cubic-bezier(.35, 2, .1, .2),
  'boingPast': cubic-bezier(.88, 2, .48, .71),
  'swoosh': cubic-bezier(.63, -0.28, .13, 1.55),
  'gottaDash': cubic-bezier(.9, -1.4, .61, 1.61),
  'slowMo': cubic-bezier(0, 1.35, 1, -0.35),
  'slowInOut': cubic-bezier(.36, -0.14, .29, 1.21)
);
@function ease($ease) {
  @if map-has-key($eases, $ease) {
    @return map-get($eases, $ease);
  }
  @return ease;
}
@function stepsEase($steps:2){
  @return steps($steps + 1, end);
}


///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
///   |T|r|a|n|s|f|o|r|m| |o|r|i|g|i|n|s|
///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+


$positions: (
  'top': 50% 0%,
  'bottom': 50% 100%,
  'left': 0% 50%,
  'right': 100% 50%,
  'top-left': 0% 0%,
  'bottom-right': 100% 100%,
  'top-right': 100% 0%,
  'bottom-left': 0% 100%,
  'center': 50% 50%
);
@function position($val) {
  @return map-get($positions, $val);
}
@mixin transformOrigin($val:$CENTER) {
  @if map-has-key($positions, $val) {
    @include prefix(transform-origin, map-get($positions, $val));
  }
  @else {
    @include prefix(transform-origin, $val);
  }
}


///   +-+-+-+-+-+-+
///   |C|o|l|o|r|s|
///   +-+-+-+-+-+-+


$colors: (
  'black': #000000,
  'white': #FFFFFF,
  'red': #880000,
  'crimson': #DC143C,
  'cyan': #AAFFEE,
  'violet': #CC44CC,
  'green': #00CC55,
  'blue': #0000AA,
  'yellow': #EEEE77,
  'orange': #DD8855,
  'brown': #664400,
  'pink': #FF7777,
  'lime': #AAFF66,
  'sky': #0088FF,
  'seagreen': #2E8B57,
  'aquamarine': #66CDAA,
  'olive': #808000,
  'gray': #777777,
  'darkgray': #333333,
  'lightgray': #BBBBBB,
  'chocolate': #D2691E,
  'teal': #008080,
  'tomato': #FF6347,
  'plum': #DDA0DD,
  'steel': #4682B4,
  'salmon': #FA9072
);
@function color($color) {
  @return map-get($colors, $color);
}


///   +-+-+-+-+ +-+-+-+-+-+-+
///   |T|e|x|t| |s|h|a|d|o|w|
///   +-+-+-+-+ +-+-+-+-+-+-+


$textShadows: (
  'none': none,
  'xs': 1px 1px 1px rgba(0, 0, 0, .16),
  'sm': 2px 2px 2px rgba(0, 0, 0, .16),
  'md': 4px 4px 4px rgba(0, 0, 0, .16),
  'lg': 8px 8px 8px rgba(0, 0, 0, .16),
  'sl': 10px 10px 10px rgba(0, 0, 0, .16)
);
@mixin textShadow($h-shadow: 3px, $v-shadow: 4px, $blur: 2px, $color: rgba(0,0,0,.3)) {
  @if map-has-key($textShadows, $h-shadow) {
    text-shadow: map-get($textShadows, $h-shadow);
  }
  @else {
    text-shadow: $h-shadow $v-shadow $blur $color;
  }
}


///   +-+-+-+ +-+-+-+-+-+-+
///   |B|o|x| |s|h|a|d|o|w|
///   +-+-+-+ +-+-+-+-+-+-+


$boxShadows: (
  'none': none,
  'normal': 0 0 5px 2px rgba(0,0,0,.35),
  'top': 0 -4px 2px -2px rgba(0,0,0,0.4),
  'bottom': 0 4px 2px -2px rgba(0,0,0,0.4),
  'right': 4px 0 2px -2px rgba(0,0,0,0.4),
  'left': -4px 0 2px -2px rgba(0,0,0,0.4),
  'xs': 0 1px 1px rgba(0,0,0,.16),
  'sm': 0px 2px 2px 0px rgba(0,0,0,.16),
  'md': 0px 4px 4px 0px rgba(0,0,0,.16),
  'lg': 0px 8px 8px 0px rgba(0,0,0,.16),
  'xl': 0px 16px 16px 0px rgba(0,0,0,.16),
  'xxl': 0px 32px 32px 0px rgba(0,0,0,.16),
  'xs-inverse': 0 -1px 1px rgba(0,0,0,.16),
  'sm-inverse': 0px -2px 2px 0px rgba(0,0,0,.16),
  'md-inverse': 0px -4px 4px 0px rgba(0,0,0,.16),
  'lg-inverse': 0px -8px 8px 0px rgba(0,0,0,.16),
  'xl-inverse': 0px -16px 16px 0px rgba(0,0,0,.16),
  'xxl-inverse': 0px -32px 32px 0px rgba(0,0,0,.16),
  'inset': inset 0px 3px 3px 0px rgba(0,0,0,.16),
  'inset-inverse': 0px 32px 32px 0px rgba(0,0,0,.16),
  'watermark': 0 -2px 4px #F4F6F9,
  'drag': 0px 2px 4px 0px rgba(0,0,0,.40),
  'drop-down': 0px 2px 3px 0px rgba(0,0,0,.16),
  'header': 0 2px 4px rgba(0,0,0,.07),
  'focus': 0 0 3px #0070D2,
  'focus-inverse': 0 0 3px #E0E5EE,
  'inline-edit': 0 2px 4px 4px rgba(0,0,0,.16),
  'focus-inset': 0 0 2px 2px inset #1589EE
);
@function boxShadow($val){
  @return map-get($boxShadows, $val);
}
@mixin boxShadow($h-shadow: 0px, $v-shadow: 4px, $blur: 2px, $spread: 0px, $color: rgba(0,0,0,.16)) {
  @if map-has-key($boxShadows, $h-shadow) {
    box-shadow: map-get($boxShadows, $h-shadow);
  }
  @else {
    box-shadow: $h-shadow $v-shadow $blur $spread $color;
  }
}


///   +-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |B|o|r|d|e|r| |r|a|d|i|u|s|
///   +-+-+-+-+-+-+ +-+-+-+-+-+-+


$roundedCorners: (
  'none': 0,
  'sm': .125rem,
  'md': .25rem,
  'lg': .5rem,
  'pill': 15rem,
  'barrel': unquote(20rem + '/' + 60rem),
  'tab': 5rem 20rem 0 0,
  'round-tab': 15rem 15rem 0 0,
  'inverse-round-tab': 0 0 15rem 15rem,
  'leaf': 15rem 0 15rem 0,
  'inverse-leaf': 0 15rem 0 15rem,
  'bullet': 0 15rem 15rem 0,
  'inverse-bullet': 15rem 0 0 15rem,
  'circle': 50%
);
@mixin borderRadius($corners) {
  @if map-has-key($roundedCorners, $corners) {
    border-radius: map-get($roundedCorners, $corners);
  }
  @else {
    border-radius: $corners;
  }
}

///   +-+-+-+-+
///   |R|e|c|t|
///   +-+-+-+-+

@mixin rect($bg:#FFFFFF, $width: $_bannerWidth, $height: $_bannerHeight, $overflow: visible){
  background-color: $bg;
  width: $width;
  height: $height;
  overflow: $overflow;
}

///   +-+-+-+-+
///   |M|a|s|k|
///   +-+-+-+-+

@mixin mask($width: $_bannerWidth, $height: $_bannerHeight, $bg:transparent){
  @include rect($bg, $width, $height, hidden);
}

///   +-+-+-+-+-+-+
///   |C|i|r|c|l|e|
///   +-+-+-+-+-+-+

@mixin circle($bg:#FFFFFF, $size: 100px){
  background-color: $bg;
  width: $size;
  height: $size;
  border-radius: 50%;
  box-sizing: border-box;
}

///   +-+-+-+-+-+ +-+-+-+-+-+-+
///   |B|a|s|i|c| |m|i|x|i|n|s|
///   +-+-+-+-+-+ +-+-+-+-+-+-+


$_prefixes: "webkit", "ms", "moz" !global;
@mixin prefix($property, $value) {
  @each $prfx in $_prefixes {
    #{"-" + $prfx + "-" + $property}: $value;
  }
  #{$property}: $value;
}
@mixin cssReset {
  *, *:before, *:after, html, body {
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
  }
  body {
    line-height: 1;
    font-family: -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      Helvetica,
      Arial,
      sans-serif;
  }
  ol, ul {
    list-style: none;
  }
  a {
    text-decoration: none;
    color: #000;
    border: none;
  }
  //https://css-tricks.com/making-animations-wait/
  .banner-loading *, .banner-loading *:before, .banner-loading *:after {
    animation-play-state: paused !important;
  }
}


///   +-+-+-+-+ +-+-+-+-+-+-+
///   |T|e|x|t| |m|i|x|i|n|s|
///   +-+-+-+-+ +-+-+-+-+-+-+


@mixin sup($currentFontSize:100%) {
  font-size: $currentFontSize/2;
  vertical-align: super;
}
@mixin antialiased {
  font-smoothing: antialiased;
}

///   +-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |D|e|s|i|g|n| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+ +-+-+-+-+-+-+


@mixin linearGradient($top, $bottom) {
  background: $top; /* Old browsers */
  background: -moz-linear-gradient(top, $top 0%, $bottom 100%); /* FF3.6+ */
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, $top),
    color-stop(100%, $bottom)
  ); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(
    top,
    $top 0%,
    $bottom 100%
  ); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, $top 0%, $bottom 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, $top 0%, $bottom 100%); /* IE10+ */
  background: linear-gradient(to bottom, $top 0%, $bottom 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient(
      startColorstr='#ffffff',
      endColorstr='#000000',
      GradientType=0
    ); /* IE6-9 */
}
@mixin radialGradient($from, $to) {
  background: -moz-radial-gradient(center, circle cover, $from 0%, $to 100%);
  background: -webkit-gradient(
    radial,
    center center,
    0px,
    center center,
    100%,
    color-stop(0%, $from),
    color-stop(100%, $to)
  );
  background: -webkit-radial-gradient(center, circle cover, $from 0%, $to 100%);
  background: -o-radial-gradient(center, circle cover, $from 0%, $to 100%);
  background: -ms-radial-gradient(center, circle cover, $from 0%, $to 100%);
  background: radial-gradient(center, circle cover, $from 0%, $to 100%);
  background-color: $from;
}

///   +-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |L|a|y|o|u|t| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+ +-+-+-+-+-+-+


@mixin fullSize() {
  width: 100%;
  height: 100%;
}
@mixin fullWidth() {
  width: 100%;
}
@mixin position($x, $y) {
  top: $x;
  left: $y;
}


///   +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |T|r|a|n|s|i|t|i|o|n| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+


@mixin transition($duration:time($NORMAL), $ease:ease, $delay:time($NONE), $useOpacity:true) {
  @if $useOpacity {
    $vals: opacity $duration * $time-scale linear $delay * $time-scale,
      transform $duration * $time-scale $ease $delay * $time-scale;
    @include prefix(transition, $vals);
  }
  @else {
    $vals: transform $duration * $time-scale $ease $delay * $time-scale;
    @include prefix(transition, $vals);
  }
}
@mixin transitionAll($duration:time($NORMAL), $ease:ease, $delay:time($NONE)) {
  @include prefix(transition, all $duration * $time-scale $ease $delay * $time-scale);
}
@mixin transitionProp($prop: all, $duration:time($NORMAL), $ease:ease, $delay:time($NONE)){
  @include prefix(transition, $prop $duration * $time-scale $ease $delay * $time-scale);
}
@mixin noTransition() {
  @include prefix(transition, none);
}
@mixin transitionDelay($delay:0.5s){
  @include prefix(transition-delay, $delay * $time-scale);
}
@mixin staggerTransitions($elements:(), $delay: time($XS), $initial: 0s) {
  $count: 0;
  @each $elem in $elements {
    #{$elem} {
      @include prefix(transition-delay, ($delay * $count * $time-scale) + $initial);
    }
    $count: $count + 1;
  }
}
@mixin staggerChildrenTransitions($qty: 8, $delay: time($XS), $initial: 0s) {
  @for $i from 1 through $qty {
    &:nth-child(#{$i}) {
      @include prefix(transition-delay, ($delay * $i * $time-scale) + $initial);
    }
  }
}

///   +-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |B|a|n|n|e|r| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+ +-+-+-+-+-+-+

@mixin animatable($display:block, $position:absolute) {
  display: $display;
  position: $position;
  box-sizing: border-box;
  img {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
  }
}
@mixin animated($display:block, $position:absolute, $time: time($NORMAL), $ease: ease, $delay: 0s) {
  @include animatable($display, $position);
  @include prefix(transform-style, preserve-3d);
  @include prefix(backface-visibility, hidden);
  @include transition($time, $ease, $delay);
  @include prefix(animation-timing-function, $ease);
  @include prefix(animation-duration, $time);
  img {
      @include transition($time, $ease, $delay);
      @include prefix(animation-timing-function, $ease);
      @include prefix(animation-duration, $time);
  }
}

@mixin bannerBase($includeAnimated:false) {
  @include cssReset;
  .animatable {
    @include animatable();
  }
  @if $includeAnimated{
    .animated {
      @include animated();
    }    
  }
}
@mixin expanding($fromWidth:970, $fromHeight:30, $toWidth:970, $toHeight:250, $bgColor:#FFF, $borderColor:#666, $includeAnimated: false) {
  @include bannerBase($includeAnimated);
  #banner {
    #collapsed-state, #expanded-state {
      top: 0;
      left: 0;
      position: absolute;
      box-sizing: border-box;
      background-color: $bgColor;
      border: 1px solid $borderColor;
      cursor: pointer;
      overflow: hidden;
    }
    #collapsed-state {
      display: block;
      width: $fromWidth * 1px;
      height: $fromHeight * 1px;
    }
    #expanded-state {
      display: none;
      width: $toWidth * 1px;
      height: $toHeight * 1px;
    }
  }
}
@mixin banner($width:300, $height:250, $bgColor:#FFF, $borderColor:#666, $image: null, $includeAnimated: false) {
  $_bannerWidth: $width !global;
  $_bannerHeight: $height !global;
  @include bannerBase($includeAnimated);
  #banner {
    display: block;
    position: absolute;
    overflow: hidden;
    background-color: $bgColor;
    border: 1px solid $borderColor;
    @if $image {
      background-image: url($image);
      background-repeat: no-repeat;
    }
    box-sizing: content-box;
    width: ($_bannerWidth - 2) + 0px;
    height: ($_bannerHeight - 2) + 0px;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    @include prefix(transform-style, preserve-3d);
    @include prefix(transform, translate3d(0, 0, 0));
    perspective: 800px;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
  }
}
@mixin mediaRectangle() {
  @include banner(300,250);
}
@mixin leaderboard() {
  @include banner(728,90);
}
@mixin halfPageAd() {
  @include banner(300,600);
}
@mixin wideSkyscraper() {
  @include banner(160,600);
}
@mixin banner300x250() {
  @include mediaRectangle();
}
@mixin banner728x90() {
  @include leaderboard();
}
@mixin banner160x600() {
  @include wideSkyscraper();
}


///   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |T|r|a|n|s|f|o|r|m|a|t|i|o|n| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+

@mixin centerHorizontal() {
  left: 50%;
  @include x(-50%);
}

@mixin centerVertical() {
  top: 50%;
  @include y(-50%);
}

@mixin center() {
  //@include position(50%, 50%);
  //@include transform(-50%, -50%);
  ///position: absolute;
  top: 0; 
  right: 0; 
  bottom: 0; 
  left: 0;
  margin: auto;
}

@mixin _hasTransitionArgs($val, $max: 1) {
  @if (length($val) > $max) {
    $dur: time($NORMAL);
    $ease: ease;
    $delay: time($NONE);
    @if (length($val) == $max + 1) {
      @include transition(nth($val,$max + 1));
    }
    @if (length($val) == $max + 2) {
      @include transition(nth($val,$max + 1), nth($val,$max + 2));
    }
    @if (length($val) == $max + 3) {
      @include transition(nth($val,$max + 1), nth($val,$max + 2), nth($val,$max + 3));
    }
  }
}
@mixin x($x...) {
  $args: length($x) > 1;
  @if $args {
    @if $force3D {
      @include prefix(transform, translate3d(nth($x,1), 0px, 0px));
    }
    @else {
      @include prefix(transform, translateX(nth($x,1)));
    }    
  } @else {
    @if $force3D {
      @include prefix(transform, translate3d($x, 0px, 0px));
    }
    @else {
      @include prefix(transform, translateX($x));
    } 
  }
  @include _hasTransitionArgs($x);
}
@mixin y($y...) {
  $args: length($y) > 1;
  @if $args {
      @if $force3D {
        @include prefix(transform, translate3d(0px, nth($y,1), 0px));
      }
      @else {
        @include prefix(transform, translateY(nth($y,1)));
      }
  } @else {
      @if $force3D {
        @include prefix(transform, translate3d(0px, $y, 0px));
      }
      @else {
        @include prefix(transform, translateY($y));
      }    
  }
  @include _hasTransitionArgs($y);
}
@mixin rotate($rotate...) {
  @if $force3D {
    @include prefix(transform, rotate3d(0, 0, 1, $rotate));
  }
  @else {
    @include prefix(transform, rotate($rotate));
  }
  @include _hasTransitionArgs($rotate);
}
@mixin scale($scale...) {
  @if $force3D {
    @include prefix(transform, scale3d($scale, $scale, $scale));
  }
  @else {
    @include prefix(transform, scale($scale));
  }
  @include _hasTransitionArgs($scale);
}
@mixin translate($xy...) {
  $x: nth($xy, 1);
  $y: nth($xy, 2);
  @if $force3D {
    @include prefix(transform, translate3d($x, $y, 0px));
  }
  @else {
    @include prefix(transform, translate($x, $y));
  }
  @include _hasTransitionArgs($xy,2);
}
@mixin scaleXY($xy...) {
  $x: nth($xy, 1);
  $y: nth($xy, 2);
  @if $force3D {
    @include prefix(transform, scale3d($x, $y, 1));
  }
  @else {
    @include prefix(transform, scale($x, $y));
  }
  @include _hasTransitionArgs($xy,2);
}
@mixin scaleRotate($scaleRotation...) {
  $scale: nth($scaleRotation, 1);
  $rotation: nth($scaleRotation, 2);
  @if $force3D {
    @include prefix(transform, rotate3d(0, 0, 1, $rotation) scale3d($scale, $scale, $scale));
  }
  @else {
    @include prefix(transform, rotate($rotation) scale($scale, $scale));
  }
  @include _hasTransitionArgs($scaleRotation,2);
}
@mixin matrix($matrix...) {
  @include prefix(transform, $matrix);
  @include _hasTransitionArgs($matrix);
}
@mixin transform($x:0, $y:0, $scale:1, $rotation:0) {
  @if $force3D {
    @include prefix(transform, rotate3d(0, 0, 1, $rotation) scale3d($scale, $scale, $scale) translate3d($x, $y, 0px));
  }
  @else {
    @include prefix(transform, rotate($rotation) scale($scale, $scale) translate($x, $y));
  }
}
@mixin transformNone() {
  @include prefix(transform, none);
}
@mixin origin($position) {
  @include prefix(transform-origin, $position);
}
@mixin transformObject($object) {
  $x: 0;
  $y: 0;
  $scale: 1;
  $rotate: 0;
  $val: "";
  @if map-has-key($object, 'x') and map-has-key($object, 'y') { 
    $x: map-get($object, 'x');
    $y: map-get($object, 'y');
    @if $force3D {
      $val: $val + " translate3d(" + $x + "," + $y + ",0 )";
    }
    @else {
      $val: $val + " translate(" + $x + "," + $y + ")";
    }
  }
  @else if map-has-key($object, 'x'){
    $x: map-get($object, 'x');
    @if $force3D {
      $val: $val + " translate3d(" + $x + ", 0 ,0 )";
    }
    @else {
      $val: $val + " translate(" + $x + ", 0)";
    }
  }@else if map-has-key($object, 'y'){
    $y: map-get($object, 'y');
    @if $force3D {
      $val: $val + " translate3d( 0, " + $y + ", 0)";
    }
    @else {
      $val: $val + " translate( 0, " + $y + ")";
    }
  }
  @if map-has-key($object, 'scale') {
    $scale: map-get($object, 'scale');
    @if $force3D {
      $val: $val + " scale3d(" + $scale + "," + $scale + "," + $scale + ")";
    }
    @else {
      $val: $val + " scale(" + $scale + "," + $scale + ")";
    }
  }
  @if map-has-key($object, 'rotate') {
    $rotate: map-get($object, 'rotate');
    @if $force3D {
      $val: $val + " rotate3d(0, 0, 1, " + $rotate + ")";
    }
    @else {
      $val: $val + " rotate(" + $rotate + ")";
    }
  }
  @if map-has-key($object, 'ease') {
    @include prefix(animation-timing-function, map-get($object, 'ease'));
  }
  @if map-has-key($object, 'origin') {
    @include prefix(transform-origin, map-get($object, 'origin'));
  }
  @if map-has-key($object, 'opacity') {
    opacity: map-get($object, 'opacity');
  }
  @if map-has-key($object, 'transform'){
    $val: map-get($object, 'transform');
  }
  @include prefix(transform, unquote($val));
}

///   +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
///   |T|r|a|n|s|i|t|i|o|n| |p|r|e|s|e|t|s|
///   +-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+


@mixin hide() {
  visibility: hidden;
}
@mixin show($val:block) {
  visibility: visible;
}
@mixin attach($display: block){
  display: $display;
}
@mixin remove(){
  display: none;
}
@mixin opacityTo($val:1, $duration: time($NORMAL), $delay: time($NONE)){
  opacity: $val;
  $vals: opacity $duration * $time-scale ease-out $delay * $time-scale;
  @include prefix(transition, $vals);
}
@mixin fadeIn($duration: time($NORMAL), $delay: time($NONE)) {
  opacity: 1;
  $vals: opacity $duration * $time-scale ease-out $delay * $time-scale;
  @include prefix(transition, $vals);
}
@mixin fadeOut($duration: time($NORMAL), $delay: time($NONE)) {
  opacity: 0;
  $vals: opacity $duration * $time-scale ease-in $delay * $time-scale;
  @include prefix(transition, $vals);
}
@mixin from($x:0, $y:0, $scale:1, $rotation:0, $opacity: 1) {
  opacity: $opacity;
  @include transform($x, $y, $scale, $rotation);
  @include noTransition;
}
@mixin to($duration: time($NORMAL), $x:0, $y:0, $scale:1, $rotation:0, $opacity: 1, $ease: ease, $delay: time($NONE)) {
  opacity: $opacity;
  @include transform($x, $y, $scale, $rotation);
  @include transition($duration, $ease, $delay);
}
@mixin reset($duration: null, $ease: ease, $delay: time($NONE)) {
  @include transformNone();
  @if $duration { 
    @include transition($duration, $ease, $delay);
  }
}
@mixin resetCenter($duration: null, $ease: ease, $delay: time($NONE)) {
  @include transform(-50%, -50%);
  @if $duration {
    @include transition($duration, $ease, $delay);
  }
}
@mixin resetFade($alpha:1, $duration: null, $ease: ease, $delay: time($NONE)) {
  opacity: $alpha;
  @include transformNone();
  @if $duration {
    @include transition($duration, $ease, $delay);
  }
}
@mixin resetCenterFade($alpha:1, $duration: null, $ease: ease, $delay: time($NONE)) {
  opacity: $alpha;
  @include transform(-50%, -50%);
  @if $duration {
    @include transition($duration, $ease, $delay);
  }
}


///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |A|n|i|m|a|t|i|o|n| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+

@mixin keyframes($name) {
  @at-root {
    @keyframes #{$name} {
      @content;
    }
    @-webkit-keyframes #{$name} {
      @content;
    }
  }
}
@mixin simpleAnimation($name, $duration: 1s, $ease: ease, $delay: 0s, $loops:1, $fill: both, $direction: normal){
  @include prefix(animation, $name $duration $ease $delay $loops $fill $direction);
  @include keyframes($name){
    @content;
  }
}
@mixin noAnimation(){
  @include prefix(animation, none !important);
}
@mixin animation($name, $duration: 1s, $ease: linear, $delay: 0s, $loops: infinite) {
  @include prefix(animation, $name $duration $ease $delay $loops );
}
@mixin animationBase($name, $duration: 1s, $ease: linear, $delay: 0s, $loops: null) {
  @include prefix(animation-name, $name);
  @include prefix(animation-duration, $duration);
  @include prefix(animation-timing-function, $ease);
  @if $delay not 0s {
    @include prefix(animation-delay, $delay);
  }
  @if $loops {
    @include prefix(animation-iteration-count, $loops);
  }
}
@mixin keyframesFromTo($name, $from, $to) {
  @include keyframes($name) {
    from {
      @include transformObject($from);
    }
    to {
      @include transformObject($to);
    }
  }
}
@mixin animationDelay($delay:0.5s){
  @include prefix(animation-delay, $delay * $time-scale);
}
@mixin staggerChildrenAnimations($qty: 8, $delay: time($XS), $initial: 0s) {
  @for $i from 1 through $qty {
    &:nth-child(#{$i}) {
      @include prefix(animation-delay, ($delay * $i * $time-scale) + $initial);
    }
  }
}
@mixin staggerAnimations($elements:(), $delay: time($XS), $initial: 0s) {
  $count: 0;
  @each $elem in $elements {
    @at-root {
      #{unquote($elem)} {
        @include prefix(animation-delay, ($delay * $count * $time-scale) + $initial);
      }
    }
    $count: $count + 1;
  }
}
@mixin randomAnimations($elements:(), $min: 0, $max: 1) {
  $count: 0;
  @each $elem in $elements {
    @at-root {
      #{unquote($elem)} {
        @include prefix(animation-duration, (random() * $max + $min) * 1s * $time-scale);
      }
    }
    $count: $count + 1;
  }
}
@mixin playBackwards() {
  @include prefix(animation-direction, reverse);
}
@mixin playAlternate() {
  @include prefix(animation-direction, alternate);
}
@mixin cancelAnimation() {
  @include prefix(animation, none);
}
@mixin playAnimation() {
  @include prefix(animation-play-state, running);
}
@mixin pauseAnimation() {
  @include prefix(animation-play-state, paused);
}
@mixin animationFill($fill:both) {
  @include prefix(animation-fill-mode, $fill);
}
$animationCounter: 0;
@function animationName($val, $overwrite:false) {
  @if $overwrite {
    $animationCounter: $animationCounter + 1 !global;
    @return unquote($val + '-' + ($animationCounter));
  }
  @return unquote($val);
}

@mixin spinKeyframes($anim, $direction: 'cw'){
  @include keyframes($anim) {
    100% {
      @if $direction == 'ccw' {
        @include rotate(-1turn);
      }
      @else {
        @include rotate(1turn);
      }
    }
  }  
}
@mixin spinLoop($duration: 1s, $direction: 'cw', $overwrite:false) {
  $anim: animationName(spin, $overwrite);
  @include spinKeyframes($anim, $direction);
  @include animation($anim, $duration, linear);
}
@mixin bounceKeyframes($anim){
  @include keyframes($anim) {
    from, 20%, 53%, 80%, to {
      @include prefix(animation-timing-function, cubic-bezier(0.215, 0.610, 0.355, 1.000));
      @include y(0px);
    }

    40%, 43% {
      @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
      @include y(-30px);
    }

    70% {
      @include prefix(animation-timing-function, cubic-bezier(0.755, 0.050, 0.855, 0.060));
      @include y(-15px);
    }

    90% {
      @include y(-4px);
    }
  }  
}
@mixin bounceLoop($duration: 1.2s, $loops: infinite, $overwrite:false) {
  $anim: animationName(bounce, $overwrite);
  @include bounceKeyframes($anim);
  @include animation($anim, $duration, linear, 0s, $loops);
}
@mixin flipLoop($duration: 1s, $loops: infinite, $overwrite:false){
  @include prefix(backface-visibility, visible);
  $anim: animationName(flipLoop, $overwrite);
  @include keyframes($anim){
    0% {
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -360deg));
      @include prefix(animation-timing-function, ease-out);
    }

    40% {
      @include prefix(transform, perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg));
      @include prefix(animation-timing-function, ease-out);
    }

    50% {
      @include prefix(transform, perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg));
      @include prefix(animation-timing-function, ease-in);
    }

    80% {
      @include prefix(transform, perspective(400px) scale3d(.95, .95, .95));
      @include prefix(animation-timing-function, ease-in);
    }

    100% {
      @include prefix(transform, perspective(400px));
      @include prefix(animation-timing-function, ease-in);
    }    
  }
  @include animation($anim, $duration, linear, 0s, $loops);
}
@mixin flashKeyframes(){
  @include keyframes(flash) {
    from, 50%, to {
      opacity: 1;
    }
    25%, 75% {
      opacity: 0;
    }
  }  
}
@mixin flashLoop($loops: infinite) {
  @include flashKeyframes();
  @include animation(flash, 1s, ease, 0s, $loops);
}
@mixin pulseKeyframes($anim, $direction: 0.05){
  @include keyframes($anim) {
    from, to {
      @include scale(1);
    }
    50% {
      @include scale(1 + $direction);
    }
  }  
}
@mixin pulseLoop($duration: 1s, $direction: 0.1, $overwrite: false) {
  $anim: animationName(pulse, $overwrite);
  @include pulseKeyframes($anim, $direction);
  @include animation($anim, $duration, ease);
}
@mixin tadaLoop($duration:1s, $loops:infinite) {
  @include keyframes(tada) {
    from, to {
      @include scale(1);
    }
    10%, 20% {
      @include transform(0,0,0.9,-3deg);
    }
    30%, 50%, 70%, 90% {
      @include transform(0,0,1.1,3deg);
    }
    40%, 60%, 80% {
      @include transform(0,0,1.1,-3deg);
    }
  }
  @include animation(tada, $duration, ease, 0s, $loops);
}
@mixin heartbeatLoop($duration:1s) {
  @include keyframes(heartbeat) {
    from {
      @include scale(1);
      @include prefix(animation-timing-function, ease-out);
    }
    10% {
      @include scale(0.91);
      @include prefix(animation-timing-function, ease-in);
    }
    17% {
      @include scale(0.98);
      @include prefix(animation-timing-function, ease-out);
    }
    33% {
      @include scale(0.87);
      @include prefix(animation-timing-function, ease-in);
    }
    45% {
      @include scale(1);
      @include prefix(animation-timing-function, ease-out);
    }
  }
  @include animation(heartbeat);
}
@mixin pingKeyframes($anim, $min: 0.2m, $max: 2.2){
  @include keyframes($anim) {
    0% {
      @include scale($min);
      opacity: 0.8;
    }
    80% {
      @include scale($max - 1);
      opacity: 0.2;
    }
    100% {
      @include scale($max);
      opacity: 0;
    }
  }  
}
@mixin pingLoop($duration:0.8s, $min:0.2, $max:2.2, $overwrite: false) {
  $anim: animationName(ping, $overwrite);
  @include pingKeyframes($anim, $min, $max);
  @include animation($anim, $duration, ease-in-out);
}
@mixin squashKeyframes($anim, $scale: 1, $ration: 0.5){
  @include keyframes($anim) {
    50% {
      @include prefix(transform, scale($scale * ($ratio + 1), $scale * (1 - $ratio)));
    } 
  }
}
@mixin squashLoop($duration: 1s, $scale: 1, $ratio: 0.5, $loops: infinite, $overwrite: false) {
  $anim: animationName(squash, $overwrite);
  @include squashKeyframes($anim, $scale, $ratio);
  @include animation($anim, $duration, ease, 0s, $loops);
}
@mixin shakeKeyframes($anim, $x: 2px, $y: 2px, $rotate: 2deg){
 @include keyframes($anim) {
    @for $i from 0 through 10 {
      $percent: $i * 10%;
      #{$percent} {
        @include transform(getRandom($x), getRandom($y), 1, getRandom($rotate));
      }
    }
  } 
}
@mixin shakeLoop($duration: 0.5s, $x: 2px, $y: 2px, $rotate: 2deg, $overwrite: false) {
  $anim: animationName(shake, $overwrite);
  @include shakeKeyframes($anim, $x, $y, $rotate);
  @include animation($anim, $duration);
  @include playAlternate;
}
@mixin orbitKeyframes($anim, $distance: 100px, $direction: 'cw'){
  $dir: 1;
  @if $direction not 'cw' {
    $dir: -1;
  }
  @include keyframes($anim) {
    0% {
      @include prefix(transform, rotate(0deg) translate3d($distance * -1, $distance * -1, 0) rotate(0deg));
    }
    100% {
      @include prefix(transform, rotate(360deg * $dir) translate3d($distance * -1, $distance * -1, 0) rotate(-360deg * $dir));
    }
  }
}
@mixin orbitLoop($duration: 1s, $distance: 100px, $direction: 'cw', $overwrite: false) {
  $anim: animationName(orbit, $overwrite);
  @include orbitKeyframes($anim, $distance: 100px, $direction: 'cw');
  @include animation($anim, $duration);
}
@mixin floatKeyframes($anim, $distance: 3px, $rotation: 0deg){
  @include keyframes($anim) {
    0%, 50%, 100% {
      @include transform(0, $distance * -1, 1, 0);
    }
    25% {
      @include transform(0, $distance, 1, $rotation);
    }
    75% {
      @include transform(0, $distance, 1, $rotation * -1);
    }
  }  
}
@mixin floatLoop($duration:5s, $distance: 3px, $rotation: 0deg, $overwrite: false) {
  $anim: animationName(float, $overwrite);
  @include floatKeyframes($anim, $distance, $rotation);
  @include animation($anim, $duration, ease-in-out);
}
@mixin swayKeyframes($anim, $angle: 5deg){
  @include keyframes($anim) {
    from {
      @include rotate(0);
    }
    50% {
      @include rotate($angle * -1);
    }
    to {
      @include rotate($angle);
    }
  }  
}
@mixin swayLoop($duration: 2s, $angle: 5deg, $overwrite: false) {
  $anim: animationName(sway, $overwrite);
  @include swayKeyframes($anim, $angle);
  @include animation($anim, $duration, ease-in-out);
  @include playAlternate;
}
@mixin zoomKeyframes($anim, $scalar: 2){
  @include keyframes($anim) {
    from {
      @include scale(1);
    }
    to {
      @include scale($scalar);
    }
  }  
}
@mixin zoomLoop($duration: 2s, $scalar: 2, $overwrite: false) {
  $anim: animationName(zoom, $overwrite);
  @include zoomKeyframes($anim, $scalar);
  @include animation($anim, $duration, ease-in-out);
  @include playAlternate;
}
@mixin moveKeyframes($anim, $x: 100%, $y: 100%){
  @include keyframes($anim) {
    from {
      @include translate(0, 0);
    }
    to {
      @include translate($x, $y);
    }
  }  
}
@mixin moveLoop($duration: 2s, $x: 100%, $y: 100%, $overwrite: false) {
  $anim: animationName(wander, $overwrite);
  @include movKeyframes($anim, $x, $y);
  @include animation($anim, $duration);
}
@mixin wanderKeyframes($anim, $stops: 5, $x: 100px, $y: 100px){
  @include keyframes($anim) {
    from, to {
      @include translate(0,0);
    }
    $inc: 100%/($stops + 1);
    @for $i from 1 through $stops {
      $percent: $inc * $i;
      #{$percent} {
        @include translate(getRandom($x),getRandom($y));
      }
    }
  }  
}
@mixin wanderLoop($duration: 2s, $stops: 5, $x: 100px, $y: 100px, $overwrite: false) {
  $anim: animationName(wander, $overwrite);
  @include wanderKeyframes($anim, $stops: 5, $x: 100px, $y: 100px);
  @include animation($anim, $duration);
}

///   +-+-+-+-+-+-+-+-+-+-+-+
///   |A|n|i|m|a|t|e|.|c|s|s|
///   +-+-+-+-+-+-+-+-+-+-+-+

@mixin bounceIn($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-in, false);
  @include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
      0% {
        opacity: 0;
        @include scale(0.3);
      }
      50% {
        opacity: 1;
        @include scale(1.05);
      }
      70% {
        @include scale(0.9);
      }
      100% {
        @include scale(1);
      }   
  }
}
@mixin bounceInDown($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-in-down, false);
  @include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
      0% {
        opacity: 0;
        @include y(-300px);
      }
      60% {
        opacity: 1;
        @include y(25px);
      }
      75% {
        @include y(-10px);
      }
      90% {
        @include y(5px);
      }
      100% {
        @include transformNone;
      }   
  }
}
@mixin bounceInUp($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-in-up, false);
  @include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
      0% {
        opacity: 0;
        @include y(300px);
      }
      60% {
        opacity: 1;
        @include y(-20px);
      }
      75% {
        @include y(10px);
      }
      90% {
        @include y(-5px);
      }
      100% {
        @include transformNone;
      }   
  }
}
@mixin bounceInLeft($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-in-left, false);
  @include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
      0% {
        opacity: 0;
        @include x(-300px);
      }
      60% {
        opacity: 1;
        @include x(25px);
      }
      75% {
        @include x(-10px);
      }
      90% {
        @include x(5px);
      }
      100% {
        @include transformNone;
      }   
  }
}
@mixin bounceInRight($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-in-right, false);
  @include simpleAnimation($anim, $duration, cubic-bezier(0.215, 0.610, 0.355, 1.000), $delay, 1, backwards, normal){
      0% {
        opacity: 0;
        @include x(300px);
      }
      60% {
        opacity: 1;
        @include x(-25px);
      }
      75% {
        @include x(10px);
      }
      90% {
        @include x(-5px);
      }
      100% {
        @include transformNone;
      }   
  }
}
@mixin bounceOut($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-out, false);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
    20% {
      @include scale(0.9);
    } 
    50%, 55% {
      opacity: 1;
      @include scale(1.1);
    }
    100% {
      opacity: 0;
      @include scale(0.3);
    }
  }
}
@mixin bounceOutDown($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-out-down, false);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
    20% {
      @include y(10px);
    }

    40%, 45% {
      opacity: 1;
      @include y(-20px);
    }

    100% {
      opacity: 0;
      @include y(2000px);
    }
  }
}
@mixin bounceOutUp($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-out-up, false);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
    20% {
      @include y(-10px);
    }

    40%, 45% {
      opacity: 1;
      @include y(20px);
    }

    100% {
      opacity: 0;
      @include y(-2000px);
    }
  }
}
@mixin bounceOutLeft($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-out-left, false);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
    20% {
      opacity: 1;
      @include x(20px);
    }
    100% {
      opacity: 0;
      @include x(-2000px);
    }
  }
}
@mixin bounceOutRight($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-bounce-out-right, false);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal){
    20% {
      opacity: 1;
      @include x(-20px);
    }
    100% {
      opacity: 0;
      @include x(2000px);
    }
  }
}
@mixin fadeInY($duration: 0.75s, $delay: 0s, $y:100%, $ease: ease){
  $anim: animationName(animate-css-fade-in-y, true);
  @include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include y($y);
    }
    100% {
      opacity: 1;
      @include transformNone;
    }    
  }
}
@mixin fadeInDown($duration: 0.75s, $delay: 0s){
  @include fadeInY($duration, $delay, -100%, ease-out);
}
@mixin fadeInDownBig($duration: 0.75s, $delay: 0s){
  @include fadeInY($duration, $delay, -2000px, ease-out);
}
@mixin fadeInUp($duration: 0.75s, $delay: 0s){
  @include fadeInY($duration, $delay, 100%, ease-out);
}
@mixin fadeInUpBig($duration: 0.75s, $delay: 0s){
  @include fadeInY($duration, $delay, 2000px, ease-out);
}
@mixin fadeInX($duration: 0.75s, $delay: 0s, $x:100%, $ease: ease){
  $anim: animationName(animate-css-fade-in-x, true);
  @include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include x($x);
    }
    100% {
      opacity: 1;
      @include transformNone;
    }    
  }
}
@mixin fadeInLeft($duration: 0.75s, $delay: 0s){
  @include fadeInX($duration, $delay, -100%, ease-out);
}
@mixin fadeInLeftBig($duration: 0.75s, $delay: 0s){
  @include fadeInX($duration, $delay, -2000px, ease-out);
}
@mixin fadeInRight($duration: 0.75s, $delay: 0s){
  @include fadeInX($duration, $delay, 100%, ease-out);
}
@mixin fadeInRightBig($duration: 0.75s, $delay: 0s){
  @include fadeInX($duration, $delay, 2000px, ease-out);
}
@mixin fadeOutY($duration: 0.75s, $delay: 0s, $y:100%, $ease: ease){
  $anim: animationName(animate-css-fade-out-y, true);
  @include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      @include y($y);
    }    
  }
}
@mixin fadeOutDown($duration: 0.75s, $delay: 0s){
  @include fadeOutY($duration, $delay, 100%, ease-in);
}
@mixin fadeOutDownBig($duration: 0.75s, $delay: 0s){
  @include fadeOutY($duration, $delay, 2000px, ease-in);
}
@mixin fadeOutUp($duration: 0.75s, $delay: 0s){
  @include fadeOutY($duration, $delay, -100%, ease-in);
}
@mixin fadeOutUpBig($duration: 0.75s, $delay: 0s){
  @include fadeOutY($duration, $delay, 2000px, ease-in);
}
@mixin fadeOutX($duration: 0.75s, $delay: 0s, $x:100%, $ease: ease){
  $anim: animationName(animate-css-fade-out-x, true);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
      @include x($x);
    }    
  }
}
@mixin fadeOutLeft($duration: 0.75s, $delay: 0s){
  @include fadeOutX($duration, $delay, -100%, ease-in);
}
@mixin fadeOutLeftBig($duration: 0.75s, $delay: 0s){
  @include fadeOutX($duration, $delay, -2000px, ease-in);
}
@mixin fadeOutRight($duration: 0.75s, $delay: 0s){
  @include fadeOutX($duration, $delay, 100%, ease-in);
}
@mixin fadeOutRightBig($duration: 0.75s, $delay: 0s){
  @include fadeOutX($duration, $delay, 2000px, ease-in);
}
@mixin flipInX($duration: 1s, $delay: 0s){
  $anim: animationName(animate-css-flip-in-x, false);
  @include prefix(backface-visibility, visible !important);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 90deg));
      @include prefix(animation-timing-function, ease-in);
    }
    40% {
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -20deg));
      @include prefix(animation-timing-function, ease-in);
    }
    60% {
      opacity: 1;
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 10deg));
    }
    80% {
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -5deg));
    }
    100% {
      @include prefix(transform, perspective(400px));
    }
  }
}
@mixin flipInY($duration: 1s, $delay: 0s){
  $anim: animationName(animate-css-flip-in-y, false);
  @include prefix(backface-visibility, visible !important);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 90deg));
      @include prefix(animation-timing-function, ease-in);
    }
    40% {
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -20deg));
      @include prefix(animation-timing-function, ease-in);
    }
    60% {
      opacity: 1;
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 10deg));
    }
    80% {
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -5deg));
    }
    100% {
      @include prefix(transform, perspective(400px));
    } 
  }
}
@mixin flipOutX($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-flip-out-x, false);
  @include prefix(backface-visibility, visible !important);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
    0% {
      @include prefix(transform, perspective(400px));
    }
    30% {
      opacity: 1;
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, -20deg));
    }
    100% {
      opacity: 0;
      @include prefix(transform, perspective(400px) rotate3d(1, 0, 0, 90deg));
    }
  }
}
@mixin flipOutY($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-flip-out-y, false);
  @include prefix(backface-visibility, visible !important);
  @include simpleAnimation($anim, $duration, ease, $delay, 1, forwards, normal) {
    0% {
      @include prefix(transform, perspective(400px));
    }
    30% {
      opacity: 1;
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, -20deg));
    }
    100% {
      opacity: 0;
      @include prefix(transform, perspective(400px) rotate3d(0, 1, 0, 90deg));
    }
  }
}
@mixin lightSpeedIn($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-light-speed-in, false);
  @include simpleAnimation($anim, $duration, ease-out, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include prefix(transform, translate3d(100%, 0, 0) skewX(-30deg));
    }
    60% {
      opacity: 1;
      @include prefix(transform, skewX(20deg));
    }
    80% {
      @include prefix(transform, skewX(-5deg));
    }
    100% {
      @include prefix(transform, translate3d(0, 0, 0));
    }
  }
}
@mixin lightSpeedOut($duration: 0.75s, $delay: 0s){
  $anim: animationName(animate-css-light-speed-out, false);
  @include simpleAnimation($anim, $duration, ease-in, $delay, 1, forwards, normal) {
    0% {
      opacity: 1;
    }
    100%{
      opacity: 0;
      @include prefix(transform, translate3d(100%, 0, 0) skewX(30deg));
    }
  }
}
@mixin rotateIn($duration: 0.75s, $delay: 0s, $ease:ease, $deg: -200deg, $to: "center", $name: animate-css-rotate-in){
  $anim: animationName($name, false);
  @include transformOrigin($to);
  @include simpleAnimation($anim, $duration, $ease, $delay, 1, backwards, normal) {
    0% {
      opacity: 0;
      @include rotate($deg);
    }
    
    100% {
      opacity: 1;
      @include rotate(0deg);
    }
  }
}
@mixin rotateOut($duration: 0.75s, $delay: 0s, $ease:ease, $deg: 200deg, $to: "center", $name: animate-css-rotate-out){
  $anim: animationName($name, false);
  @include transformOrigin($to);
  @include simpleAnimation($anim, $duration, $ease, $delay, 1, forwards, normal) {
    0% {
      opacity: 1;
    }
    100%{
      opacity: 0;
      @include rotate($deg);
    }
  }
}
@mixin rotateInDownLeft($duration: 0.75s, $delay: 0s){
  @include rotateIn($duration, $delay, ease-in, -45deg, "bottom-left", animate-css-rotate-in-down-left);
}
@mixin rotateInDownRight($duration: 0.75s, $delay: 0s){
  @include rotateIn($duration, $delay, ease-in, 45deg, "bottom-right", animate-css-rotate-in-down-right);
}
@mixin rotateInUpLeft($duration: 0.75s, $delay: 0s){
  @include rotateIn($duration, $delay, ease-in, 45deg, "top-left", animate-css-rotate-in-up-left);
}
@mixin rotateInUpRight($duration: 0.75s, $delay: 0s){
  @include rotateIn($duration, $delay, ease-in, -90deg, "top-right", animate-css-rotate-in-up-right);
}
@mixin rotateOutDownLeft($duration: 0.75s, $delay: 0s){
  @include rotateOut($duration, $delay, ease-out, -45deg, "bottom-left", animate-css-rotate-out-down-left);
}
@mixin rotateOutDownRight($duration: 0.75s, $delay: 0s){
  @include rotateOut($duration, $delay, ease-out, 45deg, "bottom-right", animate-css-rotate-out-down-right);
}
@mixin rotateOutUpLeft($duration: 0.75s, $delay: 0s){
  @include rotateOut($duration, $delay, ease-out, 45deg, "top-left", animate-css-rotate-out-up-left);
}
@mixin rotateOutUpRight($duration: 0.75s, $delay: 0s){
  @include rotateOut($duration, $delay, ease-out, -90deg, "top-right", animate-css-rotate-out-up-right);
}

//   +-+-+-+-+-+ +-+-+-+-+-+-+-+-+-+
//   |C|l|i|c|k| |r|e|a|c|t|i|o|n|s|
//   +-+-+-+-+-+ +-+-+-+-+-+-+-+-+-+

///https://github.com/webkul/micron

@mixin actionPop($duration:1s, $delay:0s){
  $anim: animationName(click-pop, false);
  @include simpleAnimation($anim, $duration, ease("ease-out"), $delay, 1, none, normal){
    0%, 100% {
      @include prefix(transform, scaleX(1) scaleY(1));
    }
    20%, 45% {
      @include prefix(transform, scaleX(1.35) scaleY(0.1));
    }
    65% {
      @include prefix(transform, scaleX(0.8) scaleY(1.7));
    }
    80% {
      @include prefix(transform, scaleX(0.6) scaleY(0.85));
    } 
  }
}

///   +-+-+-+-+ +-+-+-+-+-+-+-+-+-+-+
///   |T|e|x|t| |a|n|i|m|a|t|i|o|n|s|
///   +-+-+-+-+ +-+-+-+-+-+-+-+-+-+-+

///Animations by https://codepen.io/kh-mamun/

@mixin _txtAnimation($name, $chars, $duration: 1s, $ease: linear, $delay: 0s, $loops: 1) {
  & > span {
    display: inline-block;
    @include animation($name, $duration, $ease, $delay, $loops);
    @include animationFill;
    @include staggerChildrenAnimations($chars, time($XS), $delay);
  }
}
@mixin revolve-scaleKeyframes(){
  @include keyframes(revolve-scaleLoop) {
    0% {
      opacity: 0;
      @include transform(-150px, -50px, 3, -180deg);
    }
    60% {
      @include transform(20px, 20px, .3, 30deg);
    }
    100% {
      opacity: 1;
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin revolveScaleText($chars:10, $duration: 1s, $delay: 0s) {
  @include revolve-scaleKeyframes;
  @include _txtAnimation(revolve-scaleLoop, $chars, $duration, linear, $delay);
}
@mixin ball-dropKeyframes(){
  @include keyframes(ball-dropLoop) {
    0% {
      opacity: 0;
      @include transform(200px, -100px, 2, 0);
    }
    60% {
      @include transform(0, 20px, .5, -180deg);
    }
    100% {
      opacity: 1;
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin ballDropText($chars:10, $duration: 1s, $delay: 0s) {
  @include ball-dropKeyframes;
  @include _txtAnimation(ball-dropLoop, $chars, $duration, linear, $delay);
}
@mixin side-slideKeyframes(){
  @include keyframes(side-slideLoop) {
    0% {
      opacity: 0;
      @include transform(-300px, 0, 0, 0);
    }
    60%, 80% {
      @include transform(20px, 0, 1, 0);
    }
    99% {
      @include transform(0,0,1.2,0);
    }
    100% {
      opacity: 1;
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin sideSlideText($chars:10, $duration: 1s, $delay: 0s) {
  @include side-slideKeyframes;
  @include _txtAnimation(side-slideLoop, $chars, $duration, linear, $delay);
}
@mixin revolve-dropKeyframes{
  @include keyframes(revolve-dropLoop) {
    0% {
      opacity: 0;
      @include transform(0, -100px, 0, 360deg);
    }
    30% {
      @include transform(0, -50px, 1, 180deg);
    }
    60% {
      @include transform(0, 20px, .8, 0);
    }
    100% {
      opacity: 1;
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin revolveDropText($chars:10, $duration: 1s, $delay: 0s) {
  @include revolve-dropKeyframes;
  @include _txtAnimation(revolve-dropLoop, $chars, $duration, linear, $delay);
}
@mixin drop-vanishKeyframes(){
  @include keyframes(drop-vanishLoop) {
    0% {
      opacity: 0;
      @include transform(0, -100px, 0, 360deg);
    }
    30% {
      @include transform(0, -50px, 1, 180deg);
    }
    50% {
      opacity: 1;
      @include transform(0, 20px, .8, 0deg);
    }
    80% {
      opacity: 0;
      @include transform(-100px, -100px, 1.5, -180deg);
    }
    100% {
      opacity: 1;
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin dropVanishText($chars:10, $duration: 1s, $delay: 0s) {
  @include drop-vanishKeyframes();
  @include _txtAnimation(drop-vanishLoop, $chars, $duration, linear, $delay);
}
@mixin twisterKeyframes {
  @include keyframes(twister-textLoop) {
    0% {
      opacity: 0;
      @include transform(150px, 0, 1, -180deg);
    }
    10% {
      opacity: 1;
    }
    100% {
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin twisterText($chars:10, $duration: 1s, $delay: 0s) {
  @include twisterKeyframes;
  @include _txtAnimation(twister-textLoop, $chars, $duration, linear, $delay);
}
@mixin left-to-rightKeyframes {
  @include keyframes(left-to-rightKeyframes) {
    0% {
      opacity: 0;
      @include transform(-150px,0,.3);
    }
    40% {
      opacity: 1;
      @include transform(50px,0,.7);
    }
    80% {
      opacity: 0;
      @include transform(0,0,2);
    }
    100% {
      @include transform(0, 0, 1, 0);
    }
  }
}
@mixin leftToRightText($chars:10, $duration: 1s, $delay: 0s) {
  @include left-to-rightKeyframes();
  @include _txtAnimation(left-to-rightKeyframes, $chars, $duration, linear, $delay);
}
//3D TRANSFORM
@mixin transformable3D($transform, $t-origin: null, $p-origin: null, $perspective: 400px, $backface: hidden) {
  @include prefix(backface-visibility, $backface);
  @if $t-origin{
    @include prefix(transform-origin, $t-origin);
  }
  @if $p-origin{
    @include prefix(perspective-origin, $p-origin);
  }
  @include prefix(transform, perspective($perspective) $transform);
}
@mixin card--3D{
  @include transformable3D(translate3d(0, -100px, -100px) rotateX(90deg), position("bottom"), position("center"), 300px);
}
@mixin flip--3D{
  @include transformable3D(rotateY(1turn), null, null, 500px)
}
@mixin page-bottom--3D{
  @include transformable3D(rotateX(90deg), position("center"));
}

///   +-+-+-+-+-+-+-+-+ +-+-+
///   |T|i|m|e|l|i|n|e| |v|1|
///   +-+-+-+-+-+-+-+-+ +-+-+

$timeline-duration: 15s;
@function timelineDuration($val: 15s) {
  $timeline-duration: $val !global;
}
@mixin timelineDuration($val: 15s) {
  $temp: timelineDuration($val);
}
$timeline-position: 0s;
@function timeline($increment: 0s) {
  $timeline-position: $timeline-position + $increment !global;
  @return $timeline-position * $time-scale;
}
$slide-duration: 2s;
@function slideDuration($val:$slide-duration) {
  $slide-duration: $val !global;
  @return $slide-duration;
}
@mixin slideDuration($val) {
  $temp: slideDuration($val);
}
@mixin slideAmount($val){
  $temp: slideDuration($timeline-duration/$val);
}
$intro-duration: 0.5s;
$outro-duration: 0.3s;
@function playhead($increment: 0s, $dir: 1, $reduceSlide: false){
  $inc: 0;
  @if $increment == "intro"{
    $inc: $intro-duration;
  }@else if $increment == "outro"{
    $inc: $outro-duration;
  }@else if $increment == "slide"{
    @if($reduceSlide){
      $inc: ($slide-duration - ($intro-duration + $outro-duration));
    }@else{
      $inc: $slide-duration;
    }
  }@else if $increment == "none"{
    $inc: 0s;
  }@else {
    $inc: $increment;
  }
  $inc: $inc * $dir;
  $timeline-position: $timeline-position + $inc !global;
  @if $timeline-position > $timeline-duration {
    @return $timeline-duration;
  }
  @return $timeline-position * $time-scale;
}
@mixin currentAnimationDuration(){
  @include prefix(animation-duration, $timeline-position);
}
@function ff($inc, $overlap: true){
  @return playhead($inc, 1, $overlap);
}
@function rw($inc, $overlap: true){
  @return playhead($inc, -1, true);
}
@function keyframePercent($position) {
  @return round(($position/$timeline-duration) * 1000)/1000 * 100%;
}
@mixin keyframePercent($position, $fromTo: null) {
  @if $fromTo {
    #{unquote($fromTo)}, #{keyframePercent($position)} {
      @content;
    }
  }
  @else {
    #{keyframePercent($position)} {
      @content;
    }
  }
}
@mixin timelineToKeyframes($timeline) {
  $len: length($timeline);
  $i: 0;
  @each $time, $css in $timeline {
    $i: $i + 1;
    @if $i == 1 {
      @if($time == 0s){
        @include keyframePercent($time) {
          @include transformObject($css);
        }  
      }@else {
        @include keyframePercent($time, "0%") {
          @include transformObject($css);
        }
      }
    }
    @else if $i == $len {
      @if($time < $timeline-duration){
        @include keyframePercent($time, "100%") {
          @include transformObject($css);
        }  
      }@else {
        @include keyframePercent($time) {
          @include transformObject($css);
        }
      }
    }
    @else {
      @include keyframePercent($time) {
        @include transformObject($css);
      }
    }
  }
}
@mixin timelineAnimation($name, $keyframes, $ease: ease, $loops: 1){
  @include keyframes($name){
    @include timelineToKeyframes($keyframes);
  }
  @include animationBase($name, $timeline-duration, $ease, 0s, $loops);
  @include animationFill;
}
//preset objects
$slide-left--transform: (opacity: 0, x: -100%);
$slide-right--transform: (opacity: 0, x: 100%);
$slide-top--transform: (opacity: 0, y: -100%);
$slide-bottom--transform: (opacity: 0, y: 100%);
$scale-in--transform: (opacity: 0, scale: 0);
$scale-out--transform: (opacity: 0, scale: 2);
$rotate-in--transform: (opacity: 0, rotate: 90deg);
$rotate-out--transform: (opacity: 0, rotate: -90deg);
$spin-in--transform: (opacity: 0, rotate: 2turn, scale: 0.7);
$spin-out--transform: (opacity: 0, rotate: -2turn, scale: 1.3);
$fade--transform: (opacity: 0);
$reset--transform: (opacity: 1, transform: "none");

@mixin slide($intro, $outro:null, $overlap: true){
  $_frames: (ff("none"): $intro); 
  $_frames: join($_frames, (ff("intro"): $reset--transform));
  @if $outro{
    $_frames: join($_frames, (ff("slide", $overlap): $reset--transform));
    $_frames: join($_frames, (ff("outro"): $outro));
  }
  @include timelineAnimation(animationName("element-animation", true), $_frames); 
}
$slide-in-down--timeline: (
  0s: (y: -150%, origin: 50% 100%, opacity: 0), 
  0.25s: (y:0, rotate: 1deg), 
  0.35s: (y:0, rotate: -1deg),
  0.425s: (y: 0, rotate: 1deg),
  0.475s: (y: 0, rotate: -1deg),
  0.5s: (y: 0, opacity: 1)
);
$slide-out-up--timeline: (
  0.5: (y: 150%, opacity: 0)
);
@function offsetTimeline($keyframes, $offset: 0s){
  $final: ();
  @each $time, $map in $keyframes {
    $nootime: ($time + $offset);
    $noomap: ($nootime: $map);
    $final: map-merge($final, $noomap);
  }
  @return $final;
}
/***
 *     +-+-+-+-+-+-+-+-+ +-+-+ 
 *     |T|i|m|e|l|i|n|e| |v|2| 
 *     +-+-+-+-+-+-+-+-+ +-+-+ 

@mixin moveTimeline($increment:0s) {
  @include prefix(animation-delay, timeline($increment));
}

$in-duration: 0.5s;
$out-duration: 0.3s;
$entrance-ease: ease-out;
$exit-ease: ease-in;
@mixin entranceSettings($duration: 0.5s, $ease: ease-out) {
  $in-duration: $duration !global;
  $entrance-ease: $ease !global;
}
@mixin exitSettings($duration: 0.5s, $ease: ease-in) {
  $out-duration: $duration !global;
  $exit-ease: $ease !global;
}
@function nextSlide() {
  $timeline-position: $timeline-position + $slide-duration !global;
  @return $timeline-position;
}
@mixin nextSlide() {
  $temp: nextSlide();
}
@mixin multipleAnimations($intro, $outro, $duration: $slide-duration, $delay: 0s) {
  $t1: timeline() + $delay;
  $t2: $t1 + $delay + $duration;
    @include prefix(animation, unquote($intro + " " + $in-duration + " " + $entrance-ease + " " + $t1 + " backwards" + ", " + $outro + " " + $out-duration  + " " + $exit-ease + " " + $t2 + " forwards"));

}*/


///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
///   |A|n|i|m|a|t|i|o|n| |p|r|e|s|e|t|s|
///   +-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
///   +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |I|n|t|e|r|a|c|t|i|v|e| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+

$children: '>';
$sibling: '~';
$adjacent: '+';
$checked: 'checked';
$notChecked: 'notChecked';
$active: 'active';
$link: 'link';
$hover: 'hover';
$focus: 'focus';
$target: 'target';
$visited: 'visited';
$mouseover: 'mouseover';
@mixin onEvent($event, $currentTarget, $target:null, $mouseOn:'') {
  @if $target == null or $currentTarget == $target {
    @if $event == $mouseover {
      #{unquote($currentTarget)}:hover, #{unquote($currentTarget)}:focus {
        @content;
        cursor: pointer;
      }
    }
    @else if $event == $checked {
      #{unquote($currentTarget)}:checked {
        @content;
      }
    }
    @else if $event == $notChecked {
      #{unquote($currentTarget)}:not(:checked) {
        @content;
      }
    }
    @else {
      #{unquote($currentTarget)}:#{$event} #{unquote($target)} {
        @content;
      }
    }
  }
  @else {
    @if $event == $mouseover {
      @if $mouseOn == $children {
        #{$currentTarget}:hover > #{$target},
        #{$currentTarget}:focus > #{$target} {
          @content;
          cursor: pointer;
        }
      }
      @else if $mouseOn == $sibling {
        #{$currentTarget}:hover ~ #{$target},
        #{$currentTarget}:focus ~ #{$target} {
          @content;
          cursor: pointer;
        }
      }
      @else if $mouseOn == $adjacent {
        #{$currentTarget}:hover + #{$target},
        #{$currentTarget}:focus + #{$target} {
          @content;
          cursor: pointer;
        }
      }
      @else {
        #{$currentTarget}:hover #{$target}, #{$currentTarget}:focus #{$target} {
          @content;
          cursor: pointer;
        }
      }
    }
    @else if $event == $checked {
      @if $mouseOn == $children {
        #{unquote($currentTarget)}:checked > #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $sibling {
        #{unquote($currentTarget)}:checked ~ #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $adjacent {
        #{unquote($currentTarget)}:checked + #{$target} {
          @content;
        }
      }
      @else {
        #{unquote($currentTarget)}:checked #{$target} {
          @content;
        }
      }
    }
    @else if $event == $notChecked {
      @if $mouseOn == $children {
        #{unquote($currentTarget)}:not(:checked) > #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $sibling {
        #{unquote($currentTarget)}:not(:checked) ~ #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $adjacent {
        #{unquote($currentTarget)}:not(:checked) + #{$target} {
          @content;
        }
      }
      @else {
        #{unquote($currentTarget)}:not(:checked) #{$target} {
          @content;
        }
      }
    }
    @else {
      @if $mouseOn == $children {
        #{unquote($currentTarget)}:#{unquote($event)} > #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $sibling {
        #{unquote($currentTarget)}:#{unquote($event)} ~ #{$target} {
          @content;
        }
      }
      @else if $mouseOn == $adjacent {
        #{unquote($currentTarget)}:#{unquote($event)} + #{$target} {
          @content;
        }
      }
      @else {
        #{unquote($currentTarget)}:#{unquote($event)} #{$target} {
          @content;
        }
      }
    }
  }
}
@mixin noClick() {
  pointer-events: none;
}
@mixin allowClick() {
  pointer-events: auto;
}
@mixin noTapDelay() {
  /*<meta name="viewport" content="width=device-width">*/
  touch-action: manipulation;
}
@mixin button($from: color('red'), $to: color('white'), $radius: 'md', $thickness: 2px) {
  background-color: $from;
  color: $to;
  border: $thickness solid $to;
  @include borderRadius('pill');
  @include hover {
    background-color: $to;
    color: $from;
    border: $thickness solid $from;
  }
}
///Mixin to add hover events
///
///@param {Element} $currentTarget - Element receiving the interaction from #banner
///
///@example scss - Interacting with the '.cta'
/// @include onRollOver('.cta'){
///     background-color: #F000;
/// }
@mixin onRollOver($currentTarget) {
  @include onEvent($mouseover, #banner, $currentTarget, $children);
}
///.test{
///  @include hover(1s, $bounce, 0.3s) {
///    font-size: 48px;
///  }
///}
@mixin hover($duration:time($NORMAL), $ease:ease, $delay:time($NONE)) {
  @include transitionAll($duration, $ease, $delay);
  &:hover {
    @content;
  }
}

///   +-+-+-+-+-+-+-+-+-+-+
///   |L|o|a|d|i|n|g|.|.|.|
///   +-+-+-+-+-+-+-+-+-+-+

@mixin loading() {
  &:after {
    content: '.';
    @include keyframes(loading-dots) {
      60% {
        text-shadow: 0.35em 0 0 currentColor;
      }
      100% {
        text-shadow: 0.35em 0 0 currentColor, 0.75em 0 0 currentColor;
      }
    }
    animation: loading-dots 1s ease alternate infinite;
  }
}

///   +-+-+-+-+-+
///   |s|h|e|e|n|
///   +-+-+-+-+-+

@mixin sheen($duration: 2s, $rotation: -60deg) {
  //Hide the sheen
  overflow: hidden;
  &:after {
    content: '';
    position: absolute;
    display: block;
    top: -50%;
    right: -50%;
    bottom: -50%;
    left: -50%;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.8) 50%,
      rgba(255, 255, 255, 0) 100%
    );
    @include prefix(transform, translate(-100%, 0) rotate($rotation) );
  }
  &:hover:after, &:focus:after {
    @include transition($duration, ease);
    @include prefix(transform, translate(100%, 0) rotate($rotation));
  }
}


///   +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+
///   |D|e|v|e|l|o|p|m|e|n|t| |m|i|x|i|n|s|
///   +-+-+-+-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+


@mixin invisibleButton($alpha:0, $color: #00FFFF, $border: #FF00FF) {
  position: absolute;
  display: block;
  border: 1px solid $border;
  background-color: $color;
  opacity: $alpha;
  cursor: pointer;
}
@mixin fixSafariFlicker{
	@at-root{
		* {
			@include prefix(transform-style, preserve-3d);
			@include prefix(backface-visibility, hidden);
		}
	}
}

///   +-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+
///   |P|a|r|t|i|c|l|e| |s|y|s|t|e|m|s|
///   +-+-+-+-+-+-+-+-+ +-+-+-+-+-+-+-+

@mixin position($left: 0, $top: 0){
  left: $left;
  top: $top;
}
@mixin positionGrid($positions){
  $i: 1;
  @each $pos in $positions {
    &:nth-child(#{$i}){
      $obj: nth($positions, $i);
      @include position(map-get($obj, x), map-get($obj, y));
    }
    $i: $i + 1;
  }
}
@mixin particleSystem($positions, $delay: time($XS), $initial: 0s, $min: 0, $max: 0){
  $i: 1;
  @each $pos in $positions {
    &:nth-child(#{$i}){
      $obj: nth($positions, $i);
      @include position(map-get($obj, x), map-get($obj, y));
      @if $delay not 0 {
        @include prefix(animation-delay, ($delay * $i * $time-scale) + $initial);
      }
      @if $min != $max {
        @include prefix(animation-duration, (random() * $max + $min) * 1s * $time-scale);
      }
    }
    $i: $i + 1;
  }  
}
@function grid($cols: 1, $rows: 1, $hSpace: 10px, $vSpace: 10px, $x: 0px, $y: 0px){
  $positions: ();
  @for $i from 1 through $rows{
    @for $ii from 1 through $cols{
      $noo-point: (x: ($ii * $hSpace + $x), y: ($i * $vSpace + $y));
      $positions: append($positions, $noo-point);
    }
  }
  @return $positions;
}
@mixin grid($cols: 1, $rows: 1, $hSpace: 10px, $vSpace: 10px, $x: 0px, $y: 0px){
  $positions: grid($cols, $rows, $hSpace, $vSpace, $x, $y); 
  @include positionGrid($positions);
}
@function matrixGrid($qty, $matrix, $width: $_bannerWidth, $height: $_bannerHeight, $x: 0, $y: 0){
  $positions: ();
  $i: $qty;
  $lx: length($matrix);
  $ly: length(nth($matrix, 1));
  @while $i > 0 {
    $rx: random() * $lx;
    $ry: random() * $ly;
    $cx: ceil($rx);
    $cy: ceil($ry);
    @debug $cx;
    @debug $cy;
    $row: nth($matrix, $cx);
    $col: nth($row, $cy); 
    @if $col != 0{
      $positions: append($positions, (x: round($ry / $ly * $width + $x) * 1px, y: round($rx / $lx * $height + $y) * 1px));
      $i: $i - 1;
    }
  }
  @return $positions;
}
@mixin matrixGrid($qty, $matrix, $width: $_bannerWidth, $height: $_bannerHeight, $x: 0, $y: 0){
  $positions: matrixGrid($qty, $matrix, $width, $height, $x, $y); 
  @include positionGrid($positions);
}
@function randomGrid($qty: 5, $rect: (-50, -50, 50, 50)){
  $positions: ();
  @for $i from 1 through $qty {
    $positions: append($positions, (x: getRandomRange(nth($rect,1), nth($rect,3)) * 1px, y: getRandomRange(nth($rect,2), nth($rect,4)) * 1px));
  }
  $positions: append($positions, nth($positions, 1));
  @return $positions;
}
@mixin randomGrid($qty: 5, $rect: (-50, -50, 50, 50)){
  $positions: randomGrid($qty, $rect);
  @include positionGrid($positions);
}

///   +-+-+
///   |3|D|
///   +-+-+

$cube-sides: (
  front: "rotateY(0deg)",
  right: "rotateY(-90deg)",
  left: "rotateY(90deg)",
  back: "rotateY(-180deg)",
  top: "rotateX(-90deg)",
  bottom: "rotateX(90deg)"
);
@function rotate3D($face:"front") {
  @if map-has-key($cube-sides, $face) {
    @return map-get($cube-sides, $face);
  }
  @return map-get($cube-sides, "front");
}
@function position3D($size: 100px, $face: "front") {
  @return "translateZ(" + ($size/2 * -1) + ") " + rotate3D($face);
}
@mixin side3D(){
  
}
@mixin createCube($sides: 2, $width:100px, $height:50px, $x: 0, $y: 0, $perspective: 1000px, $name: ".cube") {
  /* EMMET command .cube>ul>li*4 */
  @at-root {
    #{unquote($name)} {
      perspective: 1000px;
      position: absolute;
      display: block;
      top: $y;
      left: $x;
      width: $width;
      height: $height;
      box-sizing: border-box;
      ///transform: ;
      ///DEV
      ///border: 1px solid red;
    }
    //front, right, left, back, top, right
    $show-sides-transform: (
      position3D($width, "front"),
      position3D($width, "right"),
      position3D($width, "left"),
      position3D($width, "back"),
      position3D($width, "top"),
      position3D($width, "bottom")
    );
    #{unquote($name)} > ul {
      margin: 0;
      padding: 0;
      list-style: none;
      transform-style: preserve-3d;
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      @include prefix(transition, 1s ease("swing"));
      @include prefix(transform, unquote(nth($show-sides-transform, 1)));
    }
    #{unquote($name)}.front > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 1)));
    }
    #{unquote($name)}.right > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 2)));
    }
    #{unquote($name)}.left > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 3)));
    }
    #{unquote($name)}.back > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 4)));
    }
    #{unquote($name)}.top > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 5)));
    }
    #{unquote($name)}.bottom > ul {
      @include prefix(transform, unquote(nth($show-sides-transform, 6)));
    }
    #{unquote($name)} > ul > li {
      backface-visibility: hidden;
      position: absolute;
      display: block;
      list-style-type: none;
      overflow: hidden;
      backface-visibility: hidden;
      margin: 0;
      padding: 0;
      top: 0;
      left: 0;
      width: $width;
      height: $height;
      box-sizing: border-box;
      ///DEV
      border: 1px solid #CCCCCC;
      background-color: #FFFFFF;
      ///Create sides
      $trans-z: " translateZ(" + $width/2 + ")";
      $sides-transform: (
        "rotateY(0deg)" + $trans-z,
        "rotateY(90deg)" + $trans-z,
        "rotateY(180deg)" + $trans-z,
        "rotateY(-90deg)" + $trans-z,
        "rotateX(90deg)" + $trans-z,
        "rotateX(-90deg)" + $trans-z
      );
      @for $i from 1 through $sides {
        &:nth-child(#{$i}) {
          @include prefix(transform, unquote(nth($sides-transform, $i)));
        }
      }
    }
  }
}
@mixin interactiveCube($name: ".cube") {
  @at-root {
    #{unquote($name)} > ul {
      cursor: pointer;
      &:hover {
        @content;
      }
    }
  }
}  
///    _____   _____  
///   / __\ \ / / __| 
///   \__ \\ V / (_ | 
///   |___/ \_/ \___| 
///                   
///https://codepen.io/noahblon/pen/qEByrR?editors=0100
//<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M0 0h24v24H0z"/>
//
///  Function to create an optimized svg url
//
///https://codepen.io/jakob-e/pen/doMoML?editors=0110
@function svg-url($svg){
    //
    ///  Add missing namespace
    //
    @if not str-index($svg,xmlns) {
        $svg: str-replace($svg, '<svg','<svg xmlns="http://www.w3.org/2000/svg"');   
    }        
    ///    
    ///  Chunk up string in order to avoid 
    ///  "stack level too deep" error
    ///     
    $encoded:'';
    $slice: 2000;
    $index: 0;
    $loops: ceil(str-length($svg)/$slice);
    @for $i from 1 through $loops {
        $chunk: str-slice($svg, $index, $index + $slice - 1); 
        //
        ///   Encode 
        //
        $chunk: str-replace($chunk,'"', '\'');
        $chunk: str-replace($chunk,'%', '%25');
        $chunk: str-replace($chunk,'&', '%26');
        $chunk: str-replace($chunk,'#', '%23');       
        $chunk: str-replace($chunk,'{', '%7B');
        $chunk: str-replace($chunk,'}', '%7D');         
        $chunk: str-replace($chunk,'<', '%3C');
        $chunk: str-replace($chunk,'>', '%3E');
        
        /// 
        ///    The maybe list 
        //
        ///    Keep size and compile time down
        ///    ... only add on documented fail 
        /// 
        ///  $chunk: str-replace($chunk, '|', '%7C');
        ///  $chunk: str-replace($chunk, '[', '%5B');
        ///  $chunk: str-replace($chunk, ']', '%5D');
        ///  $chunk: str-replace($chunk, '^', '%5E');
        ///  $chunk: str-replace($chunk, '`', '%60');
        ///  $chunk: str-replace($chunk, ';', '%3B');
        ///  $chunk: str-replace($chunk, '?', '%3F');
        ///  $chunk: str-replace($chunk, ':', '%3A');
        ///  $chunk: str-replace($chunk, '@', '%40');
        ///  $chunk: str-replace($chunk, '=', '%3D');      
        
        $encoded: #{$encoded}#{$chunk};
        $index: $index + $slice; 
    }
    @return url("data:image/svg+xml,#{$encoded}");   
}
        
///  Background svg mixin          
@mixin background-svg($svg){
    background-image: svg-url($svg);        
}        
            
///  Helper function to replace characters in a string
@function str-replace($string, $search, $replace: '') {
    $index: str-index($string, $search); 
    @return if($index, 
        str-slice($string, 1, $index - 1) + $replace + 
        str-replace(str-slice($string, $index + 
        str-length($search)), $search, $replace), 
        $string); 
}
@mixin icon($id, $color: #000, $borderColor: transparent, $border: 0, $css: ""){
  $SVG : (
    play: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M4.2 2v20l15.7-10L4.2 2z"/>',
    pause: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M3.4 22h5.7V2H3.4v20zM14.9 2v20h5.7V2h-5.7z"/>',
    stop: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 2h20v20H2V2z"/>',
    replay: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 6V2L7 7l5 5V8c3.3 0 6 2.7 6 6s-2.7 6-6 6-6-2.7-6-6H4c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8z"/>',
    rew: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12.5 2v9.1l9-9.1v20l-9.1-9.1V22l-10-10L12.5 2z"/>',
    ff: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M11.5 22v-9.1l-9 9.1V2l9.1 9.1V2l10 10-10.1 10z"/>',
    first: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 22V2h3.3v9.2l8.3-8.3v8.3L22 2.8v18.3l-8.3-8.3v8.3l-8.3-8.3V22H2z"/>',
    last: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 2v20h-3.3v-9.2l-8.3 8.3v-8.3L2 21.2V2.8l8.3 8.3V2.8l8.3 8.3V2H22z"/>',
    prev: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M6.2 22V2h3.3v9.2l8.3-8.3v18.3l-8.3-8.3V22H6.2z"/>',
    next: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M17.8 2v20h-3.3v-9.2l-8.3 8.3V2.8l8.3 8.3V2h3.3z"/>',
    sound: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M1.7 8.6v6.8h4.6l5.7 5.7V2.9L6.3 8.6H1.7zM17.1 12c0-1.9-1.1-3.7-2.9-4.6v9.2c1.8-.8 2.9-2.6 2.9-4.6zM14.3 2v2.3c3.3 1 5.7 4 5.7 7.7s-2.4 6.7-5.7 7.7V22c4.6-1 8-5.1 8-10s-3.4-9-8-10z"/>',
    sound-on: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.4 19.5c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6 1.6-1.6 2.5-3.8 2.5-6s-.9-4.4-2.5-6c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0c1.9 1.9 3 4.5 3 7.3s-1.1 5.3-3 7.3c-.2 0-.4.1-.6.1zm-3.2-1.6c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6C17 14 17 10 14.6 7.6c-.3-.3-.3-.9 0-1.2s.9-.3 1.2 0c1.5 1.5 2.3 3.5 2.3 5.6s-.8 4.1-2.3 5.6c-.1.2-.3.3-.6.3zm-3.1-1.7c-.5 0-.9-.4-.9-.9 0-.2.1-.5.3-.6 1.5-1.5 1.5-3.9 0-5.4-.3-.3-.3-.9 0-1.2.3-.3.9-.3 1.2 0 2.2 2.2 2.2 5.7 0 7.9-.1.1-.4.2-.6.2z"></path><path d="M9.6 20.2c-.2 0-.3-.1-.4-.2l-4.5-4.5H2.6c-.3 0-.6-.3-.6-.6V9.1c0-.3.3-.6.6-.6h2.1L9.2 4c.2-.2.6-.2.8 0 .1.1.2.3.2.4v15.3c0 .3-.2.5-.6.5z"/>',
    sound-off: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.6 20.2c-.2 0-.3-.1-.4-.2l-4.5-4.5H2.6c-.3 0-.6-.3-.6-.6V9.1c0-.3.3-.6.6-.6h2.1L9.2 4c.2-.2.6-.2.8 0 .1.1.2.3.2.4v15.3c0 .3-.2.5-.6.5z"/>',
    mute: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M1.7 8.6v6.8h4.6l5.7 5.7V2.9L6.3 8.6H1.7zm18.5 5.1V15h-1.3l-1.7-1.7-1.6 1.7h-1.3v-1.3L16 12l-1.7-1.7V9h1.3l1.7 1.7L18.9 9h1.3v1.3L18.6 12l1.6 1.7z"/>',
    mouse: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.2 13.6c.2.2.3.5.2.8-.1.3-.3.4-.7.4h-4.3l2.2 5.3c.1.2.1.4 0 .5-.1.2-.2.3-.4.4l-2 .8c-.2.1-.4.1-.5 0-.2-.1-.3-.2-.4-.4l-2.1-5L6.8 20c-.1.1-.3.2-.5.2-.1 0-.2 0-.3-.1-.3-.1-.4-.3-.4-.7V2.7c0-.3.1-.5.4-.7h.3c.2 0 .4.1.5.2l11.4 11.4z"/>',
    pointer: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M10.8 13.5v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm-6.2 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm0 0v4.6h.4v-4.6H17zm-3.1 0v4.6h.4v-4.6h-.4zm-3.1 0v4.6h.4v-4.6h-.4zm0 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm-6.2 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17zm0 0v4.6h.4v-4.6H17zm-3.1 0v4.6h.4v-4.6h-.4zm-3.1 0v4.6h.4v-4.6h-.4zm0 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6h-.4zm3.1 0v4.6h.4v-4.6H17z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.2 9.3c-.5-.5-1.2-.8-1.9-.8-.2 0-.5 0-.7.1-.6-.7-1.3-1-2.2-1-.4 0-.8.1-1.2.3-.6-.6-1.3-.9-2-.9h-.4V4.4c0-.9-.3-1.6-.9-2.2-.6-.6-1.3-.9-2.2-.9-.8 0-1.6.3-2.2.9s-.9 1.3-.9 2.1v6.6c-.5-.3-1-.4-1.6-.4-.8 0-1.6.3-2.2.9-.5.6-.8 1.3-.8 2.1 0 .7.2 1.3.6 1.9l4.6 6.2c.3.4.7.7 1.1.9.4.2.9.3 1.4.3h8.6c.5 0 1-.2 1.4-.5.4-.3.7-.7.8-1.3l1.1-4.4c.2-.9.3-1.8.3-2.7v-2.6c.1-.8-.2-1.4-.7-2zm-.7 4.6c0 .8-.1 1.6-.3 2.3l-1.1 4.4c0 .2-.1.3-.3.4s-.3.2-.5.2H9.7c-.5 0-.9-.2-1.2-.6l-4.6-6.2c-.2-.3-.3-.6-.3-.9 0-.4.1-.8.4-1.1.3-.2.6-.4 1.1-.4.5 0 1 .2 1.3.6L8.2 15V4.3c0-.4.2-.8.5-1.1s.7-.5 1.1-.5c.4 0 .8.2 1.1.5.3.3.4.7.4 1.1v6.9h.4V10c0-.4.2-.8.5-1.1s.7-.5 1.1-.5c.4 0 .8.2 1.1.5.3.3.4.7.4 1.1v1.1h.4v-.8c0-.4.1-.7.4-.9.3-.3.6-.4.9-.4.4 0 .7.1 1 .4s.4.6.4 1v.7h.4c0-.3.1-.6.3-.8.2-.2.5-.3.8-.3s.6.1.8.4.3.5.3.9v2.6z"/><path d="M20.1 10.4c-.2-.2-.5-.4-.8-.4s-.6.1-.8.3c-.2.2-.3.5-.3.8h-.4v-.7c0-.4-.1-.7-.4-1s-.6-.4-1-.4-.7.1-.9.4c-.3.3-.4.6-.4.9v.8h-.4V10c0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5s-.5.7-.5 1.1v1.2h-.4V4.4c0-.4-.1-.8-.4-1.1-.3-.3-.7-.5-1.1-.5-.4 0-.8.2-1.1.5s-.4.6-.4 1v10.8l-1.8-2.4c-.4-.5-.8-.7-1.3-.7-.4 0-.8.2-1.1.5-.3.3-.4.7-.4 1.1 0 .3.1.7.3.9l4.6 6.2c.3.4.7.6 1.2.6h8.6c.2 0 .3-.1.5-.2s.2-.2.3-.4l1.1-4.4c.2-.8.3-1.5.3-2.3v-2.6c0-.4-.2-.7-.4-1zm-8.9 7.8h-.4v-4.6h.4v4.6zm3.1 0h-.4v-4.6h.4v4.6zm3.1 0H17v-4.6h.4v4.6z" fill="#ffffff"/>',
    like: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 13.3c.4-.7.6-1.4.6-2.1 0-.9-.3-1.7-1-2.3-.7-.7-1.4-1-2.3-1h-2.3c.4-.9.6-1.8.6-2.6 0-1-.2-1.8-.5-2.4-.3-.6-.7-1-1.3-1.3-.6-.3-1.2-.4-2-.4-.4 0-.8.2-1.2.5-.3.3-.6.8-.7 1.3-.2.6-.3 1.1-.4 1.7-.1.5-.2.9-.5 1.1-.4.5-.9 1-1.4 1.7-.9 1.1-1.5 1.8-1.8 2H3.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v8.3c0 .5.2.8.5 1.2.3.3.7.5 1.2.5h3.8c.2 0 .8.2 1.8.5 1.1.4 2 .7 2.8.8.8.2 1.6.3 2.5.3h1.7c1.2 0 2.2-.4 3-1 .7-.7 1.1-1.7 1.1-2.9.5-.7.8-1.4.8-2.3V16c.3-.6.5-1.2.5-1.9-.2-.2-.3-.5-.3-.8zM5.1 19.2c-.2.2-.4.2-.6.2s-.4-.1-.6-.2c-.2-.2-.2-.4-.2-.6 0-.2.1-.4.2-.6.2-.2.4-.2.6-.2s.4.1.6.2c.2.2.2.4.2.6 0 .3-.1.5-.2.6zm14.9-7c-.2.4-.4.6-.7.6.1.1.2.4.3.6.1.3.1.5.1.7 0 .6-.2 1.1-.7 1.5.2.3.2.6.2.9s-.1.6-.2 1-.4.5-.6.7c0 .3.1.5.1.7 0 1.5-.8 2.2-2.5 2.2h-1.6c-1.1 0-2.6-.3-4.5-1 0 0-.2-.1-.4-.1 0 0-.2 0-.3-.1-.1 0-.2-.1-.5-.1-.2-.1-.4-.1-.5-.2-.1 0-.3 0-.4-.1H7v-8.3h.4c.1 0 .3 0 .5-.1s.3-.2.5-.3l.5-.5c.2-.2.3-.3.5-.6.2-.2.3-.4.5-.5s.2-.3.4-.5.3-.4.3-.4c.5-.6.8-1 1-1.2.4-.4.6-.8.8-1.4.2-.6.3-1.1.4-1.6.1-.5.3-.9.5-1.1.8 0 1.4.2 1.7.6.3.4.4 1 .4 1.9 0 .5-.2 1.2-.6 2.1-.4.9-.6 1.6-.6 2.1h4.6c.4 0 .8.2 1.2.5.3.3.5.7.5 1.2-.2.1-.3.4-.5.8z"/><path d="M5.3 18.7c0 .2-.1.4-.2.6-.2.2-.4.2-.6.2s-.4-.1-.6-.2c-.2-.2-.2-.4-.2-.6 0-.2.1-.4.2-.6.2-.2.4-.2.6-.2s.4.1.6.2c.1.1.2.3.2.6zM19.4 12.8c.1.1.2.4.3.6.1.3.1.5.1.7 0 .6-.2 1.1-.7 1.5.2.3.2.6.2.9s-.1.6-.2 1-.4.5-.6.7c0 .3.1.5.1.7 0 1.5-.8 2.2-2.5 2.2h-1.6c-1.1 0-2.6-.3-4.5-1 0 0-.2-.1-.4-.1-.1 0-.3 0-.4-.1-.1 0-.2-.1-.5-.1-.2-.1-.4-.1-.5-.2-.1 0-.3 0-.4-.1H7v-8.3h.4c.1 0 .3 0 .5-.1s.3-.2.5-.3l.5-.5c.2-.2.3-.3.5-.6.2-.2.3-.4.5-.5s.2-.3.4-.5.3-.4.3-.4c.5-.6.8-1 1-1.2.4-.4.6-.8.8-1.4.2-.6.3-1.1.4-1.6.1-.5.3-.9.5-1.1.8 0 1.4.2 1.7.6.3.4.4 1 .4 1.9 0 .5-.2 1.2-.6 2.1-.4.9-.6 1.6-.6 2.1h4.6c.4 0 .8.2 1.2.5.3.3.5.7.5 1.2 0 .3-.1.7-.3 1-.3.2-.6.4-.8.4z" fill="#ffffff"/>',
    close: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 3.9L20.1 2 12 10.1 3.9 2 2 3.9l8.1 8.1L2 20.1 3.9 22l8.1-8.1 8.1 8.1 1.9-1.9-8.1-8.1L22 3.9z"/>',
    close-bold: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.8 18.1L15.7 12l6.1-6.1c.2-.2.2-.6 0-.9L19 2.2c-.2-.2-.6-.2-.9 0L12 8.3 5.9 2.2c-.2-.3-.6-.3-.9 0L2.2 5c-.2.2-.2.6 0 .9L8.3 12l-6.1 6.1c-.2.2-.2.6 0 .9L5 21.8c.2.2.6.2.9 0l6.1-6.1 6.1 6.1c.2.2.6.2.9 0l2.9-2.9c.2-.2.2-.6-.1-.8z"/>',
    close-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18.1c-4.5 0-8.1-3.6-8.1-8.1S7.5 3.9 12 3.9s8.1 3.6 8.1 8.1-3.6 8.1-8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.1 7L12 10.1 8.9 7 7 8.9l3.1 3.1L7 15.1 8.9 17l3.1-3.1 3.1 3.1 1.9-1.9-3.1-3.1L17 8.9 15.1 7z"/>',
    close-o-inv: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm5 13.6L15.6 17 12 13.4 8.4 17 7 15.6l3.6-3.6L7 8.4 8.4 7l3.6 3.6L15.6 7 17 8.4 13.4 12l3.6 3.6z"/>',
    down: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 7l10 10L22 7H2z"/>',
    up: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 7L2 17h20L12 7z"/>',
    nav-left: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.2 4.4L15.8 2l-10 10 10 10 2.4-2.4-7.7-7.6 7.7-7.6z"/>',
    nav-right: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.2 2L5.8 4.4l7.6 7.6-7.6 7.6L8.2 22l10-10-10-10z"/>',
    up-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.8 15.1l1.8-1.8L12 7.7l-5.6 5.6 1.8 1.8 3.8-3.8 3.8 3.8z"/>',
    down-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.2 8.9l-1.8 1.8 5.6 5.6 5.6-5.6-1.8-1.8-3.8 3.8-3.8-3.8z"/>',
    left-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M15.1 8.2l-1.8-1.8L7.7 12l5.6 5.6 1.8-1.8-3.8-3.8 3.8-3.8z"/>',
    right-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 12c0 5.5 4.5 10 10 10s10-4.5 10-10S17.5 2 12 2 2 6.5 2 12zm18.1 0c0 4.5-3.6 8.1-8.1 8.1S3.9 16.5 3.9 12 7.5 3.9 12 3.9s8.1 3.6 8.1 8.1z"/><path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.9 15.8l1.8 1.8 5.6-5.6-5.6-5.6-1.8 1.8 3.8 3.8-3.8 3.8z"/>',
    arrow-left: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 11.1v1.7c0 .5-.1.9-.4 1.2s-.7.5-1.1.5h-9.6l4 4c.3.3.5.7.5 1.2s-.2.9-.5 1.2l-1 1c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5L2.7 13c-.5-.1-.7-.5-.7-1s.2-.9.5-1.2L11.3 2c.3-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l1 1c.3.3.5.8.5 1.2s-.2.9-.5 1.2l-4 4h9.6c.5 0 .9.2 1.1.5s.6.8.6 1.2z"/>',
    arrow-right: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 12c0 .5-.2.9-.5 1.2L12.7 22c-.4.3-.8.5-1.2.5-.5 0-.9-.2-1.2-.5l-1-1c-.3-.3-.5-.8-.5-1.2 0-.5.2-.9.5-1.2l4-4H3.6c-.5 0-.9-.2-1.1-.5s-.5-.8-.5-1.2v-1.7c0-.5.1-.9.4-1.2s.7-.5 1.1-.5h9.6l-4-4c-.3-.4-.4-.8-.4-1.3s.1-.9.5-1.2l1-1c.3-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l8.8 8.8c.4.3.6.7.6 1.2z"/>',
    arrow-up: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.6 12.6c0 .5-.2.9-.5 1.2l-1 1c-.3.3-.8.5-1.2.5-.5 0-.9-.2-1.2-.5l-4-4v9.6c0 .5-.2.9-.5 1.1s-.9.5-1.3.5h-1.7c-.5 0-.9-.1-1.2-.4s-.5-.7-.5-1.1v-9.6l-4 4c-.3.3-.7.5-1.2.5s-1-.2-1.3-.6l-1-1c-.3-.3-.5-.8-.5-1.2 0-.5.2-.9.5-1.2l8.8-8.8c.3-.4.7-.6 1.2-.6s.9.2 1.2.5l8.8 8.8c.4.4.6.8.6 1.3z"/>',
    arrow-down: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.5 11.5c0 .5-.2.9-.5 1.2l-8.8 8.8c-.3.3-.7.5-1.2.5s-.9-.2-1.2-.5L2 12.7c-.3-.3-.5-.7-.5-1.2s.2-.9.5-1.2l1-1c.4-.3.8-.5 1.2-.5.5 0 .9.2 1.2.5l4 4V3.7c0-.5.2-.9.5-1.2.4-.3.8-.5 1.2-.5h1.7c.5 0 .9.2 1.2.5.3.3.5.7.5 1.2v9.5l4-4c.3-.3.7-.5 1.2-.5s.9.2 1.2.5l1 1c.4.4.6.8.6 1.3z"/>',
    dropdown: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 12l-4-4h8l-4 4z"/>',
    search: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 19l-4.7-4c-.5-.4-1-.6-1.4-.6 2.7-3.2 2.3-7.9-.8-10.6s-8-2.3-10.7.8-2.3 7.9.8 10.6c2.8 2.4 6.9 2.4 9.7 0 0 .4.2.9.6 1.4l4 4.7c.7.8 1.8.8 2.5.1.8-.6.7-1.7 0-2.4zM9.5 14.5c-2.8 0-5-2.2-5-5s2.2-5 5-5 5 2.2 5 5-2.2 5-5 5z"/>',
    check: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M18.9 4.2l-9.4 9.4-4.4-4.4L2 12.3l7.5 7.5L22 7.3l-3.1-3.1z"/>',
    plus: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.4 9.5h-6.9V2.6c0-.3-.3-.6-.6-.6h-3.8c-.3 0-.6.3-.6.6v6.9H2.6c-.3 0-.6.3-.6.6v3.8c0 .3.3.6.6.6h6.9v6.9c0 .3.3.6.6.6h3.8c.3 0 .6-.3.6-.6v-6.9h6.9c.3 0 .6-.3.6-.6v-3.8c0-.3-.3-.6-.6-.6z"/>',
    minus: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M2 10.1v3.8c0 .3.3.6.6.6h18.8c.3 0 .6-.3.6-.6v-3.8c0-.3-.3-.6-.6-.6H2.6c-.3 0-.6.3-.6.6z"/>',
    grid: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M4 8h4V4H4v4zm6 12h4v-4h-4v4zm-6 0h4v-4H4v4zm0-6h4v-4H4v4zm6 0h4v-4h-4v4zm6-10v4h4V4h-4zm-6 4h4V4h-4v4zm6 6h4v-4h-4v4zm0 6h4v-4h-4v4z"/>',
    menu: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>',
    dots: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>',
    marker: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C8.5 2 5.8 4.8 5.8 8.2 5.8 14.5 12 22 12 22s6.2-7.5 6.2-13.8C18.2 4.8 15.5 2 12 2zm0 10c-2.1 0-3.8-1.7-3.8-3.8S9.9 4.5 12 4.5s3.8 1.7 3.8 3.8S14.1 12 12 12z"/>',
    star: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 9.8l-6.9-1L12 2.5 8.9 8.8 2 9.8l5 4.9-1.2 6.9 6.2-3.2 6.2 3.2-1.2-7 5-4.8z"/>',
    love: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M16.7 2.7c-2.1 0-3.9 1.7-4.7 3.5-.8-1.8-2.6-3.5-4.8-3.5C4.4 2.7 2 5.1 2 8c0 5.9 5.9 7.4 10 13.3 3.8-5.8 10-7.6 10-13.3 0-2.9-2.4-5.3-5.3-5.3z"/>',
    shop: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 19.5c0 1-.8 1.9-1.9 1.9s-1.9-.8-1.9-1.9c0-1 .8-1.9 1.9-1.9 1.1 0 1.9.9 1.9 1.9zm12.5 0c0 1-.8 1.9-1.9 1.9-1 0-1.9-.8-1.9-1.9 0-1 .8-1.9 1.9-1.9 1.1 0 1.9.9 1.9 1.9zm0-8.1V3.9H7c0-.7-.6-1.2-1.2-1.2H2v1.2h2.5l.9 8c-1.1.9-1.3 2.4-.4 3.5.5.6 1.2.9 2 .9h15v-1.2H7c-.7 0-1.2-.6-1.2-1.2L22 11.4z"/>',
    reload: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 9.5h-7.5l2.8-2.8C15.9 5.3 14 4.5 12 4.5s-3.9.8-5.3 2.2C5.3 8.1 4.5 10 4.5 12s.8 3.9 2.2 5.3c1.4 1.4 3.3 2.2 5.3 2.2 2.2 0 4.2-.9 5.6-2.6l1.9 1.6c-3.6 4.2-10 4.6-14.1.9s-4.6-9.8-.9-14 10-4.6 14.1-.9c.2.1.3.3.5.5L22 2v7.5z"/>',
    loader-lines: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12.2 7.9c-.7 0-1.2-.5-1.2-1.2V3c0-.7.5-1.2 1.2-1.2s1.2.5 1.2 1.2v3.7c0 .7-.5 1.2-1.2 1.2zm0 14.3c-.4 0-.8-.3-.8-.8v-3.7c0-.4.3-.8.8-.8.4 0 .8.3.8.8v3.7c0 .4-.4.8-.8.8zM9.4 8.6c-.4 0-.8-.2-1-.6L6.6 4.8c-.3-.5-.1-1.2.4-1.5s1.3-.1 1.6.4l1.8 3.2c.3.5.1 1.3-.4 1.6-.2 0-.4.1-.6.1zm7.4 12.3c-.2 0-.5-.1-.6-.3l-1.8-3.2c-.2-.3-.1-.8.2-.9.3-.2.8-.1.9.2l1.8 3.2c.2.3.1.8-.3.9 0 .1-.1.1-.2.1zM7.4 10.5c-.2 0-.4 0-.5-.1L3.7 8.6c-.5-.4-.7-1-.3-1.5.3-.5.9-.6 1.4-.4L8 8.5c.5.3.7 1 .4 1.5-.3.3-.6.5-1 .5zm12.8 6.9c-.1 0-.2 0-.3-.1l-3.2-1.8c-.3-.2-.4-.6-.2-.8.2-.3.5-.4.8-.2l3.2 1.8c.3.2.4.5.2.8-.1.2-.3.3-.5.3zM6.7 13.2H3c-.6 0-1-.4-1-1 0-.5.4-1 1-1h3.7c.6 0 1 .4 1 1s-.5 1-1 1zm14.7-.4h-3.7c-.3 0-.6-.3-.6-.6s.3-.6.6-.6h3.7c.3 0 .6.3.6.6s-.3.6-.6.6zM4.2 17.7c-.5 0-.9-.4-.9-.9 0-.3.2-.6.5-.8L7 14.2c.4-.3 1-.1 1.3.3.3.4.1 1-.3 1.3l-3.2 1.8c-.3.1-.4.1-.6.1zM17 10.1c-.3 0-.6-.3-.6-.6 0-.2.1-.4.3-.5l3.2-1.8c.3-.2.7-.1.8.2.2.3.1.7-.2.8L17.3 10c-.1.1-.2.1-.3.1zM7.6 21c-.5 0-.8-.4-.8-.8 0-.1 0-.3.1-.4l1.8-3.2c.2-.4.7-.5 1.2-.3.4.2.5.7.3 1.2l-1.8 3.2c-.2.2-.5.3-.8.3zm7.3-12.9c-.3 0-.6-.3-.6-.6 0-.1 0-.2.1-.3L16.3 4c.2-.3.6-.4.8-.2.3.2.4.5.2.8l-1.8 3.2c-.1.1-.3.3-.6.3z"/>',
    loader-dots: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M8.9 4.3c0-1.5 1.2-2.7 2.7-2.8s2.7 1.2 2.8 2.7v.1c0 1.5-1.3 2.7-2.8 2.7C10.1 7 9 5.8 8.9 4.3zm8.6 8.2c0-1.2 1-2.2 2.2-2.2 1.2 0 2.2 1 2.2 2.2 0 1.2-1 2.2-2.2 2.2-1.2 0-2.2-1-2.2-2.2zm-2.1 5.7c0-1.1.8-2 2-2.1s2 .8 2.1 2v.1c0 1.1-1 2-2.1 2s-2-.9-2-2zm-5.6 2.4c0-1 .8-1.8 1.8-1.8s1.8.8 1.8 1.8-.8 1.8-1.8 1.8-1.8-.8-1.8-1.8zm-5.6-2.4c0-.9.7-1.7 1.6-1.7s1.7.7 1.7 1.6v.1c0 .9-.8 1.6-1.7 1.6-.8 0-1.5-.7-1.6-1.6zM2 12.5c0-.8.6-1.5 1.5-1.5s1.5.6 1.5 1.4v.1c0 .8-.7 1.5-1.5 1.5-.8-.1-1.5-.7-1.5-1.5zm2.5-5.8c0-.7.6-1.4 1.4-1.4s1.3.7 1.3 1.4-.6 1.4-1.3 1.4-1.4-.6-1.4-1.4zm15.3 0c0 1.4-1.1 2.5-2.5 2.5s-2.5-1.1-2.5-2.5 1.1-2.5 2.5-2.5c1.4.1 2.5 1.2 2.5 2.5z"/>',
    comet: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22 12.3c0-2.7-1.2-5.3-3.1-7.2-2.9-2.8-7.3-3.6-11-2-1.2.6-2.3 1.3-3.2 2.3s-1.6 2-2.1 3.2c-.9 2.4-.8 5 .2 7.4.5 1.2 1.2 2.2 2.1 3.1.9.9 2 1.5 3.1 2 1.2.4 2.4.7 3.6.6 3.7-.1 7.1-2.4 8.4-5.9.3-.7.4-1.4.5-2.1h.1c.7 0 1.3-.6 1.3-1.3.1 0 .1 0 .1-.1zm-2.1 3.4c-.5 1.1-1.2 2-2 2.8-.8.8-1.8 1.4-2.9 1.9-1.1.4-2.2.6-3.4.6-2.3 0-4.5-1-6-2.7-.8-.8-1.4-1.8-1.8-2.8-.7-2-.7-4.3.2-6.4.4-1 1.1-1.9 1.9-2.6s1.7-1.3 2.7-1.7c1-.4 2.1-.6 3.1-.5s2.1.3 3.1.7c1 .4 1.8 1 2.5 1.8s1.3 1.6 1.6 2.6c.4 1 .5 2 .5 3-.1.7.5 1.3 1.1 1.4-.1.6-.3 1.3-.6 1.9z"/>',
    comets: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 2C6.6 2 2.1 6.3 2 11.8c.1-4.8 3.7-8.6 8.1-8.6 4.5 0 8.1 3.9 8.1 8.8 0 1 .8 1.9 1.9 1.9S22 13 22 12c0-5.5-4.5-10-10-10zm0 20c5.4 0 9.9-4.3 10-9.8-.1 4.7-3.7 8.5-8.1 8.5-4.5 0-8.1-3.9-8.1-8.8 0-1-.8-1.9-1.9-1.9S2 11 2 12c0 5.5 4.5 10 10 10z"/>',
    refresh: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M21.7 14.1s0 .1 0 0c-.6 2.4-1.7 4.3-3.5 5.7S14.3 22 11.9 22c-1.3 0-2.5-.2-3.7-.7S6 20.1 5 19.3L3.3 21c-.2.2-.4.2-.6.2s-.4-.1-.6-.2-.1-.4-.1-.7v-5.8c0-.2.1-.4.2-.6s.4-.2.6-.2h5.8c.2 0 .4.1.6.2.2.2.2.4.2.6s-.1.4-.2.6l-1.8 1.8c.6.6 1.3 1 2.1 1.3s1.6.5 2.4.5c1.2 0 2.2-.3 3.3-.8s1.8-1.3 2.4-2.3c.1-.1.3-.7.7-1.5.1-.2.2-.3.4-.3h2.5c.1 0 .2 0 .3.1.1 0 .2.1.2.2zM22 3.7v5.8c0 .2-.1.4-.2.6s-.4.2-.6.2h-5.8c-.2 0-.4-.1-.6-.2-.2-.2-.2-.4-.2-.6s.1-.4.2-.6l1.8-1.8c-1.3-1.2-2.8-1.8-4.5-1.8-1.2 0-2.2.3-3.3.8S6.9 7.5 6.3 8.5c-.1.2-.3.7-.7 1.5-.1.2-.2.3-.4.3H2.7c-.1 0-.2 0-.3-.1-.1-.1-.2-.2-.2-.3v-.1C2.8 7.5 4 5.6 5.8 4.2S9.6 2 12 2c1.3 0 2.5.2 3.7.7s2.3 1.2 3.2 2L20.6 3c.2-.2.4-.2.6-.2s.4.1.6.2.2.4.2.7z"/>',
    ban: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M19.1 12c0-1.4-.4-2.7-1.1-3.8L8.1 18c1.2.8 2.5 1.2 3.9 1.2 1 0 1.9-.2 2.8-.6.9-.4 1.6-.9 2.3-1.5s1.1-1.4 1.5-2.3.5-1.8.5-2.8zm-13 3.9l9.8-9.8c-1.2-.8-2.5-1.2-3.9-1.2-1.3 0-2.5.3-3.6 1S6.5 7.3 5.9 8.4s-1 2.3-1 3.6c0 1.4.4 2.7 1.2 3.9zM22 12c0 1.4-.3 2.7-.8 3.9-.5 1.2-1.2 2.3-2.1 3.2-.9.9-2 1.6-3.2 2.1s-2.5.8-3.9.8-2.6-.3-3.9-.8-2.3-1.2-3.2-2.1c-.9-.9-1.6-2-2.1-3.2S2 13.4 2 12s.3-2.7.8-3.9S4 5.8 4.9 4.9s2-1.6 3.2-2.1S10.6 2 12 2s2.6.3 3.9.8 2.3 1.2 3.2 2.1 1.6 2 2.1 3.2c.5 1.2.8 2.5.8 3.9z"/>',
    trash: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 18.2V9.1c0-.1 0-.2-.1-.3s-.2-.1-.3-.1h-.9c-.1 0-.2 0-.2.1-.1.1-.2.2-.2.3v9.2c0 .1 0 .2.1.3.1.1.2.1.3.1H9c.1 0 .2 0 .3-.1s.2-.2.2-.4zm3.3 0V9.1c0-.1 0-.2-.1-.3s-.2-.1-.3-.1h-.8c-.1 0-.2 0-.3.1s-.1.2-.1.3v9.2c0 .1 0 .2.1.3s.2.1.3.1h.8c.1 0 .2 0 .3-.1s.1-.2.1-.4zm3.4 0V9.1c0-.1 0-.2-.1-.3-.1-.1-.2-.1-.3-.1H15c-.1 0-.2 0-.3.1s-.2.2-.2.3v9.2c0 .1 0 .2.1.3s.2.1.3.1h.8c.1 0 .2 0 .3-.1.1-.1.2-.2.2-.4zM9.1 5.3h5.8l-.6-1.5c-.1-.1-.1-.1-.2-.1H9.9c-.1 0-.2.1-.2.1l-.6 1.5zm12.1.5v.8c0 .1 0 .2-.1.3s-.2.1-.3.1h-1.2v12.3c0 .7-.2 1.3-.6 1.9-.5.5-1 .8-1.6.8H6.6c-.6 0-1.1-.3-1.5-.8s-.6-1.1-.6-1.8V7H3.2C3.1 7 3 7 3 6.9s-.2-.2-.2-.3v-.8c0-.1 0-.2.1-.3s.2-.1.3-.1h4l.9-2.2c.1-.3.4-.6.7-.8.4-.3.8-.4 1.1-.4h4.2c.3 0 .7.1 1 .3.3.2.6.5.7.8l.9 2.2h4c.1 0 .2 0 .3.1s.2.2.2.4z"/>',
    trash-o: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.5 9.9v7.5c0 .1 0 .2-.1.3s-.2.1-.3.1h-.9c-.1 0-.2 0-.3-.1-.1-.1-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3.1-.1.2-.1.3-.1H9c.1 0 .2 0 .3.1s.2.2.2.3zm3.3 0v7.5c0 .1 0 .2-.1.3s-.2.1-.3.1h-.8c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3s.2-.1.3-.1h.8c.1 0 .2 0 .3.1s.1.2.1.3zm3.4 0v7.5c0 .1 0 .2-.1.3-.1.1-.2.1-.3.1H15c-.1 0-.2 0-.3-.1s-.1-.2-.1-.3V9.9c0-.1 0-.2.1-.3s.2-.1.3-.1h.8c.1 0 .2 0 .3.1 0 .1.1.2.1.3zm1.6 9.4V7H6.2v12.3c0 .2 0 .4.1.5s.1.3.2.4l.1.1h10.8s.1 0 .1-.1c.1-.1.1-.2.2-.4s.1-.3.1-.5zm-8.7-14h5.8l-.6-1.5c-.1-.1-.1-.1-.2-.1H9.9c-.1 0-.2.1-.2.1l-.6 1.5zm12.1.5v.8c0 .1 0 .2-.1.3s-.2.1-.3.1h-1.2v12.3c0 .7-.2 1.3-.6 1.9-.5.5-1 .8-1.6.8H6.6c-.6 0-1.1-.3-1.5-.8s-.6-1.1-.6-1.8V7H3.2C3.1 7 3 7 3 6.9s-.2-.2-.2-.3v-.8c0-.1 0-.2.1-.3s.2-.1.3-.1h4l.9-2.2c.1-.3.4-.6.7-.8.4-.3.8-.4 1.1-.4h4.2c.3 0 .7.1 1 .3.3.2.6.5.7.8l.9 2.2h4c.1 0 .2 0 .3.1s.2.2.2.4z"/>',
    wifi: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M12 19.1c-.1 0-.5-.2-.9-.7-.5-.5-.7-.8-.7-1 0-.2.2-.4.6-.5.4-.1.8-.2 1.1-.2.3 0 .6.1 1.1.2.4.1.6.3.6.5 0 .1-.2.5-.7 1-.6.5-1 .7-1.1.7zm2.7-2.8s-.1-.1-.4-.3c-.3-.2-.6-.3-1-.5s-.9-.3-1.3-.3-.9.1-1.3.3c-.4.2-.8.3-1 .5-.3.2-.4.3-.4.3-.1 0-.4-.3-1-.8-.5-.5-.8-.8-.8-.9 0-.1 0-.2.1-.2.5-.5 1.2-.9 2-1.2s1.6-.4 2.4-.4c.8 0 1.6.1 2.4.4.8.3 1.5.7 2 1.2.1.1.1.1.1.2s-.3.4-.8.9-.8.8-1 .8zm2.8-2.7c-.1 0-.2 0-.2-.1-.9-.7-1.8-1.2-2.6-1.6-.8-.3-1.7-.5-2.7-.5-.6 0-1.2.1-1.7.2-.6.1-1.1.3-1.5.5l-1.2.6c-.4.2-.6.5-.8.6-.2.1-.3.2-.3.2-.1 0-.4-.3-.9-.8s-.8-.7-.8-.8c0-.1 0-.2.1-.2.9-.9 2-1.6 3.3-2.1s2.6-.7 3.9-.7 2.6.2 3.9.7 2.4 1.2 3.3 2.1c.1.1.1.1.1.2s-.3.4-.8.9-1 .8-1.1.8zm2.8-2.8c-.1 0-.1 0-.2-.1-1.2-1.1-2.5-1.9-3.8-2.4s-2.8-.8-4.3-.8-3 .3-4.3.8-2.6 1.3-3.8 2.4c-.1.1-.1.1-.2.1s-.4-.3-.9-.8-.8-.8-.8-.9c0-.1 0-.2.1-.2C3.4 7.6 4.9 6.7 6.6 6s3.5-1 5.4-1 3.6.3 5.4 1 3.3 1.7 4.5 2.9c.1 0 .1.1.1.2s-.3.4-.8.9-.8.8-.9.8z"/>',
    facebook-f: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M17.2 2.1v3.2h-1.9c-.7 0-1.2.1-1.4.4-.2.3-.3.8-.3 1.3v2.3h3.5l-.5 3.6h-3.1V22H9.9v-9.1H6.8V9.3h3.1V6.7c0-1.5.4-2.6 1.2-3.5s2-1.2 3.4-1.2c1.1 0 2 0 2.7.1z"/>',
    facebook-logo: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M22.7 0H1.3C.6 0 0 .6 0 1.3v21.4c0 .7.6 1.3 1.3 1.3h11.5v-9.3H9.7v-3.6h3.1V8.4c0-3.1 1.9-4.8 4.7-4.8 1.3 0 2.5.1 2.8.1V7h-1.9c-1.5 0-1.8.7-1.8 1.8v2.3h3.6l-.5 3.6h-3.1V24h6.1c.7 0 1.3-.6 1.3-1.3V1.3c0-.7-.6-1.3-1.3-1.3z"/>',
    twitter-bird: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M7.52 19.54c9.1 0 14-7.5 14-14v-.6c1-.7 1.8-1.6 2.5-2.5-.9.4-1.8.7-2.8.8 1-.6 1.8-1.6 2.2-2.7-1 .6-2 1-3.1 1.2-.9-1-2.2-1.6-3.6-1.6-2.7 0-4.9 2.2-4.9 4.9 0 .4 0 .8.1 1.1-4.1-.2-7.7-2.2-10.1-5.1-.4.7-.7 1.6-.7 2.5 0 1.7.9 3.2 2.2 4.1-.8 0-1.6-.2-2.2-.6v.1c0 2.4 1.7 4.4 4 4.8-.4.1-.8.2-1.3.2-.3 0-.6 0-.9-.1.6 2 2.4 3.4 4.6 3.4-1.7 1.3-3.8 2.1-6.1 2.1-.4 0-.8 0-1.2-.1 2 1.2 4.5 2.1 7.3 2.1"/>',
    youtube-play: '<path fill="#{$color}" stroke="#{$borderColor}" stroke-width="#{$border}" style="#{$css}" d="M9.9 14.6l5.4-2.8L9.9 9v5.6zM12 5c1.2 0 2.5 0 3.6.1 1.2 0 2 .1 2.6.1h1.3c.1 0 .1 0 .3.1s.2.1.3.1c.1 0 .2.1.3.1.1.1.2.1.3.2l.3.3.2.2c.1.1.2.3.3.7.1.3.2.7.3 1.1.1.5.1 1 .1 1.5s.1 1 .1 1.3v2c0 1.1-.1 2.2-.2 3.2-.1.4-.1.8-.3 1.1-.1.3-.3.6-.4.7l-.1.2-.3.3c-.1.1-.2.2-.3.2-.1.1-.2.1-.3.1-.1 0-.2.1-.3.1-.1 0-.2 0-.3.1H19c-1.9.2-4.2.2-7 .2-1.5 0-2.9 0-4-.1s-1.9-.1-2.2-.1h-.9c-.3 0-.5-.1-.6-.1-.1 0-.3-.1-.6-.2-.3-.2-.5-.3-.7-.5l-.2-.2c-.1-.1-.2-.3-.3-.7-.1-.3-.2-.7-.3-1.1-.1-.5-.1-1-.1-1.5s-.1-1-.1-1.3v-2c0-1 .1-2.1.2-3.2.1-.4.1-.8.3-1.1.1-.3.3-.6.4-.7L3 6l.3-.3c.1-.1.2-.2.3-.2.2-.1.3-.1.4-.1s.2-.1.3-.1c.1 0 .2 0 .3-.1h.5C6.9 5 9.2 5 12 5z"/>',
  ); 
  $element: map-get($SVG, $id);
  $tag: '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24">#{$element}</svg>';
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  ///background-image: url('data:image/svg+xml;utf8,#{$tag}');
  @include background-svg('#{$tag}');
}

///@import "classanimation";
///@include banner(300,250,#FFF,#000);
///************** โœ COPY + PASTE โœ **************//

/***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
    Author          : Gaspare Sganga
    Version         : 2.2.1
    License         : MIT
    Documentation   : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/

/*
    You can customize your MessageBox style directly in this file 
    or override some classes/styles using an external CSS file loaded after this.
*/

/* Overlay */

.messagebox_overlay {
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

.messagebox_overlay *:focus {
  outline: 0;
}

/* MessageBox */

.messagebox {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 10pt;
  font-style: normal;
  font-weight: normal;
  text-align: left;
  color: #303030;
  background-color: #fcfcfc;
  border: 1px solid #c8c8c8;
  box-shadow: 0px 2px 4px #a0a0a0;
  max-height: 90%;
  /* This value is useful only when "top" option is set to "auto" */
  max-width: 90%;
  min-width: 300px;
}

/* Content */

.messagebox_content {
  padding: 20px;
  padding-bottom: 0;
  /* In order to preserve "padding-bottom" when the content is taller than the MessageBox and thus scrolled on the Y-axis, use the following :after pseudo-class "height" value instead of "padding-bottom" here! */
}

.messagebox_content:after {
  content: "";
  display: block;
  flex: 0 0 auto;
  height: 20px;
  /* Use this value as if it was #messagebox_content's "padding-bottom" to preserve it when the content overflows Y-axis and the scrollbar is shown */
}

/* Label for Input */

.messagebox_content_label {
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  //font-style: italic;
}

/* Input (it applies to selects too) */

.messagebox_content_input {
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 10px;
  padding: 3px;
  color: #303030;
  border: 1px solid #909090;
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  font-weight: inherit;
  text-align: left;
}

.messagebox_content_input:hover {
  border-color: #707070;
}

.messagebox_content_input:focus {
  border-color: #707070;
  box-shadow: inset 0px 0px 3px #ffd540;
}

/* Input style when placed inside a label */

.messagebox_content_label .messagebox_content_input {
  margin-top: 4px;
}

/* Select's "fake placeholder" */

.messagebox_content_input_selectplaceholder {
  color: #909090;
}

/* Error */

.messagebox_content_error {
  background-color: #fad0d5;
  color: #a02020;
  margin-top: 15px;
  margin-bottom: -10px;
  padding: 4px 6px;
  border-radius: 2px;
}

/* Buttons */

.messagebox_buttons {
  background-color: #f5f5f5;
  border-top: 1px solid #c8c8c8;
  padding: 10px 20px 0px 20px;
  text-align: center;
}

.messagebox_buttons button {
  font-family: inherit;
  font-size: inherit;
  font-weight: bold;
  text-align: center;
  min-width: 75px;
  margin: 0px 4px 10px 4px;
  padding: 5px 10px;
  cursor: pointer;
  color: #404040;
  background-color: #e9e9e9;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.1) 51%,
    rgba(255, 255, 255, 0) 100%
  );
  border: 1px solid #c0c0c0;
  border-radius: 2px;
}

.messagebox_buttons button:hover {
  color: #202020;
  background-color: #f0f0f0;
}

.messagebox_buttons button:active {
  background-color: #e6e6e6;
  border: 1px solid #a0a0a0;
  box-shadow: inset 0px 0px 6px #d0d0d0;
}

.messagebox_buttons button::-moz-focus-inner {
  padding: 0;
  border: 0;
}
//***********************************************//
//***********************************************//
//***********************************************//
@mixin simpleButton {
    cursor: pointer;
    margin: 0 3px;
    padding: 3px;
    border: 1px solid #666666;
    border-radius: 3px;
    display: inline-block;
    width: auto;
    text-align: center;
    color: #FFF;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
background: #959595; /* Old browsers */
background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */
    &:hover {
      color: #000;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f6f8f9+0,e5ebee+50,d7dee3+51,f5f7f9+100;White+Gloss */
background: #f6f8f9; /* Old browsers */
background: -moz-linear-gradient(top,  #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */
    }
}
@import url("https://fonts.googleapis.com/css?family=Anton|Ropa+Sans|Source+Code+Pro");
@include banner(300,250);
.hero {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
  top: 50%;
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: center;
  font-size: 2.2em;
  font-family: "Anton", sans-serif;
  @include y(-50%);
  .letter {
    display: inline-block;
    opacity: 1;
    //@include transform(0px, 500px, 0.1, 2turn);
  }
}
.slogan {
  position: absolute;
  top: 60%;
  text-align: center;
  display: block;
  width: 100%;
  //opacity: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
  //@include y(200%);
}

body {
  background-color: #333333;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJElEQVQoU2MMDQ39z0AA3Lt3j4FxVCGuUCIteIyNjQkGOMgmAFO5KvuiODFKAAAAAElFTkSuQmCC);
  background-repeat: repeat;
  font-family: "Ropa Sans", sans-serif;
  font-size: 16px;
  overflow: hidden;
  scroll: auto;
}
#banner {
  top: 50%;
  left: 50%;
  @include transform(-50%,-50%, 1, 0);
}
#editor-wrapper {
  color: #dddddd;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
  background-color: rgba(0, 0, 0, 0.6);
  bottom: 0px;
  left: 50%;
  display: block;
  position: absolute;
  width: 95%;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  @include x(-50%);
  & #click-expander {
    font-size: 1.1em;
    text-align: center;
    width: 100%;
    padding: 10px 0 5px 0;
    cursor: pointer;
    display: inline-block;
    height: 18px;
    & #expander-btn {
      display: inline-block;
      @include antialiased;
      @include transition(1s, ease("overshoot"));
      &.close {
        @include rotate(45deg);
      }
      &.open {
        @include rotate(0);
      }
    }
  }
  #editor-hider {
    padding: 0px 15px 10px 15px;
    font-size: 0.9em;
  }
  h1,
  h2,
  h3,
  h4 {
    font-weight: bold;
    padding: 5px;
  }
  p {
    padding: 5px;
  }
  input,
  select,
  button {
    color: white;
    background-color: dodgerblue;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
    box-shadow: 0px -2px 2px 0px rgba(0, 0, 0, 0.16);
    padding: 5px;
    font-size: 0.8em;
    line-height: 1em;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    display: inline-block;
    height: 20px;
    margin: 1px;
    @include transitionAll;
    &:hover {
      color: dodgerblue;
      background-color: white;
    }
  }
  textarea {
    font-size: 1em;
    line-height: 1.3em;
    font-family: "Source Code Pro", monospace;
    width: 100%;
    height: 200px;
    display: block;
    color: #dddddd;
    border: 1px solid #333333;
    outline: none;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 10px;
    box-sizing: border-box;
    resize: none;
    white-space: pre;
    overflow: auto;
    caret-color: dodgerblue;
    &::selection {
      background-color: yellow;
      color: black;
    }
  }
  #_fx {
    @include simpleButton;
  }
  #size_sl {
    width: auto;
  }
  #_color {
    padding: 0px;
    border: none;
    width: 40px;
    height: 22px;
  }
  #template {
    width: auto;
  }
  #_frames {
    width: 30px;
    height: 12px;
  }
  .small-checkbox {
    display: none;
  }
  .small-checkbox-label {
    cursor: pointer;
    margin: 0;
    padding: 0;
    &:before{
      margin-left: 3px;
      margin-right: -3px;
      vertical-align: middle;
    }
  }
  .small-checkbox + .small-checkbox-label {
    &:before {
      content: "โŒ";
    }
  }
  .small-checkbox:checked + .small-checkbox-label {
    &:before {
      content: "โœ…";
    }
  }
}
#minitweensass,
#minitweenjs {
  display: none;
}
.separator {
  color: #555555;
}
#actual-size {
  color: red;
}
///Animations
.hero {
  @include revolveDropText(14, 1s, timeline(1.8s));
}

.slogan {
  @include keyframes (slogan-animation) {
    from {
      opacity: 0;
      @include y(100%);
    }
    to {
      opacity: 1;
      @include y(0);
    }
  }
  display: inline-block;
  @include animation(slogan-animation, 1s, ease("bounce"), timeline(2.5s), 1);
  @include animationFill();
}
///LAYERS
.layer-comps {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
  padding: 100px 0;
  display: none;
  .title,
  .close {
    display: inline-block;
    width: 50%;
    margin-bottom: 10px;
  }
  .title {
    float: left;
    text-align: left;
    font-size: 1.2rem;
  }
  p{
    clear: both;
    float: left;
    width: 100%;
    font-size: 0.8rem;
    margin-bottom: 5px;
  }
  .close {
    float: right;
    text-align: right;
    cursor: pointer;
  }
  .hidden {
    display: none;
  }
  .small {
    font-size: 0.8em;
  }
  .input-box {
    font-size: 1.2em;
    line-height: 1em;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
    display: inline-block;
    width: 50px;
    height: 20px;
    margin: 1px;
  }
  .form-controls {
    padding-top: 5px;
    button {
      display: inline-block;
      @include simpleButton;
    }    
  }

  .layer-window {
    margin: auto;
    width: 80%;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.16);
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f2f5f6+0,e3eaed+37,c8d7dc+100;Grey+3D+%234 */
    background: #f2f5f6; /* Old browsers */
    background: -moz-linear-gradient(
      top,
      #f2f5f6 0%,
      #e3eaed 37%,
      #c8d7dc 100%
    ); /* FF3.6-15 */
    background: -webkit-linear-gradient(
      top,
      #f2f5f6 0%,
      #e3eaed 37%,
      #c8d7dc 100%
    ); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(
      to bottom,
      #f2f5f6 0%,
      #e3eaed 37%,
      #c8d7dc 100%
    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(
        startColorstr="#f2f5f6",
        endColorstr="#c8d7dc",
        GradientType=0
      ); /* IE6-9 */
    .sort-styles{
      clear: both;
      width: 100%;
      padding-bottom: 5px;
      select {
        background-color: black;
        color: white;
        font-weight: bold;
        border-radius: 3px;
        outline: none;
      }
    }
  }
  .element-list {
    width: 100%;
    margin: auto;
    clear: both;
    height: 50vh;
    border: 1px solid #999;
    background-color: #333;
    overflow: auto;
    box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.16),
      inset 0px 3px 3px 0px rgba(0, 0, 0, 0.16);
    .line {
      display: inline-block;
      clear: both;
      float: left;
      width: 100%;
      cursor: pointer;
      padding: 3px;
      box-sizing: border-box;
      color: #DEDEDE;
      /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,f3f3f3+50,ededed+51,ffffff+100;White+Gloss+%232 */
      background-color: #323232; /* Old browsers */
      border-bottom: 1px solid #4a4a4a;
      &.selected {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcecfc+0,fba6e1+50,fd89d7+51,ff7cd8+100;Pink+Gloss+%232 */
        background: #4a4a4a; /* Old browsers */
      }
      .small-checkbox{
        width: 5%;
      }
      .small-checkbox-label {
        width: 95%;
      }
      &:hover {
        color: #FFF;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#959595+0,0d0d0d+46,010101+50,0a0a0a+53,4e4e4e+76,383838+87,1b1b1b+100;Black+Gloss+Pipe */
background: #959595; /* Old browsers */
background: -moz-linear-gradient(top,  #959595 0%, #0d0d0d 46%, #010101 50%, #0a0a0a 53%, #4e4e4e 76%, #383838 87%, #1b1b1b 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #959595 0%,#0d0d0d 46%,#010101 50%,#0a0a0a 53%,#4e4e4e 76%,#383838 87%,#1b1b1b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#959595', endColorstr='#1b1b1b',GradientType=0 ); /* IE6-9 */


      }
      .small-checkbox,
      .small-checkbox-label {
        cursor: pointer;
      }
      .small-checkbox {
        margin-right: 3px;
      }
    }
  }
}

              
            
!

JS

              
                /***********************************************************************************************************************
MessageBox - A jQuery Plugin to replace Javascript's window.alert(), window.confirm() and window.prompt() functions
    Author          : Gaspare Sganga
    Version         : 2.2.1
    License         : MIT
    Documentation   : http://gasparesganga.com/labs/jquery-message-box/
***********************************************************************************************************************/
(function($, undefined) {
  // Default Settings
  var _defaults = {
    buttonDone: "OK",
    buttonFail: undefined,
    buttonsOrder: "done fail",
    customClass: "",
    filterDone: undefined,
    filterFail: undefined,
    input: false,
    message: "",
    queue: true,
    speed: 200,
    top: "25%",
    width: "auto"
  };

  // Required CSS
  var _css = {
    overlay: {
      "box-sizing": "border-box",
      display: "flex",
      "flex-flow": "column nowrap",
      "align-items": "center",
      position: "fixed",
      top: "0",
      left: "0",
      width: "100%",
      height: "100%"
    },
    spacer: {
      "box-sizing": "border-box",
      flex: "0 1 auto"
    },
    messagebox: {
      "box-sizing": "border-box",
      flex: "0 1 auto",
      display: "flex",
      "flex-flow": "column nowrap"
    },
    content: {
      "box-sizing": "border-box",
      flex: "0 1 auto",
      "overflow-y": "auto"
    },
    buttons: {
      "box-sizing": "border-box",
      flex: "0 0 auto"
    },
    boxSizing: {
      "box-sizing": "border-box"
    }
  };

  // Globals
  var _active = undefined;
  var _activeStack = [];
  var _queue = [];

  // Constants
  var _constants = {
    buttonDoneName: "buttonDone",
    buttonFailName: "buttonFail",
    errorSpeed: 200,
    keyCodeDone: [13],
    keyCodeFail: [27],
    maxHeightCoefficient: 1.5,
    topBuffer: 100
  };

  // **************************************************
  //  METHODS
  // **************************************************
  $.MessageBoxSetup = function(options) {
    $.extend(true, _defaults, options);
  };

  $.MessageBox = function(options) {
    if (!$.isPlainObject(options))
      options = {
        message: options
      };
    var deferred = $.Deferred();
    var settings = $.extend(true, {}, _defaults, options);
    settings.top = $.trim(settings.top).toLowerCase();

    // Remove focus from active element
    $(document.activeElement).not(".messagebox_content_input").trigger("blur");

    // Create MessageBox instance
    var instance = {
      deferred: deferred,
      keyCodes: {},
      settings: settings
    };
    if (settings.queue) {
      _queue.push(instance);
      _ExecuteQueue();
    } else {
      if (_active) _activeStack.push(_active);
      _CreateMessageBox(instance);
    }

    // Return Promise
    return deferred.promise();
  };

  // **************************************************
  //  FUNCTIONS
  // **************************************************
  function _ExecuteQueue() {
    if (_active || !_queue.length) return;
    _CreateMessageBox(_queue.shift());
  }

  function _CreateMessageBox(instance) {
    var settings = instance.settings;
    _active = instance;

    // Overlay
    var overlay = $("<div>", {
      class: "messagebox_overlay"
    })
      .css(_css.overlay)
      .appendTo("body");

    // Spacer
    var spacer = $("<div>", {
      class: "messagebox_spacer"
    })
      .css(_css.spacer)
      .appendTo(overlay);

    // MessageBox
    var messageBox = $("<div>", {
      class: "messagebox"
    })
      .addClass(settings.customClass)
      .css(_css.messagebox)
      .data("instance", instance)
      .appendTo(overlay);
    if (settings.width) messageBox.outerWidth(settings.width);

    // Content
    var content = $("<div>", {
      class: "messagebox_content",
      html: settings.message
    })
      .css(_css.content)
      .appendTo(messageBox);

    // Input
    if (
      settings.input !== false &&
      settings.input !== undefined &&
      settings.input !== null
    ) {
      var inputs = $("<div>", {
        class: "messagebox_content_inputs",
        css: _css.boxSizing
      }).appendTo(content);
      _ParseInputs(settings.input).appendTo(inputs).first().trigger("focus");
    }

    // Error
    $("<div>", {
      class: "messagebox_content_error",
      css: _css.boxSizing
    })
      .hide()
      .appendTo(content);

    // Buttons
    var buttonsWrapper = $("<div>", {
      class: "messagebox_buttons"
    })
      .css(_css.buttons)
      .appendTo(messageBox);

    // Button Done
    if (settings.buttonDone) {
      var buttons = $([]);
      if (typeof settings.buttonDone === "string") {
        buttons = buttons.add(
          _CreateButton(
            "messagebox_button_done",
            _constants.buttonDoneName,
            {
              text: settings.buttonDone,
              keyCode: _constants.keyCodeDone.concat(
                settings.buttonFail ? [] : _constants.keyCodeFail
              )
            },
            instance
          )
        );
      } else {
        $.each(settings.buttonDone, function(name, definition) {
          buttons = buttons.add(
            _CreateButton("messagebox_button_done", name, definition, instance)
          );
        });
      }
      buttons.appendTo(buttonsWrapper);
    }

    // Button Fail
    if (settings.buttonFail) {
      var buttons = $([]);
      if (typeof settings.buttonFail === "string") {
        buttons = buttons.add(
          _CreateButton(
            "messagebox_button_fail",
            _constants.buttonFailName,
            {
              text: settings.buttonFail,
              keyCode: _constants.keyCodeFail
            },
            instance
          )
        );
      } else {
        $.each(settings.buttonFail, function(name, definition) {
          buttons = buttons.add(
            _CreateButton("messagebox_button_fail", name, definition, instance)
          );
        });
      }
      if ($.trim(settings.buttonsOrder).toLowerCase().indexOf("d") === 0) {
        buttons.appendTo(buttonsWrapper);
      } else {
        buttons.prependTo(buttonsWrapper);
      }
    }

    // Calculate spacer's height
    var spacerHeight = 0;
    var spacerTopMargin = 0 - messageBox.outerHeight() - _constants.topBuffer;
    if ($.trim(settings.top).toLowerCase() === "auto") {
      // Auto: center vertically using flexbox
      overlay.css("justify-content", "center");
      spacerTopMargin = spacerTopMargin - $(window).height();
    } else {
      // Custom: use a spacer element to workoround different browsers' flexbox specs interpretation
      overlay.css("justify-content", "flex-start");
      spacerHeight = settings.top;
      // Calculate max-height
      if ($.trim(settings.top).toLowerCase().slice(-1) === "%") {
        // Percentage: set a fixed percentage value too
        messageBox.css(
          "max-height",
          100 -
            parseInt(settings.top, 10) * _constants.maxHeightCoefficient +
            "%"
        );
      } else {
        // Fixed: refresh on every window.resize event
        messageBox.data("fRefreshMaxHeight", true);
      }
    }

    // Show MessageBox
    spacer
      .data("spacerTopMargin", spacerTopMargin)
      .css({
        height: 0,
        "margin-top": spacerTopMargin
      })
      .animate(
        {
          height: spacerHeight,
          "margin-top": 0
        },
        settings.speed,
        function() {
          _SetMaxHeight(messageBox, $(window).height());
        }
      );
  }

  function _CreateButton(mainClass, name, definition, instance) {
    if (typeof definition === "string")
      definition = {
        text: definition
      };
    // Button
    var button = $("<button>", {
      class: mainClass,
      text: definition.text || ""
    })
      .addClass(definition.class)
      .css(_css.boxSizing)
      .on(
        "click",
        {
          name: name
        },
        _Button_Click
      );

    // KeyCodes
    $.each(_ParseKeycodes(definition.keyCode), function(i, keyCode) {
      instance.keyCodes[keyCode] = button;
    });

    return button;
  }

  function _ParseKeycodes(keyCodes) {
    if (typeof keyCodes === "number" || typeof keyCodes === "string")
      keyCodes = [keyCodes];
    var ret = [];
    if ($.isArray(keyCodes)) {
      ret = $.map(keyCodes, function(keycode) {
        return parseInt(keycode, 10) || undefined;
      });
    }
    return ret;
  }

  function _ParseInputs(settingsInput) {
    // Boolean: plain textbox
    if (settingsInput === true || typeof settingsInput === "string") {
      return _FormatInput(
        $("<input>", {
          value: settingsInput === true ? "" : settingsInput,
          type: "text"
        }),
        {
          autotrim: true
        }
      );
    }

    // Array: plain textboxes with default values
    if ($.isArray(settingsInput)) {
      var ret = $([]);
      $.each(settingsInput, function(i, value) {
        ret = ret.add(
          _FormatInput(
            $("<input>", {
              value: value,
              type: "text"
            }),
            {
              autotrim: true
            }
          )
        );
      });
      return ret;
    }

    // Object: multiple inputs
    if ($.isPlainObject(settingsInput)) {
      var ret = $([]);
      $.each(settingsInput, function(name, definition) {
        var input = _CreateInput(name, definition);
        if (definition.label !== undefined) {
          var label = $("<label>", {
            class: "messagebox_content_label",
            css: _css.boxSizing,
            text: definition.label
          });
          input.appendTo(label);
          ret = ret.add(label);
        } else {
          ret = ret.add(input);
        }
      });
      return ret;
    }

    // Default: custom jQuery object/selector or DOM element
    return $(settingsInput);
  }

  function _CreateInput(name, definition) {
    var type = $.trim(definition.type).toLowerCase();
    switch (type) {
      case "select":
        var select = _FormatInput($("<select>"), {
          name: name,
          title: definition.title,
          autotrim: false
        });
        var options = !$.isArray(definition.options)
          ? definition.options
          : definition.options.reduce(function(ret, item) {
              ret[item] = item;
              return ret;
            }, {});
        if (!options) {
          _Warning('No options provided for "' + name + '"');
          options = {
            "": "&nbsp;"
          };
        }
        var defaultSelected = false;
        $.each(options, function(value, html) {
          var option = $("<option>", {
            value: value,
            html: html
          }).appendTo(select);
          if (definition.default == value) {
            option.prop("selected", true);
            defaultSelected = true;
          }
        });
        // Fake placeholder
        if (!defaultSelected) {
          $("<option>", {
            value: "",
            text: definition.title
          })
            .prop({
              disabled: true,
              selected: true,
              hidden: true
            })
            .prependTo(select);
          select.find("option").css("color", select.css("color"));
          select
            .addClass("messagebox_content_input_selectplaceholder")
            .prop("selectedIndex", 0)
            .one("change", function() {
              select.find("option").css("color", "");
              select.removeClass("messagebox_content_input_selectplaceholder");
            });
        }
        return select;

      case "text":
      case "password":
      default:
        return _FormatInput(
          $("<input>", {
            type: type === "password" ? "password" : "text",
            maxlength: definition.maxlength,
            placeholder: definition.title,
            value: definition.default
          }),
          {
            name: name,
            title: definition.title,
            autotrim: definition.autotrim
          }
        );
    }
  }

  function _FormatInput(input, par) {
    if (par.autotrim !== false) input.on("blur", _Input_Blur);
    return input.addClass("messagebox_content_input").css(_css.boxSizing).attr({
      name: par.name,
      title: par.title
    });
  }

  function _GetInputsValues(messageBox) {
    var names = [];
    var values = [];
    messageBox
      .find(".messagebox_content_inputs")
      .find("input, select")
      .each(function() {
        var input = $(this);
        names.push(input.attr("name"));
        values.push(input.val());
      });
    if (!values.length) return undefined;
    var retObject = {};
    var valuesOnly = false;
    $.each(names, function(i, name) {
      if (name === undefined) {
        valuesOnly = true;
        return false;
      }
      retObject[name] = values[i];
    });
    if (valuesOnly && values.length === 1) return values[0];
    return valuesOnly ? values : retObject;
  }

  function _SetMaxHeight(messageBox, h) {
    if (messageBox.data("fRefreshMaxHeight"))
      messageBox.css(
        "max-height",
        h - messageBox.offset().top * _constants.maxHeightCoefficient
      );
  }

  function _Warning(message) {
    message = "jQuery MessageBox Warning: " + message;
    if (window.console.warn) {
      console.warn(message);
    } else if (window.console.log) {
      console.log(message);
    }
  }

  // **************************************************
  //  EVENTS
  // **************************************************
  function _Input_Blur(event) {
    var input = $(event.currentTarget);
    input.val($.trim(input.val()));
  }

  function _Button_Click(event) {
    var button = $(event.currentTarget);
    var buttonName = event.data.name;
    var messageBox = button.closest(".messagebox");
    var overlay = messageBox.closest(".messagebox_overlay");
    var spacer = overlay.children(".messagebox_spacer").first();
    var content = messageBox.children(".messagebox_content").first();
    var error = content.children(".messagebox_content_error").first();
    var instance = messageBox.data("instance");
    var inputValues = _GetInputsValues(messageBox);
    var filterFunc = button.hasClass("messagebox_button_done")
      ? instance.settings.filterDone
      : instance.settings.filterFail;

    // Filter
    error.hide().empty();
    var filterDef = $.type(filterFunc) !== "function"
      ? $.Deferred().resolve()
      : $.when(filterFunc(inputValues, buttonName)).then(function(ret) {
          // Bool false: abort
          if (ret === false) return $.Deferred().reject();
          var retType = $.type(ret);
          // Error: display error message and abort (NOTE: it requires jQuery 1.9+ or it will fall in the next case)
          if (retType === "error") return $.Deferred().reject(ret.message);
          // String or (jQuery) Object: display error and abort
          if (
            retType === "string" ||
            retType === "object" ||
            retType === "array"
          )
            return $.Deferred().reject(ret);
          // Everything else: continue
          return $.Deferred().resolve();
        });

    filterDef.then(
      function() {
        spacer.animate(
          {
            height: 0,
            "margin-top": spacer.data("spacerTopMargin")
          },
          instance.settings.speed,
          function() {
            // Remove DOM objects
            overlay.remove();

            // Resolve or Reject Deferred
            if (button.hasClass("messagebox_button_done")) {
              instance.deferred.resolve(inputValues, buttonName);
            } else {
              instance.deferred.reject(inputValues, buttonName);
            }

            if (_activeStack.length) {
              // Restore the last active instance
              _active = _activeStack.pop();
            } else {
              // Execute next Queue instance
              _active = undefined;
              _ExecuteQueue();
            }
          }
        );
      },
      function(errorMessage) {
        var errorMessageType = $.type(errorMessage);
        if (
          errorMessageType === "string" ||
          errorMessageType === "object" ||
          errorMessageType === "array"
        ) {
          error
            .css("max-width", content.width())
            .append(errorMessage)
            .slideDown(_constants.errorSpeed, function() {
              content.scrollTop(content.height());
            });
        }
      }
    );
  }

  function _Window_Resize(event) {
    if (!_active) return;
    var w = $(event.currentTarget).width();
    var h = $(event.currentTarget).height();
    $(document).find(".messagebox").each(function() {
      var messageBox = $(this);
      messageBox.css("min-width", messageBox.outerWidth() > w ? w : "");
      _SetMaxHeight(messageBox, h);
    });
  }

  function _Window_KeyDown(event) {
    if (!_active) return;
    var button = _active.keyCodes[event.which];
    if (button) {
      button
        .closest(".messagebox")
        .find(".messagebox_content_input")
        .trigger("blur");
      button.trigger("click");
    }
  }

  $(function() {
    $(window).on("resize", _Window_Resize).on("keydown", _Window_KeyDown);
  });
})(jQuery);

/******* MessageBox END *********/

/* CODE GENERATOR */
/* *************
I N I T
************* */
var BANNERWIDTH = 300,
  BANNERHEIGHT = 250,
  BANNERNAME = "myBanner",
  BANNERBG = "",
  USESASS = true;
$(function() {
  /* VARS */
  var objectsWithFX = {};
  var $_frames = $("#_frames");
  var $_fx = $("#_fx");
  /********/
  function dragDropImageLoader(dropTarget, imageHandler, onComplete) {
    dropTarget.addEventListener(
      "dragover",
      function(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        evt.dataTransfer.dropEffect = "copy";
      },
      false
    );
    dropTarget.addEventListener(
      "drop",
      function(evt) {
        evt.stopPropagation();
        evt.preventDefault();
        var files = evt.dataTransfer.files,
          len = files.length;
        for (var i = 0; i < len; i++) {
          var file = files[i];
          if (file.type.match(/*image.*/)) {
            var reader = new FileReader();
            reader.onload = (function(file, l, j, onComplete) {
              return function(evt) {
                var img = new Image();
                img.src = evt.target.result;
                img.setAttribute("data-filename", file.name);
                img.setAttribute("data-name", file.name.split(".")[0]);
                //img.setAttribute("width", file.width);
                //img.setAttribute("height", file.height);
                if (img.complete) {
                  imageHandler(img);
                } else {
                  img.addEventListener("load", function() {
                    imageHandler(this);
                  });
                }
                if (onComplete) {
                  if (l - 1 == j) {
                    onComplete();
                  }
                }
              };
            })(file, len, i, onComplete);
            reader.readAsDataURL(file);
          }
        }
      },
      false
    );
  }
  //EXAMPLE
  //dragDropImageLoader(DOM Element where you will drop stuff to, function that handle what to do with the image)
  var _images = [];
  var _code = document.getElementById("_code");
  var banner = document.getElementsByClassName("banner")[0];
  var newline = "\n";
  var tab = "\t";
  var _depth = 900;
  var $banner = $("#banner");
  var $_retina = $("#_retina");
  var retinaFactor = $_retina.prop("checked")?0.5:1;
  $_retina.click(function(){
    retinaFactor = $_retina.prop("checked")?0.5:1;
  })
  //UTILS
  function escapeRegExp(str) {
    return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
  }
  function replaceAll(target, search, replacement) {
    return target.replace(new RegExp(escapeRegExp(search), "g"), replacement);
  }
  function getNextHighestDepth() {
    return ++_depth;
  }
  function camelize(str) {
    return str
      .replace(/(?:^\w|[A-Z]|\b\w)/g, function(letter, index) {
        return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
      })
      .replace(/\s+/g, "");
  }
  /*TEMPLATE SYSTEM*/
  function templateCSS() {
    var s =
      "*, \r *:before, \r *:after, \r html, \r body { \r border: 0; \r margin: 0; \r padding: 0; \r font-size: 100%; \r font: inherit; \r vertical-align: baseline; } \r body { \r line-height: 1; \r font-family: Arial, Helvetica, sans-serif; } \r div { \r position: absolute; \r display: block; } \r ol, \r ul { \r list-style: none; } \r a { \r text-decoration: none; \r color: #000; \r border: none; } \r\n\n.banner { \r display: block; \r position: absolute; \r overflow: hidden; \r width: @BORDERWIDTH@; \r height: @BORDERHEIGHT@; \r background-color: @BGCOLOR@;\r @BANNERBG@ border: 1px solid #CCCCCC; \r box-sizing: content-box; \r cursor: pointer; \r outline: none; \r -webkit-tap-highlight-color: transparent; \r -moz-user-select: -moz-none; \r -webkit-user-select: none; \r -ms-user-select: none; \r user-select: none; \r -webkit-transform-style: preserve-3d; \r -ms-transform-style: preserve-3d; \r -moz-transform-style: preserve-3d; \r transform-style: preserve-3d; \r -webkit-transform: translate3d(0, 0, 0); \r -ms-transform: translate3d(0, 0, 0); \r -moz-transform: translate3d(0, 0, 0); \r transform: translate3d(0, 0, 0); \r perspective: 1000px; \r box-shadow: 0 0 1px transparent; \r backface-visibility: hidden; \r -webkit-backface-visibility: hidden; \r -moz-osx-font-smoothing: grayscale; } \r \r .animatable { \r display: block; \r position: absolute; \r box-sizing: border-box; \r } \r \r .animatable img { \r display: block; \r position: absolute; \r margin: 0; \r padding: 0; \r } \r  \r";
    return s;
  }
  var templateHTML =
    '<!DOCTYPE html>\n<html>\n<head>\n<title>@BANNERNAME@</title>\n<meta charset="UTF-8">\n<meta http-equiv="X-UA-Compatible" content="IE=edge">\n<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />\n<meta name="ad.size" content="width=@WIDTH@,height=@HEIGHT@">\n<style type="text/css" media="screen">\n@CSS@\n@ANIMATION-CSS@\n</style>\n@CDN@\n@LIBRARY-SASS@</head>\n<body>\n@HTML@\n@CLICKTAG@\n@LIBRARY-JS@\n</body>\n<s' + 'cript type="text/javascript">\nwindow.onload = function() {@JAVASCRIPT@\n@ANIMATION-JS@};\n</s' + "cript>\n</html>";
  var templateJSON = {
    BASIC:{
      CDN:"",//"<link rel=\"stylesheet\" href=\"styles.css\">\n",
      CLICKTAG: "",//"<s"+"cript type=\"text/javascript\" src=\"classanimation.js\"></s"+"cript>",
      JAVASCRIPT: "\n\tvar banner = document.getElementById(\"banner\");\n\tbanner.onclick = function() {\n\t\twindow.open(window.clickTag);\n\t};\n\t//START BANNER\t//Get classanimation.js at https://gist.github.com/emmanuelulloa/39dca8186f1ae82e2ada79a9b29d0615\n\n\tclassanimation.ready();"
    },
    DCM: {
      CDN:
        "<s" +
          "cript> var clickTag = 'https://h5validator.appspot.com/dcm'; </s" +
          "cript>\n" +
          "<s" +
          'cript src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js" type="text/javascript"></s' +
          "cript>\n" +
          "<s" +
          'cript src="https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_1.19.0_4cba7b163d6263b39d53727ed4c7bb6f_min.js" type="text/javascript"></s' +
          "cript>\n",
      CLICKTAG:
        '<a href="#" target="_blank" onclick="javascript:window.open(window.clickTag);">CTA</a>\n<p><a href="https://h5validator.appspot.com/dcm" target="_blank">Check your DoubleClick Campaign Manager creative</a></p>',
      JAVASCRIPT:
        "\n\tvar banner = document.getElementById(\"banner\");\n\tbanner.onclick = function() {\n\t\twindow.open(window.clickTag);\n\t};\n\t//START BANNER"
    },
    ADWORDS: {
      CDN:
        '<style rel="stylesheet" type="text/css">\n/* Google recommended */\n*\n{\npadding:0px;\nmargin:0px;\nfont-family: "Helvetica", "Verdana", "Sans-Serif";\n}\n</style>\n<s' +
          'cript src="https://tpc.googlesyndication.com/pagead/gadgets/html5/api/exitapi.js"></s' +
          "cript>",
      CLICKTAG:
        '<button id="cta">CTA</button>\n<p><a href="https://h5validator.appspot.com/adwords#/asset" target="_blank">Check your AdWords creative</a></p>',
      JAVASCRIPT:
        'var cta = document.getElementById("cta");\ncta.addEventListener("click", ExitApi.exit);\n'
    },
    DCSTUDIO: {
      CDN:
        "<s" +
          'cript src="http://s0.2mdn.net/ads/studio/Enabler.js" type="text/javascript"></s' +
          "cript>\n" +
          "<s" +
          'cript src="https://s0.2mdn.net/ads/studio/cached_libs/tweenmax_1.19.0_643d6911392a3398cb1607993edabfa7_min.js" type="text/javascript"></s' +
          "cript>\n" +
          "<s" +
          'cript src="https://s0.2mdn.net/ads/studio/cached_libs/timelinemax_1.19.0_4cba7b163d6263b39d53727ed4c7bb6f_min.js" type="text/javascript"></s' +
          "cript>\n",
      CLICKTAG:
        "<s" +
          "cript type=\"text/javascript\">\r\n var banner = document.getElementById('banner');\r\n banner.onclick = function(){\r\n Enabler.exit('clickTag');\r\n };\r\n  </s" +
          "cript>",
      JAVASCRIPT:
        "function adVisibilityHandler(evt) {\n\t\t\t//START BANNER\n\t\t}\n\t\tfunction pageLoadedHandler(evt) {\n\t\t\tif (Enabler.isVisible()) {\n\t\t\t\tadVisibilityHandler();\n\t\t\t} else {\n\t\t\t\tEnabler.addEventListener(\n\t\t\t\t\tstudio.events.StudioEvent.VISIBLE,\n\t\t\t\t\tadVisibilityHandler\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\tfunction enablerInitHandler(evt) {\n\t\t\tif (Enabler.isPageLoaded()) {\n\t\t\t\tpageLoadedHandler();\n\t\t\t} else {\n\t\t\t\tEnabler.addEventListener(\n\t\t\t\t\tstudio.events.StudioEvent.PAGE_LOADED,\n\t\t\t\t\tpageLoadedHandler\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t\tif (Enabler.isInitialized()) {\n\t\t\tenablerInitHandler();\n\t\t} else {\n\t\t\tEnabler.addEventListener(\t\t\t\t\n\t\t\t\tstudio.events.StudioEvent.INIT,\n\t\t\t\tenablerInitHandler\n\t\t\t);\n\t\t}"
    },
    SIZMEK: {
      CDN:
        "<s" +
          'cript src="scripts/EBLoader.js" type="text/javascript"></s' +
          'cript>\n<!-- //Contents of scripts/EBLoader.js:\nfunction loadServingSysScript(relativeUrl) {\n}\n//Load secure or insecure version of EBLoader\nloadServingSysScript("EBLoader.js");\n-->\n' +
          "<s" +
          'cript src="http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TweenMax.min.js" type="text/javascript"></s' +
          "cript>\n" +
          "<s" +
          'cript src="http://ds.serving-sys.com/BurstingcachedScripts/libraries/greensock/1_18_0/TimelineMax.min.js" type="text/javascript"></s' +
          "cript>\n",
      CLICKTAG:
        "<s" +
          "cript type=\"text/javascript\">\r\n var banner = document.getElementById('banner');\r\n banner.onclick = function(){\r\n Enabler.exit('clickTag');\r\n };\r\n  </s" +
          "cript>",
      JAVASCRIPT:
        "function init(){\n\tvar banner = document.getElementById('banner');\n\tbanner.onclick = function(){\n\t\tEB.clickthrough();\n\t};\n}\nfunction initEB(){\n\tif(!EB.isInitialized()){\n\t\tEB.addEventListener(EBG.EventName.EB_INITIALIZED, init);\n\t}else{\n\t\tinit();\n\t}\n}\ninitEB();\n"
    },
    FLASHTALKING: {
      CDN:
        '<!--\n/* save as manifest.js */\nFT.manifest({"filename":"@BANNERNAME@","width":"@WIDTH@","height":"@HEIGHT@","clickTagCount":1});\n-->\n<s' +
          'cript src="http://cdn.flashtalking.com/frameworks/js/api/2/8/html5API.js"></s' +
          "cript>\n",
      CLICKTAG:
        '<a class="ad" href="{{PUB_CLICKTHROUGH}}" target="_blank"><div><h1>Banner html code goes here</h1></div></a>',
      JAVASCRIPT:
        "var myFT = new FT();\nmyFT.addEventListener('ready', function(){\n//START ANIMATION\n});\nmyFT.applyClickTag(document.getElementById('banner'), 1);\n"
    },
    ATLAS: {
      CDN: "",
      CLICKTAG:
        '<a class="ad" href="{{PUB_CLICKTHROUGH}}" target="_blank"><div><h1>Banner html code goes here</h1></div></a>',
      JAVASCRIPT: ""
    }
  };
  function includeClassanimation(c, code){
    return replaceAll(
        c,
        "@CSS@",
        (USESASS
          ? "/************** โœ COPY + PASTE โœ **************/\n///Get classanimation.scss at https://gist.github.com/emmanuelulloa/6a8f2f1321417fffd29635dce7d8ad76\n@import \"classanimation\";\n@include banner(" +
              (BANNERWIDTH * retinaFactor) +
              "," +
              (BANNERHEIGHT * retinaFactor) +
              "," +
              $("#_color").val() +
              ");\n"
          : templateCSS()) + code.css
      );
  }
  function createTemplate(code) {
    var templateValue = $("#template").val();
    var c = "";
    /* TAGS UPDATES */
    if (templateValue === "NONE") {
      //c = replaceAll(c, "@ANIMATION-CSS@", createFXClassanimationSASS(USESASS));
      var scss = "";
      if(USESASS){
        scss = createFXClassanimationSASS(USESASS);
      }
      c =
        "<style>\n@CSS@" +
        newline +
        code.css +
        newline +
        scss + 
        "</style>" +
        newline +
        code.html;
    } else {
      c += templateHTML;
      c = replaceAll(c, "@CDN@", templateJSON[templateValue]["CDN"]);
      c = replaceAll(c, "@CLICKTAG@", templateJSON[templateValue]["CLICKTAG"]);
      c = replaceAll(
        c,
        "@JAVASCRIPT@",
        templateJSON[templateValue]["JAVASCRIPT"]
      );
      c = replaceAll(c, "@HTML@", code.html);
    }
    c = includeClassanimation(c, {css:"",html:""});
    c = replaceAll(c, "@WIDTH@", BANNERWIDTH);
    c = replaceAll(c, "@HEIGHT@", BANNERHEIGHT);
    c = replaceAll(c, "@BANNERNAME@", BANNERNAME);
    c = replaceAll(c, "@ANIMATION-JS@", createFXClassanimationJS(USESASS));
    c = replaceAll(c, "@ANIMATION-CSS@", createFXClassanimationSASS(USESASS) + newline + code.css + newline);
    if (BANNERBG != "") {
      c = replaceAll(
        c,
        "@BANNERBG@",
        "background-image: url('" + BANNERBG + "');\r"
      );
    } else {
      c = replaceAll(c, "@BANNERBG@", "");
    }
    c = replaceAll(c, "@BORDERWIDTH@", BANNERWIDTH - 2 + "px");
    c = replaceAll(c, "@BORDERHEIGHT@", BANNERHEIGHT - 2 + "px");
    c = replaceAll(c, "@BGCOLOR@", $("#_color").val());
    c = replaceAll(
      c,
      "@LIBRARY-JS@",
      +$_frames.val() > 1
        ? "<s" + "cript type='text/javascript' src='classanimation.js'></s" +  "cript>"
        : ""
    );
    c = replaceAll(
      c,
      "@LIBRARY-SASS@",
        USESASS
        ? '<link rel="stylesheet" href="styles.css">'
        : ""
    );//+$_frames.val() > 1 && USESASS
    return c;
  }
  var _lastSelected;
  var $_useSASS = $("#_useSASS");
  $_useSASS.click(function() {
    USESASS = $_useSASS.prop("checked");
    updateCode();
  });
  var $_include_size = $("#_include_size");
  $_include_size.change(function() {
    updateCode();
  });
  function createHTMLText(currentTarget) {
    var valCSS = ""; //_code.value;
    var valHTML = "";
    var len = _images.length;
    var include_size = +$_include_size.val();
    retinaFactor = $_retina.prop("checked")?0.5:1;
    for (var i = 0; i < len; i++) {
         var $img = $(_images[i]);
        if ($img[0] != currentTarget) {
          $img.css("outline", "none");
        }
        var id = $img.attr("data-name");     
      if (include_size != 4) {
        var x = Math.round(+parseInt($img.css("left")) * retinaFactor);
        var y = Math.round(+parseInt($img.css("top")) * retinaFactor);
        if (x == "") {
          x = 0;
        }
        if (y == "") {
          y = 0;
        }
        valCSS += "#" + id + " {" + newline;
        valCSS += tab + "left: " + x + "px;" + newline;
        valCSS += tab + "top: " + y + "px;" + newline;
        if (include_size == 2 || include_size == 3) {
          valCSS += tab + "width: " + Math.round(_images[i].width * retinaFactor) + "px;" + newline;
          valCSS += tab + "height: " + Math.round(_images[i].height * retinaFactor) + "px;" + newline;
          if (include_size == 3) {
            valCSS +=
              tab +
              "background-image: url('" +
              _images[i].getAttribute("data-filename") +
              "');" +
              newline;
          }
        }
        valCSS += "}" + newline;
      }
    }

    valHTML += '<div id="banner" class="banner">' + newline;
    for (i = 0; i < len; i++) {
      /* HTML */
      var x = Math.round(+parseInt($img.css("left")) * retinaFactor);
      var y = Math.round(+parseInt($img.css("top")) * retinaFactor);
      var img = _images[i];
      var style_css = "";
      if (include_size == 4){
        style_css = ' style="left: ' + x + 'px; top: ' + y + 'px;" ';
      }
      valHTML +=
        '\t<div id="' + img.getAttribute("data-name") + '" class="animatable"' + style_css + '>';
      if(include_size != 3){
      valHTML += newline + tab + "\t\t<img ";
      if (include_size == 1 || include_size == 4) {
        valHTML += 'width="' + Math.round(img.width * retinaFactor) + '" height="' + Math.round(img.height * retinaFactor) + '" ';
      }
      valHTML +=
        'src="' +
        img.getAttribute("data-filename") +
        '" alt="' +
        img.getAttribute("data-name") +
        '" />' +
        newline + "\t";        
      }
      valHTML += "</div>" + newline;
    }
    valHTML += "</div>" + newline;
    _code.value = createTemplate({ css: valCSS, html: valHTML });
    $(_code).select();
  }
  function updateCode() {
    createHTMLText();
  }
  function onDragStop(currentTarget) {
    //_lastSelected = currentTarget;
    createHTMLText(currentTarget);
  }
  var selectedObjectStyle = "1px solid deeppink";
  function doSelect(element) {
    if (_lastSelected) {
       $(_lastSelected).css("outline", "none");
    }
    _lastSelected = element;
    //console.log("doSelect", element);
    $(element)
      .css("z-index", getNextHighestDepth())
      .css("outline", selectedObjectStyle)
      .focus();
  }
  var _isFirstImageDrop = true;
  function removeImage() {
    if (_lastSelected) {
      var len = _images.length;
      for (var i = 0; i < len; i++) {
        //console.log(_images[i], _lastSelected);
        if (_images[i] == _lastSelected) {
          $(_lastSelected).remove();
          _images.splice(i, 1);
          break;
        }
      }
      len = _images.length;
      if(len > 1){
        _lastSelected = _images[0];
        doSelect(_lastSelected);
      }else{
        _lastSelected = undefined;
      }
      setTimeout(function() {
        updateCode();
      }, 500);
    }
  }

  function addImage(img) {
    if (_isFirstImageDrop) {
      $(".banner").html("");
      _isFirstImageDrop = false;
    }
    _images.push(img);
    /* IMG */
    var $img = $(img);
    var id = $img.attr("data-name");
    $img.attr("id", id);
    $(".banner").append(img);
    //var $draggableObj = $('#' + id);
    function imageLoadComplete(target) {
      var $draggableObj = $(target);
      $draggableObj.click(function(evt) {
        doSelect(evt.currentTarget);
        onDragStop(evt.currentTarget);
      });
      //https://stackoverflow.com/questions/10212683/jquery-drag-resize-with-css-transform-scale
      $draggableObj.draggable({
        start: function(event, ui) {
          ui.position.left = 0;
          ui.position.top = 0;
          doSelect(this);
        },
        drag: function(event, ui) {
          var zoomScale = Math.round(currentScreenZoom * 1000) / 1000;
          var changeLeft = ui.position.left - ui.originalPosition.left; // find change in left
          var newLeft = ui.originalPosition.left + changeLeft / zoomScale; // adjust new left by our zoomScale

          var changeTop = ui.position.top - ui.originalPosition.top; // find change in top
          var newTop = ui.originalPosition.top + changeTop / zoomScale; // adjust new top by our zoomScale

          ui.position.left = newLeft;
          ui.position.top = newTop;
        },
        stop: function() {
          onDragStop(this);
        }
      });
      $draggableObj.css("position", "absolute");
    }
    if (img.complete) {
      imageLoadComplete(img);
    } else {
      img.addEventListener("load", function(evt) {
        imageLoadComplete(evt.currentTarget);
      });
    }
  }
  /* IMAGES */
  function updateCodeLater(){
    setTimeout(function() {
        updateCode();
        buildLayers();
      }, 500);
  }
  dragDropImageLoader(
    banner,
    addImage,
    updateCodeLater
  );
  dragDropImageLoader(
    document.getElementsByClassName("layer-window")[0],
    addImage,
    updateCodeLater
  );
  
  /* GUIDES */
  dragDropImageLoader(_code, function(img) {
    BANNERWIDTH = img.width;
    BANNERHEIGHT = img.height;
    BANNERBG = img.dataset.filename;
    $(banner)
      .css("width", BANNERWIDTH + "px")
      .css("height", BANNERHEIGHT + "px")
      .css("background-image", "url(" + img.src + ")");
    updateCode();
  });
  /* click expander */
  var $clickExpander = $("#click-expander");
  var $editorHider = $("#editor-hider");
  var $expanderBtn = $("#expander-btn");
  var isExpanded = false;
  $clickExpander.click(function(evt) {
    $editorHider.slideToggle("fast", "swing");
    if (isExpanded) {
      isExpanded = false;
      $expanderBtn.removeClass('open').addClass('close');
    } else {
      isExpanded = true;
      $expanderBtn.removeClass('close').addClass('open');
    }
  });
  setTimeout(function() {
    $editorHider.slideToggle("fast", "swing");
    $expanderBtn.removeClass('open').addClass('close');
  }, 1000);
  /* NAME */
  $("#_bannerName").click(function(evt) {
    $prompt(
      "What is the name of the banner?",
      { bannerName: { type: "text", default: BANNERNAME } },
      function(data) {
        BANNERNAME = camelize(data.bannerName);
        updateCode();
      }
    );
  });
  /* SIZES */
  $("#size_sl").change(function(evt) {
    var thi$ = $(this);
    var val = thi$.val().split("x");
    BANNERWIDTH = +val[0];
    BANNERHEIGHT = +val[1];
    $(".banner")
      .css("width", BANNERWIDTH + "px")
      .css("height", BANNERHEIGHT + "px");
    updateCode();
    evt.preventDefault();
    evt.stopPropagation();
  });
  /* TEMPLATE */
  $("#template").change(function(evt) {
    updateCode();
    evt.preventDefault();
    evt.stopPropagation();
  });
  /* COLOR */
  $("#_color").change(function(evt) {
    var thi$ = $(this);
    $(".banner").css("background-color", thi$.val());
    updateCode();
  });
  /* DELETE */
  var $deleteObject = $("#delete-object");
  $deleteObject.click(function() {
    $.MessageBox({
      buttonDone: "Yes",
      buttonFail: "No",
      message: "Are you sure you want to delete the object?"
    })
      .done(function() {
      removeImage();
      buildLayers();
    })
      .fail(function() {
      // do nothing
    });
  });

  /* SHOW STAGE */
  var $_showStage = $("#_showStage");
  $_showStage.click(function() {
    if ($_showStage.prop("checked")) {
      $banner.css("overflow", "visible");
    } else {
      $banner.css("overflow", "hidden");
    }
  });
  /* RETINA */
  $("#_retina").click(function(){
    updateCode();
  });
  /* ONION SKIN */
  var $_onionSkin = $("#_onionSkin");
  $_onionSkin.click(function() {
    for (var i = 0; i < _images.length; i++) {
      var img = _images[i];
      if ($_onionSkin.prop("checked")) {
        img.style.opacity = 0.5;
      } else {
        img.style.opacity = 1;
      }
    }
  });

  /* ZOOM BANNER */
  var currentScreenZoom = 1;
  var zoomInc = 0.05;
  var $stageZoomIn = $("#zoom-in");
  var $stageZoomOut = $("#zoom-out");
  var $stageActualSize = $("#actual-size");
  var maxScreenZoom = 3;
  var minScreenZoom = 0.25;
  function doStageZoom() {
    $banner[0].style.transform =
      "translate(-50%, -50%) scale(" + currentScreenZoom + ")";
  }
  $stageZoomIn.click(function(evt) {
    currentScreenZoom += zoomInc;
    if (currentScreenZoom > maxScreenZoom) {
      currentScreenZoom = maxScreenZoom;
    }
    doStageZoom();
  });
  $stageZoomOut.click(function(evt) {
    currentScreenZoom -= zoomInc;
    if (currentScreenZoom < minScreenZoom) {
      currentScreenZoom = minScreenZoom;
    }
    doStageZoom();
  });
  $stageActualSize.click(function(evt) {
    currentScreenZoom = 1;
    doStageZoom();
  });
  /* KEYBOARD MANIPULATION */
  $(document).keyup(function(evt) {
    console.log(msgIsOpen, isExpanded);
    if (!msgIsOpen && !isExpanded) {
      var step = evt.shiftKey ? 10 : 1;
      var $last = $(_lastSelected),
          y = parseFloat($last.css("top")),
          x = parseFloat($last.css("left"));
      if (evt.which > 36 && evt.which < 41) {
        switch (evt.which) {
          case 38:
            $last.css("top", y - 1 * step + "px");
            break;
          case 40:
            $last.css("top", y + 1 * step + "px");
            break;
          case 37:
            $last.css("left", x - 1 * step + "px");
            break;
          case 39:
            $last.css("left", x + 1 * step + "px");
            break;
        }
      }
      createHTMLText(_lastSelected);
      evt.preventDefault();
      evt.stopPropagation();
      evt.stopImmediatePropagation();
    }
  });

  /* ALIGN */
  var $alignElement = $("#align-element");
  $alignElement.change(function(evt) {
    if (_lastSelected) {
      //console.log(_lastSelected);
      var $last = $(_lastSelected);
      var w = parseFloat(_lastSelected.width);
      var h = parseFloat(_lastSelected.height);
      var val = $alignElement.val();
      if (val == "tl") {
        $last.css("top", "0px").css("left", "0px");
      } else if (val == "t") {
        $last.css("top", "0px");
      } else if (val == "tr") {
        $last.css("top", "0px").css("left", Math.round(BANNERWIDTH - w) + "px");
      } else if (val == "l") {
        $last.css("left", "0px");
      } else if (val == "c") {
        $last.css("left", Math.round((BANNERWIDTH - w) / 2) + "px");
      } else if (val == "m") {
        $last.css("top", Math.round((BANNERHEIGHT - h) / 2) + "px");
      } else if (val == "r") {
        $last.css("left", Math.round(BANNERWIDTH - w) + "px");
      } else if (val == "bl") {
        $last
          .css("top", Math.round(BANNERHEIGHT - h) + "px")
          .css("left", "0px");
      } else if (val == "b") {
        $last.css("top", Math.round(BANNERHEIGHT - h) + "px");
      } else if (val == "br") {
        $last
          .css("top", Math.round(BANNERHEIGHT - h) + "px")
          .css("left", Math.round(BANNERWIDTH - w) + "px");
      }
      updateCode();
    }
    $alignElement.val("none");
  });
  /* COPY CODE */
  $("#copy_btn").click(function() {
    $("#_code").select();
    document.execCommand("copy");
  });
  /* FX */
  var msgIsOpen = false;
  function $prompt(message, val, fn) {
    $.MessageBox({
      message: message,
      input: val
    }).done(function(data) {
      fn(data);
      msgIsOpen = true;
    }).fail(function(data){
      msgIsOpen = false;
    });
  }
  var fxTransitionOpts = {
    left: "โฌ… Left",
    right: "โžก Right",
    top: "โฌ† Up",
    bottom: "โฌ‡ Down",
    rotateIn: "โคต Rotate In",
    rotateOut: "โคด Rotate Out",
    spinIn: "โ†บ Spin left",
    spinOut: "โ†ป Spin right",
    zoomInFadeOut: "โž• Big",
    zoomOutFadeOut: "โž– Small",
    fadeOut: "๐Ÿ’ก Fade",
    show: "โœ”๏ธ Show",
    hide: "๐Ÿšซ Hide"
  };
  var offset = "500%";
  var fxClassanimationDict = {
    show: "show",
    hide: "hide",
    left: "x(-" + offset + "); opacity: 0",
    right: "x(" + offset + "); opacity: 0",
    top: "y(-" + offset + "); opacity: 0",
    bottom: "y(" + offset + "); opacity: 0",
    zoomInFadeOut: "scale(2); opacity: 0",
    zoomOutFadeOut: "scale(0)",
    rotateIn: "rotate(180deg); opacity: 0",
    rotateOut: "rotate(-180deg); opacity: 0",
    spinIn: "transform(0px,0px,0.7,2turn); opacity: 0",
    spinOut: "transform(0px,0px,1.3,-2turn); opacity: 0",
    fadeIn: "fadeIn",
    fadeOut: "fadeOut"
  };  
  var fxEaseSassDict = {
    ease: "ease",
    "ease-in": "ease-in",
    "ease-out": "ease-out",
    "ease-in-out": "ease-in-out",
    "cubic-bezier(.65, 1.95, .03, .32)": "ease('bounce')",
    "cubic-bezier(.175, .885, .32, 1.275)": "ease('swing')",
    "cubic-bezier(.41, .41, .35, 1.2)": "ease('overshoot')",
    "cubic-bezier(.755, .05, .855, .06)": "ease('snap')",
    "cubic-bezier(.5, 0, .8, .15)": "ease('anticipate')",
    "cubic-bezier(.2, 1, .9, -0.5)": "ease('hesitate')",
    linear: "linear"
  };
  var fxEasesOpts = {
    ease: "Ease",
    "ease-in": "Ease In",
    "ease-out": "Ease Out",
    "ease-in-out": "Ease In Out",
    "cubic-bezier(.65, 1.95, .03, .32)": "Bounce",
    "cubic-bezier(.175, .885, .32, 1.275)": "Swing",
    "cubic-bezier(.41, .41, .35, 1.2)": "Overshoot",
    "cubic-bezier(.755, .05, .855, .06)": "Snap",
    "cubic-bezier(.5, 0, .8, .15)": "Anticipate",
    "cubic-bezier(.2, 1, .9, -0.5)": "Hesitate",
    linear: "Linear"
  };
  var fxEaseDict = {
    Ease: "ease",
    "Ease In": "ease-in",
    "Ease Out": "ease-out",
    "Ease In Out": "ease-in-out",
    Bounce: "cubic-bezier(.65, 1.95, .03, .32)",
    Swing: "cubic-bezier(.175, .885, .32, 1.275)",
    Overshoot: "cubic-bezier(.41, .41, .35, 1.2)",
    Snap: "cubic-bezier(.755, .05, .855, .06)",
    Anticipate: "cubic-bezier(.5, 0, .8, .15)",
    Hesitate: "cubic-bezier(.2, 1, .9, -0.5)",
    Linear: "linear"
  };
  var fxObj = {
    transformOrigin: {
      type: "select",
      label: "โœœ Transform Origin",
      title: "Select the pivot point of the element",
      options: {
        "0% 0%": "โ†– top left",
        "50% 0%": "โฌ† top",
        "100% 0%": "โ†— top right",
        "0% 50%": "โฌ… left",
        "50% 50%": "โœ› center",
        "100% 50%": "โžก right",
        "0% 100%": "โ†™ bottom left",
        "50% 100%": "โฌ‡ bottom",
        "100% 100%": "โ†˜ bottom right"
      },
      default: "50% 50%"
    },
    frameIn: {
      type: "select",
      label: "โžก๏ธ Enter at frame #",
      title: "Select when the element comes in",
      options: "0123".split(""),
      default: "1"
    },
    intro: {
      type: "select",
      label: "๐ŸŽฆ Intro transition",
      title: "Select the intro transition",
      options: fxTransitionOpts,
      default: "fadeOut"
    },
    easeIn: {
      type: "select",
      label: "๐Ÿ“ˆ Timing function in",
      title: "Select the easing function",
      options: fxEasesOpts,
      default: "ease-out"
    },
    introDelay: {
      type: "text",
      label: "โฑ๏ธ Intro delay duration",
      title: "How much time to wait for the transition before it happens in this scene",
      default: "0"
    },
    frameOut: {
      type: "select",
      label: "โฌ…๏ธ Exit at frame #",
      title: "Select when the element goes away (zero if it doesn't)",
      options: "0123".split(""),
      default: "0"
    },
    outro: {
      type: "select",
      label: "๐ŸŽฆ Outro transition",
      title: "Select the outro transition",
      options: fxTransitionOpts,
      default: "fadeOut"
    },
    easeOut: {
      type: "select",
      label: "๐Ÿ“‰ Timing function out",
      title: "Select the easing function",
      options: fxEasesOpts,
      default: "ease-in"
    }
  };
  function updateFrames() {
    var l = +$_frames.val(),
      s = "0",
      c = 1;
    while (l--) {
      s += c + "";
      c++;
    }
    var frames = s.split("");
    for (var k in objectsWithFX) {
      objectsWithFX[k].value.frameIn.options = frames;
      objectsWithFX[k].value.frameOut.options = frames;
    }
    fxObj.frameIn.options = frames;
    fxObj.frameOut.options = frames;
  }
  function saveFXChanges(data) {
    var objectName = $(_lastSelected).attr("id"),
      configObj;
    configObj = objectsWithFX[objectName];
    configObj.value.frameIn.default = data.frameIn;
    configObj.value.easeIn.default = data.easeIn;
    configObj.value.introDelay.default = data.introDelay;
    configObj.value.intro.default = data.intro;
    configObj.value.frameOut.default = data.frameOut;
    configObj.value.easeOut.default = data.easeOut;
    configObj.value.outro.default = data.outro;
    configObj.value.transformOrigin.default = data.transformOrigin;
    updateCode();
  }
  ///Sort images
  function sortByZIndex(direction){
    _images.sort(function(a,b){
      var x = +a.style.zIndex || 0;
      var y = +b.style.zIndex || 0;
      //console.log(x, y, direction);
      if(direction == 0){
        if(x < y) {return -1;}
        if(x > y) {return 1;}
      }else{
        if(x < y) {return 1;}
        if(x > y) {return -1;}
      }
      return 0;
    });
  }
  function sortBySize(direction){
    _images.sort(function(a,b){
      var x = (parseFloat(a.width) * parseFloat(a.height));
      var y = (parseFloat(b.width) * parseFloat(b.height));
      //console.log(x, y, direction);
      if(direction == 0){
        if(x < y) {return -1;}
        if(x > y) {return 1;}
      }else{
        if(x < y) {return 1;}
        if(x > y) {return -1;}
      }
      return 0;
    });
  }
  function sortByLeft(direction){
    _images.sort(function(a,b){
      var x = parseFloat(a.style.left);
      var y = parseFloat(b.style.left);
      //console.log(x, y, direction);
      if(direction == 0){
        if(x < y) {return -1;}
        if(x > y) {return 1;}
      }else{
        if(x < y) {return 1;}
        if(x > y) {return -1;}
      }
      return 0;
    });
  }
  function sortByTop(direction){
    _images.sort(function(a,b){
      var x = parseFloat(a.style.top);
      var y = parseFloat(b.style.top);
      //console.log(x, y, direction);
      if(direction == 0){
        if(x < y) {return -1;}
        if(x > y) {return 1;}
      }else{
        if(x < y) {return 1;}
        if(x > y) {return -1;}
      }
      return 0;
    });
  }
  function sortByName(direction){
    _images.sort(function(a,b){
      var x = a.dataset.name.toLowerCase();
      var y = b.dataset.name.toLowerCase();
      //console.log(x, y, direction);
      if(direction == 0){
        if(x < y) {return -1;}
        if(x > y) {return 1;}
      }else{
        if(x < y) {return 1;}
        if(x > y) {return -1;}
      }
      return 0;
    });
  }
  var $sort = $('#_sort'), $sortOrder = $('#_sortOrder');
  function sortChange(evt){
    var sort = $sort.val();
    var order = +$sortOrder.val();
    if(sort == "name"){
      sortByName(order, order);
    }else if(sort == "zindex"){
      sortByZIndex(order, order);
    }else if(sort == "size"){
      sortBySize(order, order);
    }else if(sort == "left"){
      sortByLeft(order, order);
    }else if(sort == "top"){
      sortByTop(order, order);
    }
    buildLayers();
    updateCode();
    //$sort.val("none");
  }
  $sort.change(sortChange);
  $sortOrder.change(sortChange);
  ///Magic!
  var $magic = $("#_magic");
  function doMagic(objectName, k, val, delay, f1, f2){
    if (!objectsWithFX[objectName]) {
          //add it to the dictionary and clone the default fxObj
          objectsWithFX[objectName] = {
            key: k,
            value: JSON.parse(JSON.stringify(fxObj))
         };
    }
    obj = objectsWithFX[objectName];
    _slideAnimatorFrame = Math.max(f1, _slideAnimatorFrame);
    obj.value.frameIn.default = f1 + "";
    obj.value.frameOut.default = f2 + "";
    obj.value.introDelay.default = delay + "";
    if(val == 'fade'){
      obj.value.intro.default = "fadeOut";
      obj.value.easeIn.default = "linear";
      obj.value.outro.default = "fadeOut";
      obj.value.easeOut.default = "linear";
    }else if(val == 'slide'){
      obj.value.intro.default = "left";
      obj.value.easeIn.default = "ease-out";
      obj.value.outro.default = "right";
      obj.value.easeOut.default = "ease-in";
    }else if(val == 'drop'){
      obj.value.intro.default = "top";
      obj.value.easeIn.default = "cubic-bezier(.41, .41, .35, 1.2)";
      obj.value.outro.default = "bottom";
      obj.value.easeOut.default = "cubic-bezier(.5, 0, .8, .15)";
    }else if(val == 'jump'){
      obj.value.intro.default = "bottom";
      obj.value.easeIn.default = "cubic-bezier(.41, .41, .35, 1.2)";
      obj.value.outro.default = "top";
      obj.value.easeOut.default = "ease-in";
    }else if(val == 'pop'){
      obj.value.intro.default = "zoomOutFadeOut";
      obj.value.easeIn.default = "cubic-bezier(.65, 1.95, .03, .32)";
      obj.value.outro.default = "zoomOutFadeOut";
      obj.value.easeOut.default = "cubic-bezier(.2, 1, .9, -0.5)";
    }
  }
  var _slideAnimatorFrame = 1;
  var _biggestSlideAnimatorFrame = _slideAnimatorFrame;
  $magic.change(function(evt) {
    if ($magic.val() != "none") {
      $prompt("๐ŸŽž๏ธ Select frames ", {
    startFrame: {
      type: "text",
      label: "โžก Enter at frame",
      title: "Select the in frame",
      default: _slideAnimatorFrame
    },
    endFrame: {
      type: "text",
      label: "โฌ… Exit at frame",
      title: "Select the out frame",
      default: "0"
    },
  }, function(data) {
        ///console.log("DATA", data.endFrame, data.startFrame);
        var len = _images.length;
        var delay = 0.7;
        for (var i = 0; i < len; i++) {
          if (_images[i].style.visibility != "hidden") {
            var objectName = $(_images[i]).attr("id");
            doMagic(objectName, _images[i], $magic.val(), delay, data.startFrame, data.endFrame);
            delay += 0.1;
            delay = Math.round(delay * 100) / 100;
            _biggestSlideAnimatorFrame = Math.max(_biggestSlideAnimatorFrame, +data.endFrame);
          }
        }
        ///$_frames.val(_slideAnimatorFrame + 1);
        $_frames.val(_biggestSlideAnimatorFrame);
        updateFrames();
        updateCode();
        $_fx.show();
      });

    }else{
      //Message
    }
  });
  $("#_hide-all").click(function(evt){
      var len = _images.length;
      for (var i = 0; i < len; i++) {
        _images[i].style.visibility = "hidden";
      }
      buildLayers();
  });
  $("#_show-all").click(function(evt){
      var len = _images.length;
      for (var i = 0; i < len; i++) {
        _images[i].style.visibility = "visible";
      }
      buildLayers();
  });
  $_frames.change(function(evt) {
    updateFrames();
    var l = +$_frames.val();
    if (l > 0) {
      $_fx.show();
    } else {
      $_fx.hide();
    }
  });
  $_fx.click(function(evt) {
    updateFrames();
    if (_lastSelected) {
      var objectName = $(_lastSelected).attr("id"),
        configObj;
      if (!objectsWithFX[objectName]) {
        //add it to the dictionary and clone the default fxObj
        objectsWithFX[objectName] = {
          key: _lastSelected,
          value: JSON.parse(JSON.stringify(fxObj))
        };
      }
      configObj = objectsWithFX[objectName];
      $prompt("๐ŸŽž๏ธ Transition for " + objectName, configObj.value, saveFXChanges);
      $('[name="introDelay"]').attr("type", "number").attr("min", "0").attr("step", "0.1").css("width", "100px");
    } else {
      $.MessageBox({
        message: "There is no a selected object",
        buttonDone: "OK"
      });
    }
    evt.preventDefault();
    evt.stopPropagation();
  });
  ///Create FX Code
  function createFXClassanimationSASS(includeSASS) {
    var l = +$_frames.val();
    //if there are frames
    if (l && includeSASS) {
      var s = ["\n/************** โœ COPY + PASTE โœ **************/\n"];
      s.push("\n///ANIMATION SETUP\n");
      //SCSS Setup
      for (var k in objectsWithFX) {
        var obj = objectsWithFX[k];
        var transitionIn =
          "transition(0.7s, " + fxEaseSassDict[obj.value.easeIn.default] + ")";
        var fxIn = obj.value.intro.default;
        s.push("\n#" + k + " {\n");
        if(fxIn == "fadeOut"){
          s.push("\topacity: 0;\n");
        }else{
          if(fxIn == 'show' || fxIn == 'hide'){
             if(fxIn == 'show'){
               s.push ("\t@include hide();\n");
             }
          }else{
            s.push ("\t@include " + fxClassanimationDict[fxIn] + ";\n");
            s.push("\t@include " + transitionIn + ";\n");
          }
        }
        s.push(
          "\t@include origin(" + obj.value.transformOrigin.default + ");\n}"
        );
      }
      //Slides
      s.push("\n///TIMELINE\n");
      for (var i = 0; i < l; i++) {
        var currFrame = i + 1;
        s.push("\n/* SLIDE " + currFrame + " */\n \n");
        s.push(".slide" + currFrame + " {\n");
        for (k in objectsWithFX) {
          obj = objectsWithFX[k];
          fxIn = obj.value.intro.default;
          //Intro
          if (obj.value.frameIn.default == currFrame) {
            s.push("\t#" + k + " {\n");
            if(fxIn == "fadeOut"){
              s.push("\t\t@include fadeIn();\n"); 
            }else{
              if(fxIn == 'show' || fxIn == 'hide'){
                 if(fxIn == 'show'){
                   s.push ("\t\t@include show();\n");
                 }
              }else{
                   s.push("\t\topacity:1;\n");
                   s.push("\t\t@include reset();\n");             
              }
            }
            if(obj.value.introDelay.default != '0'){
              s.push("\t\t@include transitionDelay(" + obj.value.introDelay.default + "s);\n");
            }
            s.push("\t}\n");
          }
          //Outro
          if (obj.value.frameOut.default == currFrame) {
            s.push("\t#" + k + " {\n");
            var transitionOut = "transition(0.7s, " + fxEaseSassDict[obj.value.easeOut.default] + ", 0s)";
            var fxOut = obj.value.outro.default; 
            if(fxOut == 'fadeOut'){
              s.push("\t\t@include fadeOut();\n"); 
            }else{
              s.push(
              "\t\t@include " +
                fxClassanimationDict[fxOut] +
                ";\n"
              );
              if(obj.value.outro.default == 'show' || obj.value.outro.default == 'hide'){
                //do nothing
              }else{
                s.push("\t\t@include " + transitionOut + ";\n");
              }
            }
            s.push("\t}\n");
          }
        }
        s.push("}\n");
      }
      s.push("\n/************** โœ COPY + PASTE โœ **************/\n");
      return s.join(" ");
    }
    return "";
  }
  function createFXClassanimationJS(includeSASS){
    var l = +$_frames.val();
    //classanimation
    if (l && includeSASS) {
      var s = "\n\tclassanimation.play(" + l + ",3);\n";
      return s;
    }
    return "";
  }
  /// OLD IMPLEMENTATION
  /*
  var fxCSSDict = {
    left: "transform: translateX(-" + offset + ");",
    right: "transform: translateX(" + offset + ");",
    top: "transform: translateY(-" + offset + ");",
    bottom: "transform: translateY(" + offset + ");",
    zoomInFadeOut: "transform: scale(2,2); opacity: 0;",
    zoomOutFadeOut: "transform: scale(0,0); opacity: 0;",
    rotateIn: "transform: rotate(180deg); opacity: 0;",
    rotateOut: "transform: rotate(-180deg); opacity: 0;",
    spinIn: "transform: scale(0.7) rotate(2turn); opacity: 0;",
    spinOut: "transform: scale(1.3) rotate(-2turn); opacity: 0;",
    fadeIn: "transform: none; opacity: 1;",
    fadeOut: "transform: none; opacity: 0;"
  };
  var fxSassDict = {
    left: "setX(-" + offset + ");",
    right: "setX(" + offset + ");",
    top: "setY(-" + offset + ");",
    bottom: "setY(" + offset + ");",
    zoomInFadeOut: "setScale(2);\n\topacity: 0;",
    zoomOutFadeOut: "setScale(0);\n\topacity: 0;",
    rotateIn: "setRotate(90deg);\n\topacity: 0;",
    rotateOut: "setRotate(90deg);\n\topacity: 0;",
    spinIn: "setTransform(0px,0px,0.7,2turn);\n\topacity: 0;",
    spinOut: "setTransform(0px,0px,1.3,-2turn);\n\topacity: 0;",
    fadeIn: "reset();\n\topacity: 1;",
    fadeOut: "reset();\n\topacity: 0;"
  };
  var fxJSDict = {
    left: { translateX: "-" + offset },
    right: { translateX: offset },
    top: { translateY: "-" + offset },
    bottom: { translateY: offset },
    zoomInFadeOut: { scale: "2,2", opacity: "0" },
    zoomOutFadeOut: { scale: "0.01,0.01", opacity: "0" },
    rotateIn: { rotate: "90deg", opacity: "0" },
    rotateOut: { rotate: "-90deg", opacity: "0" },
    spinIn: { scale: "0.7", rotate: "2turn", opacity: "0" },
    spinOut: { scale: "1.3", rotate: "-2turn", opacity: "0" },
    fadeIn: { opacity: "1" },
    fadeOut: { opacity: "0" }
  };
  function createFXJS() {
    var l = +$_frames.val();
    //MiniTween
    if (l) {
      var s = ["// < ANIMATION > \n \nvar frameDuration = 2; \n"];
      for (var i = 0; i < l; i++) {
        s.push("MiniTween.timeline(function(){ \n");
        for (var k in objectsWithFX) {
          var obj = objectsWithFX[k];
          if (obj.value.frameIn.default == i + 1 + "") {
            s.push('\tMiniTween.to("' + k + '", "0.5s", ');
            s.push('{ transform:"none", opacity: 1}, ');
            s.push('"' + obj.value.easeIn.default + '"');
            s.push(");\n");
          }
          if (obj.value.frameOut.default == i + 1 + "") {
            s.push('\tMiniTween.to("' + k + '", "0.3s", ');
            s.push(JSON.stringify(fxJSDict[obj.value.outro.default]));
            s.push(",");
            s.push('"' + obj.value.easeOut.default + '"');
            s.push(', "0.5s");\n');
          }
        }
        if (i == 0) {
          s.push("\n}, 0.2); \n");
        } else {
          s.push("\n}, frameDuration); \n");
        }
      }
      s.push("\n//</ ANIMATION >");
      return s.join(" ");
    }
    return "";
  }

  function createFXCSS(includeSass) {
    var l = +$_frames.val();
    if (l) {
      var s = ["// < ANIMATION > //\n \n"];
      if (!includeSass) {
        //CSS
        for (var k in objectsWithFX) {
          var obj = objectsWithFX[k];
          s.push("\n#" + k + "{\n");
          var transform = fxCSSDict[obj.value.intro.default] + "\n";
          s.push("-webkit-" + transform);
          s.push("-ms-" + transform);
          s.push("-moz-" + transform);
          s.push(transform);
          var transition =
            "transition: opacity 0.5s linear 0s, transform 0.5s " +
            obj.value.easeIn.default +
            " 0s;" +
            "\n";
          s.push("-webkit-" + transition);
          s.push("-ms-" + transition);
          s.push("-moz-" + transition);
          s.push(transition);
          var transformOrigin =
            "transform-origin: " + obj.value.transformOrigin.default;
          s.push("-webkit-" + transformOrigin + ";\n");
          s.push("-ms-" + transformOrigin + ";\n");
          s.push("-moz-" + transformOrigin + ";\n");
          s.push(transformOrigin + ";\n");
          s.push("\n}");
        }
      } else {
        //SASS
        
        for (var k in objectsWithFX) {
          var obj = objectsWithFX[k];
          var transition =
            "transition($normal, " +
            fxEaseSassDict[obj.value.easeIn.default] +
            ", 0s, true);";
          s.push("\n#" + k + " {\n");
          s.push("\t@include " + fxSassDict[obj.value.intro.default] + "\n");
          s.push("\t@include " + transition + "\n");
          s.push(
            "\t@include setOrigin(" +
              obj.value.transformOrigin.default +
              ");\n}"
          );
        }
        
      }
      s.push("\n// </ ANIMATION > //");
      return s.join(" ");
    }
    return "";
  }
  */
  //UX IMPROVEMENTS
  $("#reset").click(function(){
    location.reload(false);
  });
  window.clickLayer = function(element){
    var img = document.getElementById(element.dataset.image);
    doSelect(img);
    buildLayers();
  }
  function buildLayers(){
    var len = _images.length;
    var $list = $(".layer-comps .element-list");
    $list.empty();
    var s = "";
    for(var i = 0; i < len; i++){
      var img = $(_images[i]);
      var isChecked = img.css('visibility') == 'hidden';
      var checked = "checked";
      if(isChecked){
        checked = '';
      }
      var idTxt = img.attr("id");
      if(_images[i] == _lastSelected){
        s += '<span class="line selected" data-image="' + idTxt +'"><input id="layer' + i + '" type="checkbox" class="layer-checkbox small-checkbox" ' + checked + ' value="' + idTxt + '"><label class="small-checkbox-label" for="layer'+i+'">'+idTxt+'</label></span>'; 
      }else{
        s += '<span class="line" onclick="clickLayer(this);" data-image="' + idTxt +'"><input id="layer' + i + '" type="checkbox" class="layer-checkbox small-checkbox" ' + checked + ' value="' + idTxt + '"><label class="small-checkbox-label" for="layer'+i+'">'+idTxt+'</label></span>';  
      }
    }
    $list.html(s);
    var $layerCheckbox = $(".layer-checkbox");
      $layerCheckbox.click(function(evt){
        evt.stopImmediatePropagation();
        evt.stopPropagation();
        ///evt.preventDefault();
      });
      $layerCheckbox.change(function(evt){
        evt.stopImmediatePropagation();
        evt.stopPropagation();
        var thi$ = $(this);
        var id = thi$.attr('value');
        var isChecked = thi$.prop("checked");
        var $target = $("#" + id);
        if(isChecked){
          //$target.css("display", "block");
          $target.css("visibility", "visible");
        }else{
          //$target.css("display", "none");
          $target.css("visibility", "hidden");
        }
        //console.log(thi$, id, isChecked, $target);
      });    
  }
  $("#open-layers").click(function(){
    buildLayers();
    $(".layer-comps").css("display", "block");
  });
  $(".layer-comps .close").click(function(){
    $(".layer-comps").css("display", "none");
  });
//END
});
//Prevent scrolling
document.body.addEventListener(
  "touchmove",
  function(event) {
    event.preventDefault();
  },
  false
);

              
            
!
999px

Console