<div class="wrap">
<svg width="28.2" height="31" viewBox="0 0 28.2 31">
<path id="st0" fill="none" stroke-width="0.2" stroke="#3D8CD0" d="M27.7,13.1v13.6c-0.7,0.5-1.4,1-2.3,1.4c-0.9,0.5-1.8,0.9-2.9,1.2s-2.2,0.6-3.4,0.9c-1.2,0.2-2.5,0.3-3.9,0.3
	c-2.5,0-4.6-0.3-6.5-1c-1.8-0.7-3.4-1.7-4.6-3c-1.2-1.3-2.1-2.9-2.7-4.7c-0.6-1.8-0.9-3.9-0.9-6.1c0-2.3,0.3-4.5,0.9-6.3
	S3,5.8,4.2,4.5c1.2-1.3,2.7-2.3,4.5-3c1.8-0.7,3.8-1,6.1-1c2,0,3.8,0.3,5.3,0.8c1.5,0.5,2.8,1.2,3.8,2.1c1,0.9,1.8,1.9,2.4,3.1
	c0.6,1.2,1,2.4,1.2,3.7l-9.1,0.8c-0.2-1-0.6-1.8-1.2-2.2c-0.6-0.4-1.4-0.6-2.4-0.6c-1.7,0-3,0.6-3.8,1.7c-0.8,1.1-1.2,3-1.2,5.6
	c0,2.7,0.4,4.6,1.3,5.8c0.9,1.2,2.4,1.8,4.5,1.8c1.4,0,2.6-0.2,3.6-0.6V20h-3.8v-6.9H27.7z"/>
</svg>
</div>

Onion Skinning Text Morphing
----------------------------


A [Pen](https://codepen.io/jhealey5/pen/xrErrW) by [John Healey](https://codepen.io/jhealey5) on [CodePen](https://codepen.io).

[License](https://codepen.io/jhealey5/pen/xrErrW/license).

var doc = document,
	body = doc.body,
	a = TweenMax;

var shape = doc.getElementById('st0'),
	svg = shape.parentNode,
	wrap = doc.getElementsByClassName('wrap')[0];

var paths = [
	'M27.7,13.1v13.6c-0.7,0.5-1.4,1-2.3,1.4c-0.9,0.5-1.8,0.9-2.9,1.2s-2.2,0.6-3.4,0.9c-1.2,0.2-2.5,0.3-3.9,0.3c-2.5,0-4.6-0.3-6.5-1c-1.8-0.7-3.4-1.7-4.6-3c-1.2-1.3-2.1-2.9-2.7-4.7c-0.6-1.8-0.9-3.9-0.9-6.1c0-2.3,0.3-4.5,0.9-6.3S3,5.8,4.2,4.5c1.2-1.3,2.7-2.3,4.5-3c1.8-0.7,3.8-1,6.1-1c2,0,3.8,0.3,5.3,0.8c1.5,0.5,2.8,1.2,3.8,2.1c1,0.9,1.8,1.9,2.4,3.1c0.6,1.2,1,2.4,1.2,3.7l-9.1,0.8c-0.2-1-0.6-1.8-1.2-2.2c-0.6-0.4-1.4-0.6-2.4-0.6c-1.7,0-3,0.6-3.8,1.7c-0.8,1.1-1.2,3-1.2,5.6c0,2.7,0.4,4.6,1.3,5.8c0.9,1.2,2.4,1.8,4.5,1.8c1.4,0,2.6-0.2,3.6-0.6V20h-3.8v-6.9H27.7z',
	'M0.5,8.3V0.5h25v7.8h-8v20.8H8.5V8.3H0.5z',
	'M20.2,0v7.2H8.9v4.7h10.7V19H8.9v9.6H0V0H20.2z',
	'M8.1,29c-1.8-0.7-3.3-1.7-4.5-2.9c-1.2-1.3-2.1-2.8-2.7-4.7C0.3,19.5,0,17.4,0,15.1s0.3-4.4,0.9-6.3s1.5-3.4,2.8-4.8c1.2-1.3,2.7-2.3,4.6-3S12.1,0,14.5,0c2.3,0,4.4,0.3,6.1,1c1.8,0.7,3.3,1.7,4.5,2.9c1.2,1.3,2.1,2.8,2.7,4.7s0.9,3.9,0.9,6.2s-0.3,4.4-0.9,6.3s-1.5,3.5-2.8,4.8c-1.2,1.3-2.7,2.3-4.5,3S16.7,30,14.3,30C12,30,9.9,29.7,8.1,29z M19.4,15c0-4.8-1.7-7.2-5-7.2c-3.3,0-5,2.4-5,7.2c0,4.8,1.7,7.2,5,7.2C17.7,22.2,19.4,19.8,19.4,15z'
]

var colors = [
	0x3D8CD0,
	0xD32A7B,
	0x2AD37A,
	0xE8E321
]

var ease = Power4.easeInOut,
	speed = 1.6,
	ww = window.innerWidth,
	distance = ww/2-svg.getBoundingClientRect().width,
	current = 1;

function start(){
	
	a.to(shape, speed, {
		morphSVG: {shape:paths[current], shapeIndex: 3},
		stroke: colors[current],
		ease: ease
	});
	a.to(svg, speed, {
		x: '+='+distance,
		ease: ease,
		onUpdate: function(){
			createElement();
		},
		onComplete: function(){
			removeElements();
			current = current == 3 ? 0 : current+1;
		}
	})
	move();
}
start();

function move(){
	a.to(wrap, speed, {
		x: '-='+distance,
		ease: ease,
		onComplete: start
	})
}
// morph.to(shape, 1.2, {morphSVG: {shape:'M0.5,8.3V0.5h25v7.8h-8v20.8H8.5V8.3H0.5z', shapeIndex:3}, x: '+=50vw', ease:Power4.easeInOut});


function createElement(path) {
  var tmp = svg.cloneNode(true);
  tmp.getElementsByTagName('path')[0].removeAttribute('id');
  wrap.insertBefore(tmp, wrap.firstChild);
}

function removeElements(){
	[].slice.call(wrap.children).reverse().forEach(function(element, i){
		if (i !== wrap.children.length-1) {
			setTimeout(function(){
				wrap.removeChild(element);
			}, 8 * i)
		}
		
	});
   
}

<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=182"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script>

html,
body {
	height: 100%;
  	background-color: #222;
	overflow: hidden;
}


.wrap {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100vh;
	width: 100%;
}

svg{
  position: absolute;
  top: 0;
  left: 0;
	bottom: 0;
	margin: auto;
  display: block;
  width: 20vw;
  height: 20vw;
  overflow: visible;
}

# initialization file (not found)

# keymap file (not found)

[
	{
		"name": "about",
		"version": "1.9.1"
	},
	{
		"name": "archive-view",
		"version": "0.65.1"
	},
	{
		"name": "atom-ctags",
		"version": "5.1.2"
	},
	{
		"name": "atom-dark-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-dark-ui",
		"version": "0.53.3",
		"theme": "ui"
	},
	{
		"name": "atom-light-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-light-ui",
		"version": "0.46.3",
		"theme": "ui"
	},
	{
		"name": "atom-material-ui",
		"version": "2.1.3",
		"theme": "ui"
	},
	{
		"name": "auto-update-packages",
		"version": "1.0.1"
	},
	{
		"name": "autocomplete-atom-api",
		"version": "0.10.7"
	},
	{
		"name": "autocomplete-css",
		"version": "0.17.5"
	},
	{
		"name": "autocomplete-html",
		"version": "0.8.8"
	},
	{
		"name": "autocomplete-plus",
		"version": "2.42.0"
	},
	{
		"name": "autocomplete-snippets",
		"version": "1.12.0"
	},
	{
		"name": "autoflow",
		"version": "0.29.4"
	},
	{
		"name": "autosave",
		"version": "0.24.6"
	},
	{
		"name": "background-tips",
		"version": "0.28.0"
	},
	{
		"name": "base16-tomorrow-dark-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "base16-tomorrow-light-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "bookmarks",
		"version": "0.45.1"
	},
	{
		"name": "bracket-matcher",
		"version": "0.90.4"
	},
	{
		"name": "busy-signal",
		"version": "2.0.0"
	},
	{
		"name": "cake-syntax",
		"version": "1.0.2",
		"theme": "syntax"
	},
	{
		"name": "command-palette",
		"version": "0.43.5"
	},
	{
		"name": "copy-path",
		"version": "0.5.1"
	},
	{
		"name": "dalek",
		"version": "0.2.2"
	},
	{
		"name": "deprecation-cop",
		"version": "0.56.9"
	},
	{
		"name": "dev-live-reload",
		"version": "0.48.1"
	},
	{
		"name": "encoding-selector",
		"version": "0.23.9"
	},
	{
		"name": "ever-notedown",
		"version": "0.2.27"
	},
	{
		"name": "exception-reporting",
		"version": "0.43.1"
	},
	{
		"name": "file-icons",
		"version": "2.1.30"
	},
	{
		"name": "find-and-replace",
		"version": "0.215.14"
	},
	{
		"name": "fizzy-dark",
		"version": "0.18.2",
		"theme": "syntax"
	},
	{
		"name": "fuzzy-finder",
		"version": "1.8.2"
	},
	{
		"name": "git-diff",
		"version": "1.3.9"
	},
	{
		"name": "git-time-machine",
		"version": "2.1.0"
	},
	{
		"name": "github",
		"version": "0.23.3"
	},
	{
		"name": "go-to-line",
		"version": "0.33.0"
	},
	{
		"name": "goto-definition",
		"version": "1.3.4"
	},
	{
		"name": "grammar-selector",
		"version": "0.50.1"
	},
	{
		"name": "highlight-selected",
		"version": "0.14.0"
	},
	{
		"name": "image-view",
		"version": "0.63.1"
	},
	{
		"name": "incompatible-packages",
		"version": "0.27.3"
	},
	{
		"name": "intentions",
		"version": "1.1.5"
	},
	{
		"name": "jumpy",
		"version": "5.0.2"
	},
	{
		"name": "keybinding-resolver",
		"version": "0.38.4"
	},
	{
		"name": "language-c",
		"version": "0.60.14"
	},
	{
		"name": "language-clojure",
		"version": "0.22.7"
	},
	{
		"name": "language-coffee-script",
		"version": "0.49.3"
	},
	{
		"name": "language-csharp",
		"version": "1.1.0"
	},
	{
		"name": "language-css",
		"version": "0.43.0"
	},
	{
		"name": "language-gfm",
		"version": "0.90.6"
	},
	{
		"name": "language-git",
		"version": "0.19.1"
	},
	{
		"name": "language-go",
		"version": "0.46.6"
	},
	{
		"name": "language-html",
		"version": "0.51.5"
	},
	{
		"name": "language-hyperlink",
		"version": "0.17.0"
	},
	{
		"name": "language-java",
		"version": "0.31.1"
	},
	{
		"name": "language-javascript",
		"version": "0.129.19"
	},
	{
		"name": "language-json",
		"version": "0.19.2"
	},
	{
		"name": "language-less",
		"version": "0.34.3"
	},
	{
		"name": "language-make",
		"version": "0.23.0"
	},
	{
		"name": "language-mustache",
		"version": "0.14.5"
	},
	{
		"name": "language-objective-c",
		"version": "0.15.1"
	},
	{
		"name": "language-perl",
		"version": "0.38.1"
	},
	{
		"name": "language-php",
		"version": "0.44.1"
	},
	{
		"name": "language-property-list",
		"version": "0.9.1"
	},
	{
		"name": "language-python",
		"version": "0.51.8"
	},
	{
		"name": "language-rspec",
		"version": "0.12.1"
	},
	{
		"name": "language-ruby",
		"version": "0.72.14"
	},
	{
		"name": "language-ruby-on-rails",
		"version": "0.25.3"
	},
	{
		"name": "language-rust-bundled",
		"version": "0.1.0"
	},
	{
		"name": "language-sass",
		"version": "0.62.0"
	},
	{
		"name": "language-shellscript",
		"version": "0.27.9"
	},
	{
		"name": "language-source",
		"version": "0.9.0"
	},
	{
		"name": "language-sql",
		"version": "0.25.10"
	},
	{
		"name": "language-text",
		"version": "0.7.4"
	},
	{
		"name": "language-todo",
		"version": "0.29.4"
	},
	{
		"name": "language-toml",
		"version": "0.18.2"
	},
	{
		"name": "language-typescript",
		"version": "0.4.11"
	},
	{
		"name": "language-xml",
		"version": "0.35.3"
	},
	{
		"name": "language-yaml",
		"version": "0.32.0"
	},
	{
		"name": "line-ending-selector",
		"version": "0.7.7"
	},
	{
		"name": "link",
		"version": "0.31.6"
	},
	{
		"name": "linter",
		"version": "2.3.0"
	},
	{
		"name": "linter-rubocop",
		"version": "2.2.4"
	},
	{
		"name": "linter-ui-default",
		"version": "1.7.1"
	},
	{
		"name": "markdown-preview",
		"version": "0.159.25"
	},
	{
		"name": "markdown-scroll-sync",
		"version": "2.1.2"
	},
	{
		"name": "markdown-writer",
		"version": "2.11.5"
	},
	{
		"name": "merge-conflicts",
		"version": "1.4.5"
	},
	{
		"name": "metrics",
		"version": "1.6.2"
	},
	{
		"name": "nord-atom-ui",
		"version": "0.11.0",
		"theme": "ui"
	},
	{
		"name": "notifications",
		"version": "0.70.5"
	},
	{
		"name": "nucleus-dark-ui",
		"version": "0.12.3",
		"theme": "ui"
	},
	{
		"name": "one-dark-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-dark-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "one-light-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-light-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "open-on-github",
		"version": "1.3.1"
	},
	{
		"name": "package-generator",
		"version": "1.3.0"
	},
	{
		"name": "pristine-ui",
		"version": "1.1.11",
		"theme": "ui"
	},
	{
		"name": "react",
		"version": "0.18.0"
	},
	{
		"name": "rspec",
		"version": "0.4.0"
	},
	{
		"name": "rspec-snippets",
		"version": "0.4.0"
	},
	{
		"name": "settings-view",
		"version": "0.257.2"
	},
	{
		"name": "snippets",
		"version": "1.4.0"
	},
	{
		"name": "soda-light-ui",
		"version": "0.2.0",
		"theme": "ui"
	},
	{
		"name": "solarized-dark-syntax",
		"version": "1.3.0",
		"theme": "syntax"
	},
	{
		"name": "solarized-light-syntax",
		"version": "1.3.0",
		"theme": "syntax"
	},
	{
		"name": "spell-check",
		"version": "0.74.2"
	},
	{
		"name": "split-diff",
		"version": "1.6.0"
	},
	{
		"name": "status-bar",
		"version": "1.8.15"
	},
	{
		"name": "styleguide",
		"version": "0.49.12"
	},
	{
		"name": "symbol-gen",
		"version": "1.3.1"
	},
	{
		"name": "symbols-view",
		"version": "0.118.2"
	},
	{
		"name": "sync-settings",
		"version": "0.8.6"
	},
	{
		"name": "tabs",
		"version": "0.109.2"
	},
	{
		"name": "tango-syntax",
		"version": "0.5.0",
		"theme": "syntax"
	},
	{
		"name": "timecop",
		"version": "0.36.2"
	},
	{
		"name": "todo-show",
		"version": "2.3.2"
	},
	{
		"name": "tree-view",
		"version": "0.224.5"
	},
	{
		"name": "update-package-dependencies",
		"version": "0.13.1"
	},
	{
		"name": "welcome",
		"version": "0.36.7"
	},
	{
		"name": "whitespace",
		"version": "0.37.7"
	},
	{
		"name": "wombat-dark-syntax",
		"version": "1.2.0",
		"theme": "syntax"
	},
	{
		"name": "wrap-guide",
		"version": "0.40.3"
	}
]

{
	"core": {
		"disabledPackages": [
			"symbols-view"
		]
	},
	"exception-reporting": {
		"userId": "0d2c25cc-8436-4214-bbac-b41be7b21d64"
	},
	"sync-settings": {
		"quietUpdateCheck": true
	}
}

# snippets file (not found)

// styles file (not found)

 $('.js-dropdown-btn').click(function () {
        $(this).toggleClass('active');
        $(this).next('.js-dropdown-menu').slideToggle(150);
    });
 
 //product color select
    var productColorSelect = $('.js-product-color-select');
    var productColorItems = $('.js-product-color-select-menu-item');
    var productColorCurrent = $('.js-product-color-current');
    $('.js-product-color-input').change(function() {
        var currentProductColorSelect = $(this).closest(productColorSelect);
        var currentProductColorItem = $(this).parent(productColorItems);
        $(currentProductColorItem).addClass('selected');
        $(currentProductColorSelect).find(productColorItems).not(currentProductColorItem).removeClass('selected');
        var bg = $(this).next('.js-product-color').css('background-color');
        console.log(bg)
        $(currentProductColorSelect).find(productColorCurrent).css('background-color', bg);
        $(currentProductColorSelect).find('.js-dropdown-menu').slideUp();
        $(currentProductColorSelect).find('.js-dropdown-btn').removeClass('open');
    });

<div class="product-color-select js-product-color-select">
                                    <span class="product-color product-color-current js-product-color-current" style="background-color: #b3607a"></span>
                                    <button class="js-dropdown-btn product-color-select-btn">
                                        <img src="./img/ico-arrow-bottom-menu.png" alt="">
                                    </button>
                                    <ul class="product-color-select-menu js-dropdown-menu">
                                        <li class="product-color-select-menu-item js-product-color-select-menu-item selected">
                                            <input id="product-1-color-1" class="js-product-color-input" type="radio" name="color1">
                                            <label for="product-1-color-1" class="product-color js-product-color" style="background-color: #b3607a"></label>
                                        </li>
                                        <li class="product-color-select-menu-item js-product-color-select-menu-item">
                                            <input id="product-1-color-2" class="js-product-color-input" type="radio" name="color1">
                                            <label for="product-1-color-2" class="product-color js-product-color" style="background-color: #916d78"></label>
                                        </li>
                                        <li class="product-color-select-menu-item js-product-color-select-menu-item">
                                            <input id="product-1-color-3" class="js-product-color-input" type="radio" name="color1">
                                            <label for="product-1-color-3" class="product-color js-product-color" style="background-color: #692e97"></label>
                                        </li>
                                        <li class="product-color-select-menu-item js-product-color-select-menu-item">
                                            <input id="product-1-color-4" class="js-product-color-input" type="radio" name="color1">
                                            <label for="product-1-color-4" class="product-color js-product-color" style="background-color: #8a4e33"></label>
                                        </li>
                                    </ul>
                                </div>

.product-color {
    display: block;
    .border-radius(8px);
    width: 22px;
    height: 16px;
    &-select {
        position: relative;
        .border-radius(10px);
        border: 1px solid @text-color;
        width: 50px;
        height: 22px;
        &-btn {
            position: absolute;
            top: 50%;
            right: 5px;
            .box-sizing();
            margin-top: -5.5px;
            padding-top: 2px;
            height: 11px;
            img {
                display: block;
                width: 11px;
            }
        }
        &-menu {
            overflow: hidden;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            z-index: 1;
            display: none;
            .border-radius(10px);
            border: 1px solid @text-color;
            background-color: #ffffff;
            &-item {
                padding: 5px;
                .transition();
                &.selected, &:hover {
                    background-color: fade(@text-color, 40%);
                }
                .product-color {
                    width: 36px;
                }
            }
        }
    }
    &-current {
        position: absolute;
        left: 3px;
        top: 50%;
        margin-top: -8px;
    }
}

// Customer Protect Warranty Page //

.warranty-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;

  @media @mobile {
    flex-direction: column;
    justify-content: center;
  }

  h2 {
    text-align: center;
    font-size: 28px;

    @media @tablet {
      font-size: 20px;
    }

    @media @mobile {
      margin-top: 20px;
    }
  }

  img {
    height: 100px;

    @media @tablet {
      height: 70px;
    }
  }
}

.warranty-intro {

  display: flex;
   &__left,
   &__right {
     width: 50%;
     padding: 10px;

     @media @mobile {
       width: 100%;
     }
   }

   @media @mobile  {
     flex-direction: column;
   }

}

.warranty-video {
  margin-bottom: 20px;
}

.warranty-info {
  background: #353a36;
  padding: 20px 20px;
  border-bottom: 15px solid #c6d400;

  &__title {
    margin-bottom: 50px;
    h3 {
      color: white;
    }
  }

  &__tiles {
    display: flex;
    flex-wrap: wrap;

    .info__tile {
      flex: 0 0 calc(~"100% / 2 - 40px");
      padding: 10px 5px;
      margin: 0 10px 20px 10px;
      width: calc(~"100% / 2 - 40px");
      max-width: calc(~"100% / 2 - 40px");

      @media @tablet {
        flex: 0 0 calc(~"100% / 2 - 40px");
        width: calc(~"100% / 2 - 40px");
        max-width: calc(~"100% / 2 - 40px");
      }

      @media @mobile {
        flex: 0 0 calc(~"100% - 40px");
        width: calc(~"100% - 40px");
        max-width: calc(~"100% - 40px");
      }

      &--logo {
        text-align: center;
        margin-bottom: 10px;
        height: 100px;
        img {
          max-height: 80px;
        }
      }

      &--text {
        display: flex;
        justify-content: center;
        text-align: center;
        img {
          height: 35px;
          margin-right: 5px;
        }
        p {
          color: white;
        }
      }
    }

  }

  &__key {
    background: white;
    padding: 20px 20px;

    span {
      margin-right: 15px;

      @media @mobile {
        display: block;
      }
      img {
        height: 35px;
        margin-right: 5px;
      }
    }
  }

  // Essential Cover Modifier

  &--essential {
    background: #c9d400;
  }

  // Absolute Cover Modifier

  &--purple {
    background: #402288;
    border: none;
    border-bottom: 15px solid darken(grey, 10%);
  }

  // Comprehensive Cover Modifier

  &--comp {
    background: #31b400;
  }

  // Superior Cover Modifier

  &--superior {
    background: #913189;
    border-bottom: 15px solid darken(grey, 10%);
  }

}

.warranty-upgrade {
  background: #353a36;
  padding: 20px 20px;
  border-bottom: 15px solid #c9d400;
  border-top: 15px solid #31b400;

  p {
    color: white;
  }

  &__title {
    margin-bottom: 50px;
    h3 {
      color: white;
    }
  }

  &__tiles {
    display: flex;
    flex-wrap: wrap;

    .info__tile {
      flex: 0 0 calc(~"100% / 2 - 40px");
      padding: 10px 5px;
      margin: 0 10px 20px 10px;
      width: calc(~"100% / 2 - 40px");
      max-width: calc(~"100% / 2 - 40px");

      @media @tablet {
        flex: 0 0 calc(~"100% / 2 - 40px");
        width: calc(~"100% / 2 - 40px");
        max-width: calc(~"100% / 2 - 40px");
      }

      @media @mobile {
        flex: 0 0 calc(~"100% - 40px");
        width: calc(~"100% - 40px");
        max-width: calc(~"100% - 40px");
      }

      &--logo {
        text-align: center;
        margin-bottom: 10px;
        height: 100px;
        img {
          max-height: 80px;
        }
      }

      &--text {
        display: flex;
        justify-content: center;
        text-align: center;
        img {
          height: 35px;
          margin-right: 5px;
        }
        p {
          color: white;
        }
      }
    }
  }

  &__key {
    background: white;
    padding: 10px 10px;

    span {
      margin-right: 15px;
      @media @mobile {
        display: block;
      }
      img {
        height: 35px;
        margin-right: 5px;
      }
    }
  }

  // Essential Cover Modifier

  &--essential {
    background: #353a36;
    border-top: none;
  }

  // Comprehensive Cover Modifier

  &--comp {
    background: #353a36;
    padding: 20px;
    
    p {
      color: white;
    }
  
    img {
      max-height: 80px;
    }
  }

  // Superior Cover Modifier

  &--superior {
    background: #913189;
    padding: 20px;
    
    p {
      color: white;
    }
  
    img {
      max-height: 80px;
    }
  }

}

.warranty-comparison {
  background: #353a36;
  padding: 20px 20px;
  border-top: 15px solid #31b400;
  border-bottom: 15px solid #c9d400;

  @media @mobile {
    // display: none;
    max-width: 740px;
    overflow-x: scroll;
  }

  p {
    color: white;
  }

  .warranty-table {
    background: none !important;
    vertical-align: middle !important;
    margin-bottom: 20px;

    @media @mobile {
      
    }

    tr, td, th {
      background: none !important;
      padding: 5px 0px !important;
      color: white !important;
    }

    tr {
      border-bottom: 1px dotted white !important;

      td:nth-child(2),
      td:nth-child(3) {
        background: grey !important;
      }

      .table--green {
        color: #31b400 !important;
      }
    }

    tr:nth-child(1),
    tr:last-child {
      border: none !important;
    }

    th {
      font-size: 16px !important;

      @media @tablet {
        font-size: 14px !important;
      }
    }

    td {
      img {
        height: 35px !important;
      }
    }

  }

}

.warranty-infographic {
  background: #353a36;
  padding: 20px 20px;
  border-top: 15px solid #31b400;

  h3 {
    color: white;
  }

  a {
    display: block;
    color: white;
    cursor: pointer;
    width: 400px;
    padding: 10px;
    border-radius: 5px;
    background: #00b800;
    margin-bottom: 10px;
    &:hover,
    &:visited {
      background: darken(#00b800, 10%);
      color: white !important;
    }

    @media @tablet {
      width: 250px;
      font-size: 12px;
    }

    @media @mobile {
      width: 200px;
    }
    i {
      margin-right: 5px;
    }
  }

  // Essential Cover Modifier

  &--essential {
    background: #c9d400 !important;
    border-top: none !important;

    a {
      background: #353a36 !important;
      &:hover,
      &:visited {
        background: darken(#353a36, 10%) !important;
        color: white !important;
      }
    }
  }

  // Absolute Cover Modifier

  &--purple {
    background: #402288;
    border-top: 15px solid grey;
  }

  // Comprehensive Cover Modifier

  &--comp {
    background: #31b400;
    color: white;
  
    a {
      background: #353a36 !important;
      &:hover,
      &:visited {
        background: darken(#353a36, 10%) !important;
        color: white !important;
      }
    }
  }

  // Superior Cover Modifier

  &--superior {
    background: #913189;
    color: white;
    border-top: 15px solid #353a36;
  
    a {
      background: #353a36 !important;
      &:hover,
      &:visited {
        background: darken(#353a36, 10%) !important;
        color: white !important;
      }
    }
  }

}

/**
 * R Style Guide Heading
 * --------------------------------
*/
/**
 * Heading R Styles. Frontify
 * --------------------------------
*/

//массив медиа и коэффициент, на который умножаем размер шрифта
@media-factors-array: 1300px 1.5px, 800px 2.0px, 450px 2.4px, 380px 2.7px, 340px 3.1px;

//вызов, название класса, размер шрифта, массив значений
.make-classes(text-14, 14, @media-factors-array);
.make-classes(heading-30, 30, @media-factors-array);
.make-classes(heading-26, 26, @media-factors-array);
.make-classes(heading-24, 24, @media-factors-array);
.make-classes(heading-20, 20, @media-factors-array);
.make-classes(heading-16, 16, @media-factors-array);
.make-classes(heading-14, 14, @media-factors-array);

//функция миксин для адаптива по коэффициентам
.make-classes(@prefix, @size, @list) {
    .iter(length(@list));
    .iter(@i) when (@i > 0) {
        .iter(@i - 1);
        @pair:  extract(@list, @i);
        @key:   extract(@pair, 1);
        @value: extract(@pair, 2);
    
        .@{prefix}{
            @media only screen and (max-device-width: @key) {
                font-size: @size*@value;
            }
        }
    }
}

# Your init script
#
# Atom will evaluate this file each time a new window is opened. It is run
# after packages are loaded/activated and after the previous editor state
# has been restored.
#
# An example hack to log to the console when each text editor is saved.
#
# atom.workspace.observeTextEditors (editor) ->
#   editor.onDidSave ->
#     console.log "Saved! #{editor.getPath()}"

# Your keymap
#
# Atom keymaps work similarly to style sheets. Just as style sheets use
# selectors to apply styles to elements, Atom keymaps use selectors to associate
# keystrokes with events in specific contexts. Unlike style sheets however,
# each selector can only be declared once.
#
# You can create a new keybinding in this file by typing "key" and then hitting
# tab.
#
# Here's an example taken from Atom's built-in keymap:
#
# 'atom-text-editor':
#   'enter': 'editor:newline'
#
# 'atom-workspace':
#   'ctrl-shift-p': 'core:move-up'
#   'ctrl-p': 'core:move-down'
#
# You can find more information about keymaps in these guides:
# * http://flight-manual.atom.io/using-atom/sections/basic-customization/#customizing-keybindings
# * http://flight-manual.atom.io/behind-atom/sections/keymaps-in-depth/
#
# If you're having trouble with your keybindings not working, try the
# Keybinding Resolver: `Cmd+.` on macOS and `Ctrl+.` on other platforms. See the
# Debugging Guide for more information:
# * http://flight-manual.atom.io/hacking-atom/sections/debugging/#check-the-keybindings
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#configuring-with-cson

// Setting sync

[
	{
		"name": "about",
		"version": "1.9.1"
	},
	{
		"name": "advanced-open-file",
		"version": "0.16.8"
	},
	{
		"name": "archive-view",
		"version": "0.65.1"
	},
	{
		"name": "atom-beautify",
		"version": "0.33.4"
	},
	{
		"name": "atom-dark-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-dark-ui",
		"version": "0.53.3",
		"theme": "ui"
	},
	{
		"name": "atom-ide-ui",
		"version": "0.13.0"
	},
	{
		"name": "atom-light-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-light-ui",
		"version": "0.46.3",
		"theme": "ui"
	},
	{
		"name": "atom-material-syntax",
		"version": "1.0.8",
		"theme": "syntax"
	},
	{
		"name": "atom-material-syntax-dark",
		"version": "1.0.0",
		"theme": "syntax"
	},
	{
		"name": "atom-material-ui",
		"version": "2.1.3",
		"theme": "ui"
	},
	{
		"name": "atom-typescript",
		"version": "13.2.1"
	},
	{
		"name": "autoclose-html",
		"version": "0.23.0"
	},
	{
		"name": "autocomplete-atom-api",
		"version": "0.10.7"
	},
	{
		"name": "autocomplete-css",
		"version": "0.17.5"
	},
	{
		"name": "autocomplete-html",
		"version": "0.8.8"
	},
	{
		"name": "autocomplete-plus",
		"version": "2.42.0"
	},
	{
		"name": "autocomplete-snippets",
		"version": "1.12.0"
	},
	{
		"name": "autoflow",
		"version": "0.29.4"
	},
	{
		"name": "autosave",
		"version": "0.24.6"
	},
	{
		"name": "background-tips",
		"version": "0.28.0"
	},
	{
		"name": "base16-tomorrow-dark-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "base16-tomorrow-light-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "bookmarks",
		"version": "0.45.1"
	},
	{
		"name": "bracket-matcher",
		"version": "0.90.4"
	},
	{
		"name": "city-lights-syntax",
		"version": "1.1.8",
		"theme": "syntax"
	},
	{
		"name": "city-lights-ui",
		"version": "1.5.3",
		"theme": "ui"
	},
	{
		"name": "color-picker",
		"version": "2.3.0"
	},
	{
		"name": "command-palette",
		"version": "0.43.5"
	},
	{
		"name": "dalek",
		"version": "0.2.2"
	},
	{
		"name": "deprecation-cop",
		"version": "0.56.9"
	},
	{
		"name": "dev-live-reload",
		"version": "0.48.1"
	},
	{
		"name": "emmet",
		"version": "2.4.3"
	},
	{
		"name": "encoding-selector",
		"version": "0.23.9"
	},
	{
		"name": "exception-reporting",
		"version": "0.43.1"
	},
	{
		"name": "file-icons",
		"version": "2.1.31"
	},
	{
		"name": "find-and-replace",
		"version": "0.215.14"
	},
	{
		"name": "fuzzy-finder",
		"version": "1.8.2"
	},
	{
		"name": "git-diff",
		"version": "1.3.9"
	},
	{
		"name": "github",
		"version": "0.23.3"
	},
	{
		"name": "go-to-line",
		"version": "0.33.0"
	},
	{
		"name": "goto-definition",
		"version": "1.3.4"
	},
	{
		"name": "grammar-selector",
		"version": "0.50.1"
	},
	{
		"name": "highlight-selected",
		"version": "0.16.0"
	},
	{
		"name": "image-view",
		"version": "0.63.1"
	},
	{
		"name": "incompatible-packages",
		"version": "0.27.3"
	},
	{
		"name": "keybinding-resolver",
		"version": "0.38.4"
	},
	{
		"name": "language-c",
		"version": "0.60.14"
	},
	{
		"name": "language-clojure",
		"version": "0.22.7"
	},
	{
		"name": "language-coffee-script",
		"version": "0.49.3"
	},
	{
		"name": "language-csharp",
		"version": "1.1.0"
	},
	{
		"name": "language-css",
		"version": "0.43.0"
	},
	{
		"name": "language-dotenv",
		"version": "1.2.0"
	},
	{
		"name": "language-gfm",
		"version": "0.90.6"
	},
	{
		"name": "language-git",
		"version": "0.19.1"
	},
	{
		"name": "language-gitignore",
		"version": "0.3.0"
	},
	{
		"name": "language-go",
		"version": "0.46.6"
	},
	{
		"name": "language-html",
		"version": "0.51.5"
	},
	{
		"name": "language-hyperlink",
		"version": "0.17.0"
	},
	{
		"name": "language-java",
		"version": "0.31.1"
	},
	{
		"name": "language-javascript",
		"version": "0.129.19"
	},
	{
		"name": "language-json",
		"version": "0.19.2"
	},
	{
		"name": "language-less",
		"version": "0.34.3"
	},
	{
		"name": "language-make",
		"version": "0.23.0"
	},
	{
		"name": "language-mustache",
		"version": "0.14.5"
	},
	{
		"name": "language-objective-c",
		"version": "0.15.1"
	},
	{
		"name": "language-perl",
		"version": "0.38.1"
	},
	{
		"name": "language-php",
		"version": "0.44.1"
	},
	{
		"name": "language-property-list",
		"version": "0.9.1"
	},
	{
		"name": "language-python",
		"version": "0.51.8"
	},
	{
		"name": "language-ruby",
		"version": "0.72.14"
	},
	{
		"name": "language-ruby-on-rails",
		"version": "0.25.3"
	},
	{
		"name": "language-rust-bundled",
		"version": "0.1.0"
	},
	{
		"name": "language-sass",
		"version": "0.62.0"
	},
	{
		"name": "language-shellscript",
		"version": "0.27.9"
	},
	{
		"name": "language-source",
		"version": "0.9.0"
	},
	{
		"name": "language-sql",
		"version": "0.25.10"
	},
	{
		"name": "language-text",
		"version": "0.7.4"
	},
	{
		"name": "language-todo",
		"version": "0.29.4"
	},
	{
		"name": "language-toml",
		"version": "0.18.2"
	},
	{
		"name": "language-typescript",
		"version": "0.4.11"
	},
	{
		"name": "language-vue",
		"version": "0.24.0"
	},
	{
		"name": "language-vue-component",
		"version": "0.5.0"
	},
	{
		"name": "language-xml",
		"version": "0.35.3"
	},
	{
		"name": "language-yaml",
		"version": "0.32.0"
	},
	{
		"name": "laravel",
		"version": "0.7.1"
	},
	{
		"name": "laravel-snippets",
		"version": "2.1.0"
	},
	{
		"name": "line-ending-selector",
		"version": "0.7.7"
	},
	{
		"name": "link",
		"version": "0.31.6"
	},
	{
		"name": "markdown-preview",
		"version": "0.159.25"
	},
	{
		"name": "metrics",
		"version": "1.6.2"
	},
	{
		"name": "nord-atom-syntax",
		"version": "0.9.1",
		"theme": "syntax"
	},
	{
		"name": "nord-atom-ui",
		"version": "0.11.0",
		"theme": "ui"
	},
	{
		"name": "northem-dark-atom-ui",
		"version": "2.1.0",
		"theme": "ui"
	},
	{
		"name": "notifications",
		"version": "0.70.5"
	},
	{
		"name": "one-dark-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-dark-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "one-light-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-light-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "open-on-github",
		"version": "1.3.1"
	},
	{
		"name": "open-recent",
		"version": "5.0.0"
	},
	{
		"name": "package-generator",
		"version": "1.3.0"
	},
	{
		"name": "pigments",
		"version": "0.40.2"
	},
	{
		"name": "platformio-ide-terminal",
		"version": "2.9.1"
	},
	{
		"name": "restart-atom",
		"version": "0.2.0"
	},
	{
		"name": "settings-view",
		"version": "0.257.2"
	},
	{
		"name": "snippets",
		"version": "1.4.0"
	},
	{
		"name": "solarized-dark-syntax",
		"version": "1.3.0",
		"theme": "syntax"
	},
	{
		"name": "solarized-light-syntax",
		"version": "1.3.0",
		"theme": "syntax"
	},
	{
		"name": "spell-check",
		"version": "0.74.2"
	},
	{
		"name": "status-bar",
		"version": "1.8.15"
	},
	{
		"name": "styleguide",
		"version": "0.49.12"
	},
	{
		"name": "symbols-view",
		"version": "0.118.2"
	},
	{
		"name": "sync-settings",
		"version": "0.8.6"
	},
	{
		"name": "tabs",
		"version": "0.109.2"
	},
	{
		"name": "timecop",
		"version": "0.36.2"
	},
	{
		"name": "tree-view",
		"version": "0.224.5"
	},
	{
		"name": "update-package-dependencies",
		"version": "0.13.1"
	},
	{
		"name": "vue-autocomplete",
		"version": "0.1.1"
	},
	{
		"name": "welcome",
		"version": "0.36.7"
	},
	{
		"name": "whitespace",
		"version": "0.37.7"
	},
	{
		"name": "wrap-guide",
		"version": "0.40.3"
	}
]

{
	"core": {
		"disabledPackages": [
			"wrap-guide"
		],
		"telemetryConsent": "no",
		"themes": [
			"atom-material-ui",
			"atom-material-syntax-dark"
		],
		"uriHandlerRegistration": "always"
	},
	"editor": {
		"softWrap": true
	},
	"exception-reporting": {
		"userId": "8af01577-b864-43e3-b8c7-2fc24aacbd52"
	},
	"platformio-ide-terminal": {
		"core": {},
		"toggles": {
			"selectToCopy": false
		}
	},
	"sync-settings": {},
	"welcome": {
		"showOnStartup": false
	}
}

# Your snippets
#
# Atom snippets allow you to enter a simple prefix in the editor and hit tab to
# expand the prefix into a larger code block with templated values.
#
# You can create a new snippet in this file by typing "snip" and then hitting
# tab.
#
# An example CoffeeScript snippet to expand log to console.log:
#
# '.source.coffee':
#   'Console log':
#     'prefix': 'log'
#     'body': 'console.log $1'
#
# Each scope (e.g. '.source.coffee' above) can only be declared once.
#
# This file uses CoffeeScript Object Notation (CSON).
# If you are unfamiliar with CSON, you can read more about it in the
# Atom Flight Manual:
# http://flight-manual.atom.io/using-atom/sections/basic-customization/#_cson

/*
 * Your Stylesheet
 *
 * This stylesheet is loaded when Atom starts up and is reloaded automatically
 * when it is changed and saved.
 *
 * Add your own CSS or Less to fully customize Atom.
 * If you are unfamiliar with Less, you can read more about it here:
 * http://lesscss.org
 */


/*
 * Examples
 * (To see them, uncomment and save)
 */

// style the background color of the tree view
.tree-view {
  // background-color: whitesmoke;
}

// style the background and foreground colors on the atom-text-editor-element itself
atom-text-editor {
  // color: white;
  // background-color: hsl(180, 24%, 12%);
}

// style UI elements inside atom-text-editor
atom-text-editor .cursor {
  // border-color: red;
}

# initialization file (not found)

# keymap file (not found)

[
	{
		"name": "Darkula-Web-syntax",
		"version": "0.5.0",
		"theme": "syntax"
	},
	{
		"name": "GobbieGobGoo",
		"version": "1.0.4",
		"theme": "syntax"
	},
	{
		"name": "about",
		"version": "1.9.1"
	},
	{
		"name": "archive-view",
		"version": "0.65.1"
	},
	{
		"name": "atom-dark-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-dark-ui",
		"version": "0.53.3",
		"theme": "ui"
	},
	{
		"name": "atom-ide-terminal",
		"version": "5.0.1"
	},
	{
		"name": "atom-light-syntax",
		"version": "0.29.1",
		"theme": "syntax"
	},
	{
		"name": "atom-light-ui",
		"version": "0.46.3",
		"theme": "ui"
	},
	{
		"name": "atom-terminal",
		"version": "0.8.0"
	},
	{
		"name": "atom-webbrowser",
		"version": "2.1.4"
	},
	{
		"name": "atom-webstorm-syntax-theme",
		"version": "0.0.2",
		"theme": "syntax"
	},
	{
		"name": "atom-webstorm-ui-theme",
		"version": "0.0.1",
		"theme": "ui"
	},
	{
		"name": "autocomplete-atom-api",
		"version": "0.10.7"
	},
	{
		"name": "autocomplete-css",
		"version": "0.17.5"
	},
	{
		"name": "autocomplete-html",
		"version": "0.8.7"
	},
	{
		"name": "autocomplete-html-entities",
		"version": "0.2.0"
	},
	{
		"name": "autocomplete-plus",
		"version": "2.41.0"
	},
	{
		"name": "autocomplete-snippets",
		"version": "1.12.0"
	},
	{
		"name": "autoflow",
		"version": "0.29.4"
	},
	{
		"name": "autosave",
		"version": "0.24.6"
	},
	{
		"name": "azurite-blue-syntax",
		"version": "0.4.0",
		"theme": "syntax"
	},
	{
		"name": "background-tips",
		"version": "0.28.0"
	},
	{
		"name": "base16-tomorrow-dark-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "base16-tomorrow-light-theme",
		"version": "1.6.0",
		"theme": "syntax"
	},
	{
		"name": "bookmarks",
		"version": "0.45.1"
	},
	{
		"name": "bracket-matcher",
		"version": "0.90.4"
	},
	{
		"name": "bright-dark-ui",
		"version": "0.5.1",
		"theme": "ui"
	},
	{
		"name": "build",
		"version": "0.70.0"
	},
	{
		"name": "build-powershell",
		"version": "0.11.0"
	},
	{
		"name": "busy-signal",
		"version": "2.0.0"
	},
	{
		"name": "command-palette",
		"version": "0.43.5"
	},
	{
		"name": "command-webui",
		"version": "0.1.6"
	},
	{
		"name": "dalek",
		"version": "0.2.2"
	},
	{
		"name": "daverona-laravel-syntax",
		"version": "0.0.1",
		"theme": "syntax"
	},
	{
		"name": "daverona-mellow-syntax",
		"version": "0.0.1",
		"theme": "syntax"
	},
	{
		"name": "daverona-slime-syntax",
		"version": "0.0.1",
		"theme": "syntax"
	},
	{
		"name": "deprecation-cop",
		"version": "0.56.9"
	},
	{
		"name": "dev-live-reload",
		"version": "0.48.1"
	},
	{
		"name": "encoding-selector",
		"version": "0.23.9"
	},
	{
		"name": "exception-reporting",
		"version": "0.43.1"
	},
	{
		"name": "extract-web",
		"version": "0.3.2"
	},
	{
		"name": "find-and-replace",
		"version": "0.215.14"
	},
	{
		"name": "framer-syntax",
		"version": "1.1.0",
		"theme": "syntax"
	},
	{
		"name": "framer-ui",
		"version": "2.0.0",
		"theme": "ui"
	},
	{
		"name": "fresh-dark-syntax",
		"version": "0.9.7",
		"theme": "syntax"
	},
	{
		"name": "ftp-remote-edit",
		"version": "0.12.22"
	},
	{
		"name": "fuzzy-finder",
		"version": "1.8.2"
	},
	{
		"name": "git-diff",
		"version": "1.3.9"
	},
	{
		"name": "github",
		"version": "0.22.2"
	},
	{
		"name": "github-syntax",
		"version": "0.2.0",
		"theme": "syntax"
	},
	{
		"name": "github-web",
		"version": "1.1.0",
		"theme": "syntax"
	},
	{
		"name": "go-to-line",
		"version": "0.33.0"
	},
	{
		"name": "grammar-selector",
		"version": "0.50.1"
	},
	{
		"name": "hey-pane",
		"version": "1.1.2"
	},
	{
		"name": "high-contrast-dark-syntax",
		"version": "0.1.0",
		"theme": "syntax"
	},
	{
		"name": "html-tag-auto-complete",
		"version": "0.1.1"
	},
	{
		"name": "image-view",
		"version": "0.63.1"
	},
	{
		"name": "incompatible-packages",
		"version": "0.27.3"
	},
	{
		"name": "keybinding-resolver",
		"version": "0.38.4"
	},
	{
		"name": "kyaho-dark-syntax",
		"version": "1.0.0",
		"theme": "syntax"
	},
	{
		"name": "language-c",
		"version": "0.60.13"
	},
	{
		"name": "language-clojure",
		"version": "0.22.7"
	},
	{
		"name": "language-coffee-script",
		"version": "0.49.3"
	},
	{
		"name": "language-csharp",
		"version": "1.1.0"
	},
	{
		"name": "language-css",
		"version": "0.43.0"
	},
	{
		"name": "language-fish-shell",
		"version": "1.1.0"
	},
	{
		"name": "language-gfm",
		"version": "0.90.5"
	},
	{
		"name": "language-git",
		"version": "0.19.1"
	},
	{
		"name": "language-go",
		"version": "0.46.6"
	},
	{
		"name": "language-html",
		"version": "0.51.5"
	},
	{
		"name": "language-hyperlink",
		"version": "0.17.0"
	},
	{
		"name": "language-java",
		"version": "0.30.0"
	},
	{
		"name": "language-javascript",
		"version": "0.129.19"
	},
	{
		"name": "language-json",
		"version": "0.19.2"
	},
	{
		"name": "language-less",
		"version": "0.34.2"
	},
	{
		"name": "language-make",
		"version": "0.22.3"
	},
	{
		"name": "language-mustache",
		"version": "0.14.5"
	},
	{
		"name": "language-objective-c",
		"version": "0.15.1"
	},
	{
		"name": "language-perl",
		"version": "0.38.1"
	},
	{
		"name": "language-php",
		"version": "0.44.0"
	},
	{
		"name": "language-property-list",
		"version": "0.9.1"
	},
	{
		"name": "language-python",
		"version": "0.51.8"
	},
	{
		"name": "language-ruby",
		"version": "0.72.14"
	},
	{
		"name": "language-ruby-on-rails",
		"version": "0.25.3"
	},
	{
		"name": "language-rust-bundled",
		"version": "0.1.0"
	},
	{
		"name": "language-sass",
		"version": "0.62.0"
	},
	{
		"name": "language-shellscript",
		"version": "0.27.9"
	},
	{
		"name": "language-source",
		"version": "0.9.0"
	},
	{
		"name": "language-sql",
		"version": "0.25.10"
	},
	{
		"name": "language-text",
		"version": "0.7.4"
	},
	{
		"name": "language-todo",
		"version": "0.29.4"
	},
	{
		"name": "language-toml",
		"version": "0.18.2"
	},
	{
		"name": "language-typescript",
		"version": "0.4.11"
	},
	{
		"name": "language-xml",
		"version": "0.35.2"
	},
	{
		"name": "language-yaml",
		"version": "0.32.0"
	},
	{
		"name": "lapis-syntax",
		"version": "1.0.4",
		"theme": "syntax"
	},
	{
		"name": "lime-syntax",
		"version": "1.0.1",
		"theme": "syntax"
	},
	{
		"name": "line-ending-selector",
		"version": "0.7.7"
	},
	{
		"name": "link",
		"version": "0.31.6"
	},
	{
		"name": "local-web-server",
		"version": "0.1.0"
	},
	{
		"name": "markdown-preview",
		"version": "0.159.25"
	},
	{
		"name": "metrics",
		"version": "1.6.2"
	},
	{
		"name": "midnight-owl-syntax",
		"version": "0.1.0",
		"theme": "syntax"
	},
	{
		"name": "minimal-syntax-dark",
		"version": "0.12.4",
		"theme": "syntax"
	},
	{
		"name": "moonlight",
		"version": "0.11.0",
		"theme": "syntax"
	},
	{
		"name": "notifications",
		"version": "0.70.5"
	},
	{
		"name": "one-dark-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-dark-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "one-light-syntax",
		"version": "1.8.4",
		"theme": "syntax"
	},
	{
		"name": "one-light-ui",
		"version": "1.12.5",
		"theme": "ui"
	},
	{
		"name": "open-on-github",
		"version": "1.3.1"
	},
	{
		"name": "package-generator",
		"version": "1.3.0"
	},
	{
		"name": "plain-simple",
		"version": "1.1.0"
	},
	{
		"name": "platformio-ide-terminal",
		"version": "2.8.4"
	},
	{
		"name": "project-plus",
		"version": "1.0.0"
	},
	{
		"name": "rocket-dark-syntax",
		"version": "1.0.0",
		"theme": "syntax"
	},
	{
		"name": "settings-view",
		"version": "0.257.1"
	},
	{
		"name": "snippets",
		"version": "1.4.0"
	},
	{
		"name": "solarized-dark-syntax",
		"version": "1.2.0",
		"theme": "syntax"
	},
	{
		"name": "solarized-light-syntax",
		"version": "1.2.0",
		"theme": "syntax"
	},
	{
		"name": "spell-check",
		"version": "0.74.2"
	},
	{
		"name": "status-bar",
		"version": "1.8.15"
	},
	{
		"name": "styleguide",
		"version": "0.49.12"
	},
	{
		"name": "summer-night-syntax",
		"version": "2.0.0",
		"theme": "syntax"
	},
	{
		"name": "symbols-view",
		"version": "0.118.2"
	},
	{
		"name": "sync-settings",
		"version": "0.8.6"
	},
	{
		"name": "tabs",
		"version": "0.109.2"
	},
	{
		"name": "teletype",
		"version": "0.13.3"
	},
	{
		"name": "terminal-panel-uoa",
		"version": "0.5.12"
	},
	{
		"name": "text-align",
		"version": "0.3.0"
	},
	{
		"name": "the-matrix-syntax",
		"version": "0.6.0",
		"theme": "syntax"
	},
	{
		"name": "tibicenas-dark-syntax",
		"version": "0.1.0",
		"theme": "syntax"
	},
	{
		"name": "timecop",
		"version": "0.36.2"
	},
	{
		"name": "tree-view",
		"version": "0.224.2"
	},
	{
		"name": "tree-view-extended",
		"version": "2.1.0"
	},
	{
		"name": "two-dark-ui",
		"version": "1.0.2",
		"theme": "ui"
	},
	{
		"name": "udemy-pane",
		"version": "1.0.0"
	},
	{
		"name": "update-package-dependencies",
		"version": "0.13.1"
	},
	{
		"name": "welcome",
		"version": "0.36.7"
	},
	{
		"name": "whitespace",
		"version": "0.37.7"
	},
	{
		"name": "wrap-guide",
		"version": "0.40.3"
	},
	{
		"name": "youtube-pane",
		"version": "2.0.0"
	}
]

{
	"atom-ide-terminal": {
		"style": {
			"theme": "inverse"
		}
	},
	"atom-live-server-plus": {
		"useToolBar": true
	},
	"atom-terminal": {
		"app": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.ex"
	},
	"autosave": {
		"enabled": true
	},
	"block-cursor": {
		"global": {
			"blinkOff": {
				"borderStyle": "bordered-box"
			},
			"blinkOn": {
				"backgroundColor": "#105805",
				"borderColor": "#54ec0f",
				"borderStyle": "bordered-box",
				"borderWidth": 2
			}
		}
	},
	"bracket-matcher": {
		"highlightMatchingLineNumber": true
	},
	"command-webui": {
		"alwaysShowToolbarOnLoad": false
	},
	"core": {
		"autoHideMenuBar": true,
		"automaticallyUpdate": false,
		"closeDeletedFileTabs": true,
		"colorProfile": "srgb",
		"disabledPackages": [
			"terminal-plus",
			"atom-ide-terminal",
			"atom-terminal",
			"hey-pane",
			"project-plus",
			"tree-view-extended"
		],
		"projectHome": "C:\\Users\\devopsrwc\\Documents\\mycode",
		"telemetryConsent": "limited",
		"themes": [
			"one-dark-ui",
			"lime-syntax"
		],
		"uriHandlerRegistration": "always"
	},
	"editor": {
		"fontSize": 16,
		"scrollPastEnd": true,
		"showIndentGuide": true,
		"showInvisibles": true,
		"softWrap": true,
		"softWrapAtPreferredLineLength": true,
		"tabType": "soft"
	},
	"exception-reporting": {
		"userId": "aee0f403-fdfc-46bc-b3d3-152568b66dbc"
	},
	"ftp-remote-edit": {
		"config": "03e92244e5789ef0dc005cb10e2dc257f717226c33399bede6d2a2da1223501a091f17c39bb6594d13fba50f1339b36484f8f5481e9bf4a0257da37e95b46019f7bc5c1833abddd73ef9c796c11311a23c64b4f2f94559b53df89b6bd3d59f57ef33136811008cd09ecb53ecf6fe9d040f5b9a424d013fada2b10c1328cfc84abaa85535721debb4b8ad30efbf62d68c6299802d3e082221a0143081",
		"password": "3cf77645f46689a585",
		"tree": {
			"allowPendingPaneItems": true,
			"showHiddenFiles": true,
			"toggleOnStartup": true
		}
	},
	"global-background": {
		"imageSource": {
			"custom": {
				"paths": {
					"enabled": true
				}
			}
		}
	},
	"markdown-image-paste": {
		"use_subfolder": true
	},
	"markdown-preview": {
		"allowUnsafeProtocols": true,
		"useGitHubStyle": true
	},
	"platformio-ide-terminal": {
		"core": {
			"autoRunCommand": "cd C:\\Users\\devopsrwc\\mycode",
			"mapTerminalsTo": "Folder"
		},
		"style": {
			"theme": "linux"
		}
	},
	"project-plus": {
		"showPath": true
	},
	"remote-ftp": {
		"beta": {
			"multipleHosts": true
		},
		"connector": {
			"autoUploadOnSave": "never"
		},
		"notifications": {
			"enableTransfer": true,
			"enableWatchFileChange": true
		},
		"statusbar": {
			"enable": true,
			"position": "right"
		},
		"tree": {
			"showProjectName": "remote"
		}
	},
	"sync-settings": {
		"gistDescription": "test",
		"removeObsoletePackages": true
	},
	"terminal-plus": {
		"core": {
			"autoRunCommand": "C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
			"mapTerminalsTo": "Folder",
			"mapTerminalsToAutoOpen": true,
			"workingDirectory": "Home"
		},
		"style": {
			"theme": "inverse"
		}
	},
	"tree-view": {
		"alwaysOpenExisting": true,
		"autoReveal": true,
		"hideVcsIgnoredFiles": true
	},
	"welcome": {
		"showOnStartup": false
	}
}

# snippets file (not found)

// styles file (not found)

body { 
  width: calc(~"100% - 250px - 1.5em"); 
}

.sr-only() {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

.set-max(@max: @max-width) {
    max-width: @max;
    margin-left: auto;
    margin-right: auto;
}