Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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 

              
                
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="assets/css/augmented.css">
       
        <link rel="stylesheet" type="text/css" href="assets/css/Style.css">
       
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-146833088-1"></script>
        <script src="assets/js/index.js"></script>
        <script src="assets/js/servNav.js"></script>
        

      </head>
  
    <body>
       <style>
  
       </style>
          <script async src="https://www.googletagmanager.com/gtag/js?id=UA-146833088-1"></script>
          
     
<br>
          <div class="header-presentation" augmented-ui="tl-clip-x tr-clip-x bl-clip-x br-clip-x exe">
            <div class="title">      <h1>&nbsp;UMBRELLA CORPORATION </h1></div>

            <div class="container">
      
          
           <!-- content -->
          <div class="content">
  <section id="one">
  
    <div class="inicio" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
      <div class="scanline"></div>
      <pre class="code"><span class="blink">█</span></pre>
                                    
    </div>
  </section>


  <section id="two">
 <div class="sobre" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">


 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 <br>
 </div>
    
  </section>



  <section id="three">
    
    <div class="divserviços" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
   <h1>ABOUT UMBRELLA</h1>

 
<div class="servwrapper">
   <div class="slider">
    <input type="radio" name="slider" title="slide1" id="slide1" checked="checked" class="slider__nav"/>
    <input type="radio" name="slider" title="slide2" id="slide2" class="slider__nav"/>
    <input type="radio" name="slider" title="slide3" id="slide3" class="slider__nav"/>
    <div class="slider__inner">
      <div class="  servone"><br><br>
 
  <h2 class="slider__caption glitch firstcaption">Umbrella</h2>
        <div class="slidetitle">
          <i class="fa fa-desktop fa-4x" aria-hidden="true"></i></div>
      <br>
      <li>The Umbrella Corporation is an international pharmaceutical company. Founded in the late 1960s by prominent British royal descendants Ozwell E.</li><br>
      
      <br>
      <li>we are still active,we are just reviving science.. <br></li><br>

      <br>
      <li>The origins of the Umbrella Corporation lie with the eugenics movements that dominated Europe and North American debate in the early 20th century. Its three most prominent founding members were Dr. Oswell E. Spencer, The Earl Spencer; Dr. Edward Ashford, 5th Earl Ashford, and Dr. James Marcus,[4] who were university classmates,[5] with further early work from Marcus' protégé, Brandon Bailey; the 16th Earl Beardsley and his daughter, Mylène;[6] and France's House of Henry, of which Christine and her father belonged.[7] All were virologists with some associations with the eugenics movement either themselves or by association to another prominent figure. Umbrella's immediate pre-history truly begins in 1966, when Dr. Marcus developed a hypothesis that a mythical West African flower known as Stairway of the Sun bestowed powers to its consumers by a mutagenic viral infection. In a trip to the Ndipaya tribal lands, the fabled flower was discovered in an underground garden and a virus discovered within it.[8][9] However, flowers cultivated in the United States failed to replicate the virus. Requiring significant funding beyond their aristocratic links to bring about their eugenics dream, Spencer formed Umbrella Pharmaceuticals on behalf of Ashford and an indifferent Marcus and established a base in the Ndipaya garden so Progenitor samples could be transported over the Atlantic instead. Requiring more money, the three agreed to a plan later known as the "t-Virus Project", where they would independently develop strains of Progenitor to sell to the US military as a weapon<br> Classified.</li><br></div>
      <div class="servtwo"><br><br>
        <h2 class="slider__caption secondcaption glitch">EMPLOYEE OF THE YEAR,GROUP 6.<br> DR LUIS .S NAVARRO</h2
          
        <div class="slidetitle">
          <i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
          </div>
      <br>
      <li>former employee of the Umbrella Corporation.</li><br>
      <br>
      <li>at group number 6, dr luis serra has finally developed a fully functional machinery called the "Extractor"</li><br>
        <br>
        <li>luis can be seen on the west side of the building,make sure to meet him there!</li><br>

      </div>
      <div class=" servthree"><br><br>
        <h2 class="slider__caption glitch">where will science take me?</h2>
<div class="slidetitle">
          <i class="fa fa-database fa-4x" aria-hidden="true"></i>
        </div> <br>
      <li>where will science take me?</li><br>
      <li>Through science, we will find innovative solutions to pressing global challenges, such as climate change, disease outbreaks, food security, and energy sustainability. By harnessing the power of scientific research and technology, we can develop strategies and technologies that mitigate the effects of climate change, create more resilient healthcare systems, ensure a stable food supply for a growing population, and transition to cleaner and more sustainable sources of energy. Science is our key to addressing these complex global issues and ensuring a brighter future for all.</li><br>
      <li>it's a beacon of hope guiding us toward a more secure, healthier, and sustainable future for all of humanity</li><br>

    </div>
      
    </div>
  </div>
    </div>
  </section>
  <section id="four">
    
    <div class="contact"> 
  <div class="div1" augmented-ui="tr-clip-y tl-clip bl-clip-x br-clip-x exe">
 <div class="sectiontitle" augmented-ui="tl-clip exe">
   
    <h1>dr luis serra navarro</h1><br>
</div>
    <br>
  <h2> former umbrella employee.</h2>
   <br>
  <p> </p>
<br>
  <h2></h2>
  <br>
  <p>
  <br>
  <h2></h2>
  <br>
  <p>"people could change right..?"</p>
  <br>
<br>
<p> &nbsp;&nbsp;&nbsp;&nbsp;
  

  <i class="fa fa-envelope"></i>
</a>
&nbsp;&nbsp;
</p> 
  
  </div>




  <div class="div2" augmented-ui="tr-clip tl-clip bl-clip br-clip exe" >

    <div class="formwrapper">
    
      <form action="">
        <h1><center>Send a message</center></h1>
        <div class="inputgroup">
        <span id="nome" class="input" augmented-ui="tl-clip br-clip exe">
          NAME
      </span><input class="inputfield namefield"  id="nomefield" augmented-ui="tr-clip tl-clip bl-clip br-clip exe" type="text" name="" id="">
    </div>

    <br><br>
    <div class="inputgroup">
      <span class="input" augmented-ui="br-clip exe">
        EMAIL
    </span>
    
    <input class="inputfield" augmented-ui="tr-clip tl-clip bl-clip br-clip exe" type="text" name="" id="">
  </div>    <br><br>
  <div class="inputgroup">
    <span class="input" augmented-ui="br-clip exe">
      SUBJECT
  </span><input class="inputfield" augmented-ui="tr-clip tl-clip bl-clip br-clip exe" type="text" name="" id="">
</div>    <br><br>
<div class="inputgroup">
  <span class="input messagespan" augmented-ui="br-clip exe">
    MESSAGE
</span><textarea  class="messageinput"cols="80" rows="10" augmented-ui="tr-clip tl-clip bl-clip br-clip exe"  name="" id=""></textarea>
</div>

<div class="inputgroup">
  <button id="send" augmented-ui=" tl-clip bl-scoop br-clip-x exe">SEND</button>
</div>


      </form>
    </div>
  </div>
</div>
  </section>
            
          </div>
           <!--  -->
          </div>
        
          </div>    

          <div class="definitions-container">      
            <div class="def" augmented-ui="tr-round tl-clip bl-round br-clip exe">
              <b>umbrella has themes for employees!</b> <br><br>
              <br>
              <br>
              
              <br><br>
              <center>
              <button augmented-ui="tr-clip tl-clip bl-clip br-clip exe" class="color-button" id="goldtheme" >Gold</button>
              <button augmented-ui="tr-clip tl-clip bl-clip br-clip exe" class="color-button" id="redtheme" >Red</button>
              <button augmented-ui="tr-clip tl-clip bl-clip br-clip exe" class="color-button" id="bluetheme">Blue</button>
            </center>
            </div>
          </div>
       
          <div id="navbar" class="definitions-container1">
            <div class="def1" augmented-ui="tr-clip bl-clip bl-clip exe">
<div > <div id="buttons" class="active">

  <button id="inicio" class="button" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
    <i class="fa fa-home"></i><br>
  </button>
<button id="servicos" class="button" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
  <i class="fa fa-tools"></i><br>
</button>
<button id="contato" class="button" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
  <i class="fa fa-envelope"></i><br></button>

</div> <div id="close" class="close" augmented-ui="tr-clip tl-clip bl-clip br-clip exe">
  <i class="fa fa-bars"></i>
</div>
</div></div>


               </div>
            </div>
        </body>
     <script>

     </script>

</html>
!

CSS 

              
                


/*
  augmented-ui
  BSD 2-Clause License
  Copyright (c) James0x57, PropJockey, 2019
*/
[augmented-ui~="exe-init"],
[augmented-ui~="exe"],
[augmented-ui~="exe-lite"],
[augmented-ui~="before"],
[augmented-ui~="after"] {
  --aug-tl: 0px;
  --aug-tl-width: initial;
  --aug-tl-height: initial;
  --aug-_TlWidth: initial;
  --aug-_TlHeight: initial;
  --aug-_TlJoinBX: initial;
  --aug-_TlJoinBY: initial;
  --aug-_TlJoinRX: initial;
  --aug-_TlJoinRY: initial;
  --aug-_TlPath: initial;
  --aug-_TlInset1JoinBX: initial;
  --aug-_TlInset1JoinBY: initial;
  --aug-_TlInset1JoinRX: initial;
  --aug-_TlInset1JoinRY: initial;
  --aug-_TlPathInset1: initial;
  --aug-_TlInset2JoinBX: initial;
  --aug-_TlInset2JoinBY: initial;
  --aug-_TlInset2JoinRX: initial;
  --aug-_TlInset2JoinRY: initial;
  --aug-_TlPathInset2: initial;
  --aug-tr: 0px;
  --aug-tr-width: initial;
  --aug-tr-height: initial;
  --aug-_TrWidth: initial;
  --aug-_TrHeight: initial;
  --aug-_TrJoinLX: initial;
  --aug-_TrJoinLY: initial;
  --aug-_TrJoinBX: initial;
  --aug-_TrJoinBY: initial;
  --aug-_TrPath: initial;
  --aug-_TrInset1JoinLX: initial;
  --aug-_TrInset1JoinLY: initial;
  --aug-_TrInset1JoinBX: initial;
  --aug-_TrInset1JoinBY: initial;
  --aug-_TrPathInset1: initial;
  --aug-_TrInset2JoinLX: initial;
  --aug-_TrInset2JoinLY: initial;
  --aug-_TrInset2JoinBX: initial;
  --aug-_TrInset2JoinBY: initial;
  --aug-_TrPathInset2: initial;
  --aug-br: 0px;
  --aug-br-width: initial;
  --aug-br-height: initial;
  --aug-_BrWidth: initial;
  --aug-_BrHeight: initial;
  --aug-_BrJoinTX: initial;
  --aug-_BrJoinTY: initial;
  --aug-_BrJoinLX: initial;
  --aug-_BrJoinLY: initial;
  --aug-_BrPath: initial;
  --aug-_BrInset1JoinTX: initial;
  --aug-_BrInset1JoinTY: initial;
  --aug-_BrInset1JoinLX: initial;
  --aug-_BrInset1JoinLY: initial;
  --aug-_BrPathInset1: initial;
  --aug-_BrInset2JoinTX: initial;
  --aug-_BrInset2JoinTY: initial;
  --aug-_BrInset2JoinLX: initial;
  --aug-_BrInset2JoinLY: initial;
  --aug-_BrPathInset2: initial;
  --aug-bl: 0px;
  --aug-bl-width: initial;
  --aug-bl-height: initial;
  --aug-_BlWidth: initial;
  --aug-_BlHeight: initial;
  --aug-_BlJoinRX: initial;
  --aug-_BlJoinRY: initial;
  --aug-_BlJoinTX: initial;
  --aug-_BlJoinTY: initial;
  --aug-_BlPath: initial;
  --aug-_BlInset1JoinRX: initial;
  --aug-_BlInset1JoinRY: initial;
  --aug-_BlInset1JoinTX: initial;
  --aug-_BlInset1JoinTY: initial;
  --aug-_BlPathInset1: initial;
  --aug-_BlInset2JoinRX: initial;
  --aug-_BlInset2JoinRY: initial;
  --aug-_BlInset2JoinTX: initial;
  --aug-_BlInset2JoinTY: initial;
  --aug-_BlPathInset2: initial;
  --aug-t: 0px;
  --aug-t-width: initial;
  --aug-t-height: initial;
  --aug-t-origin-x: initial;
  --aug-t-offset: initial;
  --aug-_TWidth: initial;
  --aug-_THeight: initial;
  --aug-_TPath: initial;
  --aug-_TPathInset1: initial;
  --aug-_TPathInset2: initial;
  --aug-r: 0px;
  --aug-r-width: initial;
  --aug-r-height: initial;
  --aug-r-origin-y: initial;
  --aug-r-offset: initial;
  --aug-_RWidth: initial;
  --aug-_RHeight: initial;
  --aug-_RPath: initial;
  --aug-_RPathInset1: initial;
  --aug-_RPathInset2: initial;
  --aug-b: 0px;
  --aug-b-width: initial;
  --aug-b-height: initial;
  --aug-b-origin-x: initial;
  --aug-b-offset: initial;
  --aug-_BWidth: initial;
  --aug-_BHeight: initial;
  --aug-_BPath: initial;
  --aug-_BPathInset1: initial;
  --aug-_BPathInset2: initial;
  --aug-l: 0px;
  --aug-l-width: initial;
  --aug-l-height: initial;
  --aug-l-origin-y: initial;
  --aug-l-offset: initial;
  --aug-_LWidth: initial;
  --aug-_LHeight: initial;
  --aug-_LPath: initial;
  --aug-_LPathInset1: initial;
  --aug-_LPathInset2: initial;
}

[augmented-ui~="tl-clip"],
[augmented-ui~="tl-clip"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px; /* clip size */
  --aug-_TlWidth: var(--aug-tl-width, var(--aug-tl));
  --aug-_TlHeight: var(--aug-tl-height, var(--aug-tl));
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-_TlHeight);
  --aug-_TlJoinRX: var(--aug-_TlWidth);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY), var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY), var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY), var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}
[augmented-ui~="tr-clip"],
[augmented-ui~="tr-clip"] > [augmented-ui~="tr-inherit"] {
  --aug-tr: 15px; /* clip size */
  --aug-_TrWidth: var(--aug-tr-width, var(--aug-tr));
  --aug-_TrHeight: var(--aug-tr-height, var(--aug-tr));
  --aug-_TrJoinLX: calc(100% - var(--aug-_TrWidth));
  --aug-_TrJoinLY: 0px;
  --aug-_TrJoinBX: 100%;
  --aug-_TrJoinBY: var(--aug-_TrHeight);
  --aug-_TrPath: var(--aug-_TrJoinLX) var(--aug-_TrJoinLY), var(--aug-_TrJoinBX) var(--aug-_TrJoinBY);

  --aug-_TrInset1JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_W) / 2));
  --aug-_TrInset1JoinLY: var(--aug-_W);
  --aug-_TrInset1JoinBX: calc(100% - var(--aug-_W));
  --aug-_TrInset1JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_W) / 2);
  --aug-_TrPathInset1: var(--aug-_TrInset1JoinLX) var(--aug-_TrInset1JoinLY), var(--aug-_TrInset1JoinBX) var(--aug-_TrInset1JoinBY);

  --aug-_TrInset2JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_WD) / 2));
  --aug-_TrInset2JoinLY: var(--aug-_WD);
  --aug-_TrInset2JoinBX: calc(100% - var(--aug-_WD));
  --aug-_TrInset2JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_WD) / 2);
  --aug-_TrPathInset2: var(--aug-_TrInset2JoinLX) var(--aug-_TrInset2JoinLY), var(--aug-_TrInset2JoinBX) var(--aug-_TrInset2JoinBY);
}
[augmented-ui~="br-clip"],
[augmented-ui~="br-clip"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* clip size */
  --aug-_BrWidth: var(--aug-br-width, var(--aug-br));
  --aug-_BrHeight: var(--aug-br-height, var(--aug-br));
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-_BrHeight));
  --aug-_BrJoinLX: calc(100% - var(--aug-_BrWidth));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY), var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY), var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY), var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}
[augmented-ui~="bl-clip"],
[augmented-ui~="bl-clip"] > [augmented-ui~="bl-inherit"] {
  --aug-bl: 15px; /* clip size */
  --aug-_BlWidth: var(--aug-bl-width, var(--aug-bl));
  --aug-_BlHeight: var(--aug-bl-height, var(--aug-bl));
  --aug-_BlJoinRX: var(--aug-_BlWidth);
  --aug-_BlJoinRY: 100%;
  --aug-_BlJoinTX: 0px;
  --aug-_BlJoinTY: calc(100% - var(--aug-_BlHeight));
  --aug-_BlPath: var(--aug-_BlJoinRX) var(--aug-_BlJoinRY), var(--aug-_BlJoinTX) var(--aug-_BlJoinTY);

  --aug-_BlInset1JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_W) / 2);
  --aug-_BlInset1JoinRY: calc(100% - var(--aug-_W));
  --aug-_BlInset1JoinTX: var(--aug-_W);
  --aug-_BlInset1JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_W) / 2));
  --aug-_BlPathInset1: var(--aug-_BlInset1JoinRX) var(--aug-_BlInset1JoinRY), var(--aug-_BlInset1JoinTX) var(--aug-_BlInset1JoinTY);

  --aug-_BlInset2JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_WD) / 2);
  --aug-_BlInset2JoinRY: calc(100% - var(--aug-_WD));
  --aug-_BlInset2JoinTX: var(--aug-_WD);
  --aug-_BlInset2JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD) / 2));
  --aug-_BlPathInset2: var(--aug-_BlInset2JoinRX) var(--aug-_BlInset2JoinRY), var(--aug-_BlInset2JoinTX) var(--aug-_BlInset2JoinTY);
}
[augmented-ui~="t-clip"],
[augmented-ui~="t-clip"] > [augmented-ui~="t-inherit"] {
  --aug-t: 15px; /* clip depth */
  --aug-_TWidth: var(--aug-t-width, calc(var(--aug-t) * 2));
  --aug-_THeight: var(--aug-t-height, var(--aug-t));
  --aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_TPath: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) 0px,
                  var(--aug-_TOriginX) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) 0px;

  --aug-_TPathInset1: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W) / 2) var(--aug-_W),
                      var(--aug-_TOriginX) calc(var(--aug-_THeight) + var(--aug-_W) * 1.5),
                      calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W) / 2) var(--aug-_W);

  --aug-_TPathInset2: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD) / 2) var(--aug-_WD),
                      var(--aug-_TOriginX) calc(var(--aug-_THeight) + var(--aug-_WD) * 1.5),
                      calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD) / 2) var(--aug-_WD);
}
[augmented-ui~="r-clip"],
[augmented-ui~="r-clip"] > [augmented-ui~="r-inherit"] {
  --aug-r: 15px; /* clip depth */
  --aug-_RWidth: var(--aug-r-width, var(--aug-r));
  --aug-_RHeight: var(--aug-r-height, calc(var(--aug-r) * 2));
  --aug-_ROriginY: calc(var(--aug-r-origin-y, calc(var(--aug-_TrJoinBY, 0px) / 2 + var(--aug-_BrJoinTY, 100%) / 2)) + var(--aug-r-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_RPath: , 100% calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth)) var(--aug-_ROriginY),
                  100% calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2);

  --aug-_RPathInset1: , calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W) / 2),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W) * 1.5)) var(--aug-_ROriginY),
                        calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W) / 2);

  --aug-_RPathInset2: , calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD) / 2),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD) * 1.5)) var(--aug-_ROriginY),
                        calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD) / 2);
}
[augmented-ui~="b-clip"],
[augmented-ui~="b-clip"] > [augmented-ui~="b-inherit"] {
  --aug-b: 15px; /* clip depth */
  --aug-_BWidth: var(--aug-b-width, calc(var(--aug-b) * 2));
  --aug-_BHeight: var(--aug-b-height, var(--aug-b));
  --aug-_BOriginX: calc(var(--aug-b-origin-x, calc(var(--aug-_BlJoinRX, 0px) / 2 + var(--aug-_BrJoinLX, 100%) / 2)) + var(--aug-b-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_BPath: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) 100%,
                  var(--aug-_BOriginX) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) 100%;

  --aug-_BPathInset1: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W) / 2) calc(100% - var(--aug-_W)),
                      var(--aug-_BOriginX) calc(100% - (var(--aug-_BHeight) + var(--aug-_W) * 1.5)),
                      calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W) / 2) calc(100% - var(--aug-_W));

  --aug-_BPathInset2: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD) / 2) calc(100% - var(--aug-_WD)),
                      var(--aug-_BOriginX) calc(100% - (var(--aug-_BHeight) + var(--aug-_WD) * 1.5)),
                      calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD) / 2) calc(100% - var(--aug-_WD));
}
[augmented-ui~="l-clip"],
[augmented-ui~="l-clip"] > [augmented-ui~="l-inherit"] {
  --aug-l: 15px; /* clip depth */
  --aug-_LWidth: var(--aug-l-width, var(--aug-l));
  --aug-_LHeight: var(--aug-l-height, calc(var(--aug-l) * 2));
  --aug-_LOriginY: calc(var(--aug-l-origin-y, calc(var(--aug-_TlJoinBY, 0px) / 2 + var(--aug-_BlJoinTY, 100%) / 2)) + var(--aug-l-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_LPath: , 0px calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  var(--aug-_LWidth) var(--aug-_LOriginY),
                  0px calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2);

  --aug-_LPathInset1: , var(--aug-_W) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W) / 2),
                        calc(var(--aug-_LWidth) + var(--aug-_W) * 1.5) var(--aug-_LOriginY),
                        var(--aug-_W) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W) / 2);

  --aug-_LPathInset2: , var(--aug-_WD) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD) / 2),
                        calc(var(--aug-_LWidth) + var(--aug-_WD) * 1.5) var(--aug-_LOriginY),
                        var(--aug-_WD) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD) / 2);
}

[augmented-ui~="tl-round"],
[augmented-ui~="tl-round"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px; /* radius */
  --aug-_Sin18cos72: 0.30901699437;
  --aug-_Sin36cos54: 0.58778525229;
  --aug-_Sin54cos36: 0.80901699437;
  --aug-_Sin72cos18: 0.95105651629;
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-tl);
  --aug-_TlJoinRX: var(--aug-tl);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY),
            calc(var(--aug-tl) - var(--aug-_Sin72cos18) * var(--aug-tl)) calc(var(--aug-tl) - var(--aug-_Sin18cos72) * var(--aug-tl)),
            calc(var(--aug-tl) - var(--aug-_Sin54cos36) * var(--aug-tl)) calc(var(--aug-tl) - var(--aug-_Sin36cos54) * var(--aug-tl)),
            calc(var(--aug-tl) - var(--aug-_Sin36cos54) * var(--aug-tl)) calc(var(--aug-tl) - var(--aug-_Sin54cos36) * var(--aug-tl)),
            calc(var(--aug-tl) - var(--aug-_Sin18cos72) * var(--aug-tl)) calc(var(--aug-tl) - var(--aug-_Sin72cos18) * var(--aug-tl)),
            var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: var(--aug-tl);
  --aug-_TlInset1JoinRX: var(--aug-tl);
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY),
                calc(var(--aug-tl) - var(--aug-_Sin72cos18) * (var(--aug-tl) - var(--aug-_W))) calc(var(--aug-tl) - var(--aug-_Sin18cos72) * (var(--aug-tl) - var(--aug-_W))),
                calc(var(--aug-tl) - var(--aug-_Sin54cos36) * (var(--aug-tl) - var(--aug-_W))) calc(var(--aug-tl) - var(--aug-_Sin36cos54) * (var(--aug-tl) - var(--aug-_W))),
                calc(var(--aug-tl) - var(--aug-_Sin36cos54) * (var(--aug-tl) - var(--aug-_W))) calc(var(--aug-tl) - var(--aug-_Sin54cos36) * (var(--aug-tl) - var(--aug-_W))),
                calc(var(--aug-tl) - var(--aug-_Sin18cos72) * (var(--aug-tl) - var(--aug-_W))) calc(var(--aug-tl) - var(--aug-_Sin72cos18) * (var(--aug-tl) - var(--aug-_W))),
                var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-tl) + var(--aug-_WD));
  --aug-_TlInset2JoinRX: calc(var(--aug-tl) + var(--aug-_WD));
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY),
                    calc(var(--aug-tl) - var(--aug-_Sin72cos18) * (var(--aug-tl) - var(--aug-_WD))) calc(var(--aug-tl) - var(--aug-_Sin18cos72) * (var(--aug-tl) - var(--aug-_WD))),
                    calc(var(--aug-tl) - var(--aug-_Sin54cos36) * (var(--aug-tl) - var(--aug-_WD))) calc(var(--aug-tl) - var(--aug-_Sin36cos54) * (var(--aug-tl) - var(--aug-_WD))),
                    calc(var(--aug-tl) - var(--aug-_Sin36cos54) * (var(--aug-tl) - var(--aug-_WD))) calc(var(--aug-tl) - var(--aug-_Sin54cos36) * (var(--aug-tl) - var(--aug-_WD))),
                    calc(var(--aug-tl) - var(--aug-_Sin18cos72) * (var(--aug-tl) - var(--aug-_WD))) calc(var(--aug-tl) - var(--aug-_Sin72cos18) * (var(--aug-tl) - var(--aug-_WD))),
                    var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}
[augmented-ui~="tr-round"],
[augmented-ui~="tr-round"] > [augmented-ui~="tr-inherit"] {
  --aug-tr: 15px; /* radius */
  --aug-_Sin18cos72: 0.30901699437;
  --aug-_Sin36cos54: 0.58778525229;
  --aug-_Sin54cos36: 0.80901699437;
  --aug-_Sin72cos18: 0.95105651629;
  --aug-_TrJoinLX: calc(100% - var(--aug-tr));
  --aug-_TrJoinLY: 0px;
  --aug-_TrJoinBX: 100%;
  --aug-_TrJoinBY: var(--aug-tr);
  --aug-_TrPath: var(--aug-_TrJoinLX) var(--aug-_TrJoinLY),
            calc(100% - var(--aug-tr) + var(--aug-_Sin18cos72) * var(--aug-tr)) calc(var(--aug-tr) - var(--aug-_Sin72cos18) * var(--aug-tr)),
            calc(100% - var(--aug-tr) + var(--aug-_Sin36cos54) * var(--aug-tr)) calc(var(--aug-tr) - var(--aug-_Sin54cos36) * var(--aug-tr)),
            calc(100% - var(--aug-tr) + var(--aug-_Sin54cos36) * var(--aug-tr)) calc(var(--aug-tr) - var(--aug-_Sin36cos54) * var(--aug-tr)),
            calc(100% - var(--aug-tr) + var(--aug-_Sin72cos18) * var(--aug-tr)) calc(var(--aug-tr) - var(--aug-_Sin18cos72) * var(--aug-tr)),
            var(--aug-_TrJoinBX) var(--aug-_TrJoinBY);

  --aug-_TrInset1JoinLX: calc(100% - var(--aug-tr));
  --aug-_TrInset1JoinLY: var(--aug-_W);
  --aug-_TrInset1JoinBX: calc(100% - var(--aug-_W));
  --aug-_TrInset1JoinBY: var(--aug-tr);
  --aug-_TrPathInset1: var(--aug-_TrInset1JoinLX) var(--aug-_TrInset1JoinLY),
                calc(100% - var(--aug-tr) + var(--aug-_Sin18cos72) * (var(--aug-tr) - var(--aug-_W))) calc(var(--aug-tr) - var(--aug-_Sin72cos18) * (var(--aug-tr) - var(--aug-_W))),
                calc(100% - var(--aug-tr) + var(--aug-_Sin36cos54) * (var(--aug-tr) - var(--aug-_W))) calc(var(--aug-tr) - var(--aug-_Sin54cos36) * (var(--aug-tr) - var(--aug-_W))),
                calc(100% - var(--aug-tr) + var(--aug-_Sin54cos36) * (var(--aug-tr) - var(--aug-_W))) calc(var(--aug-tr) - var(--aug-_Sin36cos54) * (var(--aug-tr) - var(--aug-_W))),
                calc(100% - var(--aug-tr) + var(--aug-_Sin72cos18) * (var(--aug-tr) - var(--aug-_W))) calc(var(--aug-tr) - var(--aug-_Sin18cos72) * (var(--aug-tr) - var(--aug-_W))),
                var(--aug-_TrInset1JoinBX) var(--aug-_TrInset1JoinBY);

  --aug-_TrInset2JoinLX: calc(100% - (var(--aug-tr) + var(--aug-_WD)));
  --aug-_TrInset2JoinLY: var(--aug-_WD);
  --aug-_TrInset2JoinBX: calc(100% - var(--aug-_WD));
  --aug-_TrInset2JoinBY: calc(var(--aug-tr) + var(--aug-_WD));
  --aug-_TrPathInset2: var(--aug-_TrInset2JoinLX) var(--aug-_TrInset2JoinLY),
                    calc(100% - var(--aug-tr) + var(--aug-_Sin18cos72) * (var(--aug-tr) - var(--aug-_WD))) calc(var(--aug-tr) - var(--aug-_Sin72cos18) * (var(--aug-tr) - var(--aug-_WD))),
                    calc(100% - var(--aug-tr) + var(--aug-_Sin36cos54) * (var(--aug-tr) - var(--aug-_WD))) calc(var(--aug-tr) - var(--aug-_Sin54cos36) * (var(--aug-tr) - var(--aug-_WD))),
                    calc(100% - var(--aug-tr) + var(--aug-_Sin54cos36) * (var(--aug-tr) - var(--aug-_WD))) calc(var(--aug-tr) - var(--aug-_Sin36cos54) * (var(--aug-tr) - var(--aug-_WD))),
                    calc(100% - var(--aug-tr) + var(--aug-_Sin72cos18) * (var(--aug-tr) - var(--aug-_WD))) calc(var(--aug-tr) - var(--aug-_Sin18cos72) * (var(--aug-tr) - var(--aug-_WD))),
                    var(--aug-_TrInset2JoinBX) var(--aug-_TrInset2JoinBY);
}
[augmented-ui~="br-round"],
[augmented-ui~="br-round"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* radius */
  --aug-_Sin18cos72: 0.30901699437;
  --aug-_Sin36cos54: 0.58778525229;
  --aug-_Sin54cos36: 0.80901699437;
  --aug-_Sin72cos18: 0.95105651629;
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-br));
  --aug-_BrJoinLX: calc(100% - var(--aug-br));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY),
            calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * var(--aug-br)) calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * var(--aug-br)),
            calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * var(--aug-br)) calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * var(--aug-br)),
            calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * var(--aug-br)) calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * var(--aug-br)),
            calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * var(--aug-br)) calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * var(--aug-br)),
            var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-br) + var(--aug-_W)));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-br) + var(--aug-_W)));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY),
                calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * (var(--aug-br) - var(--aug-_W))) calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * (var(--aug-br) - var(--aug-_W))),
                calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * (var(--aug-br) - var(--aug-_W))) calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * (var(--aug-br) - var(--aug-_W))),
                calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * (var(--aug-br) - var(--aug-_W))) calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * (var(--aug-br) - var(--aug-_W))),
                calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * (var(--aug-br) - var(--aug-_W))) calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * (var(--aug-br) - var(--aug-_W))),
                var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-br) + var(--aug-_WD)));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-br) + var(--aug-_WD)));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY),
                    calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * (var(--aug-br) - var(--aug-_WD))) calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * (var(--aug-br) - var(--aug-_WD))),
                    calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * (var(--aug-br) - var(--aug-_WD))) calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * (var(--aug-br) - var(--aug-_WD))),
                    calc(100% - var(--aug-br) + var(--aug-_Sin36cos54) * (var(--aug-br) - var(--aug-_WD))) calc(100% - var(--aug-br) + var(--aug-_Sin54cos36) * (var(--aug-br) - var(--aug-_WD))),
                    calc(100% - var(--aug-br) + var(--aug-_Sin18cos72) * (var(--aug-br) - var(--aug-_WD))) calc(100% - var(--aug-br) + var(--aug-_Sin72cos18) * (var(--aug-br) - var(--aug-_WD))),
                    var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}
[augmented-ui~="bl-round"],
[augmented-ui~="bl-round"] > [augmented-ui~="bl-inherit"] {
  --aug-bl: 15px; /* radius */
  --aug-_Sin18cos72: 0.30901699437;
  --aug-_Sin36cos54: 0.58778525229;
  --aug-_Sin54cos36: 0.80901699437;
  --aug-_Sin72cos18: 0.95105651629;
  --aug-_BlJoinRX: var(--aug-bl);
  --aug-_BlJoinRY: 100%;
  --aug-_BlJoinTX: 0px;
  --aug-_BlJoinTY: calc(100% - var(--aug-bl));
  --aug-_BlPath: var(--aug-_BlJoinRX) var(--aug-_BlJoinRY),
            calc(var(--aug-bl) - var(--aug-_Sin18cos72) * var(--aug-bl)) calc(100% - var(--aug-bl) + var(--aug-_Sin72cos18) * var(--aug-bl)),
            calc(var(--aug-bl) - var(--aug-_Sin36cos54) * var(--aug-bl)) calc(100% - var(--aug-bl) + var(--aug-_Sin54cos36) * var(--aug-bl)),
            calc(var(--aug-bl) - var(--aug-_Sin54cos36) * var(--aug-bl)) calc(100% - var(--aug-bl) + var(--aug-_Sin36cos54) * var(--aug-bl)),
            calc(var(--aug-bl) - var(--aug-_Sin72cos18) * var(--aug-bl)) calc(100% - var(--aug-bl) + var(--aug-_Sin18cos72) * var(--aug-bl)),
            var(--aug-_BlJoinTX) var(--aug-_BlJoinTY);

  --aug-_BlInset1JoinRX: calc(var(--aug-bl) + var(--aug-_W));
  --aug-_BlInset1JoinRY: calc(100% - var(--aug-_W));
  --aug-_BlInset1JoinTX: var(--aug-_W);
  --aug-_BlInset1JoinTY: calc(100% - (var(--aug-bl) + var(--aug-_W)));
  --aug-_BlPathInset1: var(--aug-_BlInset1JoinRX) var(--aug-_BlInset1JoinRY),
                calc(var(--aug-bl) - var(--aug-_Sin18cos72) * (var(--aug-bl) - var(--aug-_W))) calc(100% - var(--aug-bl) + var(--aug-_Sin72cos18) * (var(--aug-bl) - var(--aug-_W))),
                calc(var(--aug-bl) - var(--aug-_Sin36cos54) * (var(--aug-bl) - var(--aug-_W))) calc(100% - var(--aug-bl) + var(--aug-_Sin54cos36) * (var(--aug-bl) - var(--aug-_W))),
                calc(var(--aug-bl) - var(--aug-_Sin54cos36) * (var(--aug-bl) - var(--aug-_W))) calc(100% - var(--aug-bl) + var(--aug-_Sin36cos54) * (var(--aug-bl) - var(--aug-_W))),
                calc(var(--aug-bl) - var(--aug-_Sin72cos18) * (var(--aug-bl) - var(--aug-_W))) calc(100% - var(--aug-bl) + var(--aug-_Sin18cos72) * (var(--aug-bl) - var(--aug-_W))),
                var(--aug-_BlInset1JoinTX) var(--aug-_BlInset1JoinTY);

  --aug-_BlInset2JoinRX: calc(var(--aug-bl) + var(--aug-_WD));
  --aug-_BlInset2JoinRY: calc(100% - var(--aug-_WD));
  --aug-_BlInset2JoinTX: var(--aug-_WD);
  --aug-_BlInset2JoinTY: calc(100% - (var(--aug-bl) + var(--aug-_WD)));
  --aug-_BlPathInset2: var(--aug-_BlInset2JoinRX) var(--aug-_BlInset2JoinRY),
                    calc(var(--aug-bl) - var(--aug-_Sin18cos72) * (var(--aug-bl) - var(--aug-_WD))) calc(100% - var(--aug-bl) + var(--aug-_Sin72cos18) * (var(--aug-bl) - var(--aug-_WD))),
                    calc(var(--aug-bl) - var(--aug-_Sin36cos54) * (var(--aug-bl) - var(--aug-_WD))) calc(100% - var(--aug-bl) + var(--aug-_Sin54cos36) * (var(--aug-bl) - var(--aug-_WD))),
                    calc(var(--aug-bl) - var(--aug-_Sin54cos36) * (var(--aug-bl) - var(--aug-_WD))) calc(100% - var(--aug-bl) + var(--aug-_Sin36cos54) * (var(--aug-bl) - var(--aug-_WD))),
                    calc(var(--aug-bl) - var(--aug-_Sin72cos18) * (var(--aug-bl) - var(--aug-_WD))) calc(100% - var(--aug-bl) + var(--aug-_Sin18cos72) * (var(--aug-bl) - var(--aug-_WD))),
                    var(--aug-_BlInset2JoinTX) var(--aug-_BlInset2JoinTY);
}

[augmented-ui~="tl-rect"],
[augmented-ui~="tl-rect"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px; /* size */
  --aug-_TlWidth: var(--aug-tl-width, var(--aug-tl));
  --aug-_TlHeight: var(--aug-tl-height, var(--aug-tl));
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-_TlHeight);
  --aug-_TlJoinRX: var(--aug-_TlWidth);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY),
            var(--aug-_TlWidth) var(--aug-_TlHeight),
            var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_W));
  --aug-_TlInset1JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_W));
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY),
                 calc(var(--aug-_W) + var(--aug-_TlWidth)) calc(var(--aug-_TlHeight) + var(--aug-_W)),
                 var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_WD));
  --aug-_TlInset2JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_WD));
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY),
                 calc(var(--aug-_WD) + var(--aug-_TlWidth)) calc(var(--aug-_TlHeight) + var(--aug-_WD)),
                 var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}
[augmented-ui~="tr-rect"],
[augmented-ui~="tr-rect"] > [augmented-ui~="tr-inherit"] {
  --aug-tr: 15px; /* size */
  --aug-_TrWidth: var(--aug-tr-width, var(--aug-tr));
  --aug-_TrHeight: var(--aug-tr-height, var(--aug-tr));
  --aug-_TrJoinLX: calc(100% - var(--aug-_TrWidth));
  --aug-_TrJoinLY: 0px;
  --aug-_TrJoinBX: 100%;
  --aug-_TrJoinBY: var(--aug-_TrHeight);
  --aug-_TrPath: var(--aug-_TrJoinLX) var(--aug-_TrJoinLY),
            calc(100% - var(--aug-_TrWidth)) var(--aug-_TrHeight),
            var(--aug-_TrJoinBX) var(--aug-_TrJoinBY);

  --aug-_TrInset1JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_W)));
  --aug-_TrInset1JoinLY: var(--aug-_W);
  --aug-_TrInset1JoinBX: calc(100% - var(--aug-_W));
  --aug-_TrInset1JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_W));
  --aug-_TrPathInset1: var(--aug-_TrInset1JoinLX) var(--aug-_TrInset1JoinLY),
                calc(100% - var(--aug-_W) - var(--aug-_TrWidth)) calc(var(--aug-_TrHeight) + var(--aug-_W)),
                var(--aug-_TrInset1JoinBX) var(--aug-_TrInset1JoinBY);

  --aug-_TrInset2JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_WD)));
  --aug-_TrInset2JoinLY: var(--aug-_WD);
  --aug-_TrInset2JoinBX: calc(100% - var(--aug-_WD));
  --aug-_TrInset2JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_WD));
  --aug-_TrPathInset2: var(--aug-_TrInset2JoinLX) var(--aug-_TrInset2JoinLY),
                    calc(100% - var(--aug-_WD) - var(--aug-_TrWidth)) calc(var(--aug-_TrHeight) + var(--aug-_WD)),
                    var(--aug-_TrInset2JoinBX) var(--aug-_TrInset2JoinBY);
}
[augmented-ui~="br-rect"],
[augmented-ui~="br-rect"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* size */
  --aug-_BrWidth: var(--aug-br-width, var(--aug-br));
  --aug-_BrHeight: var(--aug-br-height, var(--aug-br));
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-_BrHeight));
  --aug-_BrJoinLX: calc(100% - var(--aug-_BrWidth));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY),
            calc(100% - var(--aug-_BrWidth)) calc(100% - var(--aug-_BrHeight)),
            var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_W)));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_W)));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY),
                 calc(100% - var(--aug-_W) - var(--aug-_BrWidth)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_W))),
                 var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD)));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_WD)));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY),
                     calc(100% - var(--aug-_WD) - var(--aug-_BrWidth)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD))),
                     var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}
[augmented-ui~="bl-rect"],
[augmented-ui~="bl-rect"] > [augmented-ui~="bl-inherit"] {
  --aug-bl: 15px; /* size */
  --aug-_BlWidth: var(--aug-bl-width, var(--aug-bl));
  --aug-_BlHeight: var(--aug-bl-height, var(--aug-bl));
  --aug-_BlJoinRX: var(--aug-_BlWidth);
  --aug-_BlJoinRY: 100%;
  --aug-_BlJoinTX: 0px;
  --aug-_BlJoinTY: calc(100% - var(--aug-_BlHeight));
  --aug-_BlPath: var(--aug-_BlJoinRX) var(--aug-_BlJoinRY),
            var(--aug-_BlWidth) calc(100% - var(--aug-_BlHeight)),
            var(--aug-_BlJoinTX) var(--aug-_BlJoinTY);

  --aug-_BlInset1JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_W));
  --aug-_BlInset1JoinRY: calc(100% - var(--aug-_W));
  --aug-_BlInset1JoinTX: var(--aug-_W);
  --aug-_BlInset1JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_W)));
  --aug-_BlPathInset1: var(--aug-_BlInset1JoinRX) var(--aug-_BlInset1JoinRY),
                 calc(var(--aug-_BlWidth) + var(--aug-_W)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_W))),
                 var(--aug-_BlInset1JoinTX) var(--aug-_BlInset1JoinTY);

  --aug-_BlInset2JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_WD));
  --aug-_BlInset2JoinRY: calc(100% - var(--aug-_WD));
  --aug-_BlInset2JoinTX: var(--aug-_WD);
  --aug-_BlInset2JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD)));
  --aug-_BlPathInset2: var(--aug-_BlInset2JoinRX) var(--aug-_BlInset2JoinRY),
                     calc(var(--aug-_BlWidth) + var(--aug-_WD)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD))),
                     var(--aug-_BlInset2JoinTX) var(--aug-_BlInset2JoinTY);
}
[augmented-ui~="t-rect"],
[augmented-ui~="t-rect"] > [augmented-ui~="t-inherit"] {
  --aug-t: 15px; /* size */
  --aug-_TWidth: var(--aug-t-width, calc(var(--aug-t) * 2));
  --aug-_THeight: var(--aug-t-height, var(--aug-t));
  --aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_TPath: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) 0px,
                  calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) 0px;

  --aug-_TPathInset1: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W)) var(--aug-_W),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W)) calc(var(--aug-_THeight) + var(--aug-_W)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W)) calc(var(--aug-_THeight) + var(--aug-_W)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W)) var(--aug-_W);

  --aug-_TPathInset2: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD)) var(--aug-_WD),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD)) calc(var(--aug-_THeight) + var(--aug-_WD)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD)) calc(var(--aug-_THeight) + var(--aug-_WD)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD)) var(--aug-_WD);
}
[augmented-ui~="r-rect"],
[augmented-ui~="r-rect"] > [augmented-ui~="r-inherit"] {
  --aug-r: 15px; /* size */
  --aug-_RWidth: var(--aug-r-width, var(--aug-r));
  --aug-_RHeight: var(--aug-r-height, calc(var(--aug-r) * 2));
  --aug-_ROriginY: calc(var(--aug-r-origin-y, calc(var(--aug-_TrJoinBY, 0px) / 2 + var(--aug-_BrJoinTY, 100%) / 2)) + var(--aug-r-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_RPath: , 100% calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2),
                  100% calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2);

  --aug-_RPathInset1: , calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W)),
                        calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W));

  --aug-_RPathInset2: , calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD)),
                        calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD));
}
[augmented-ui~="b-rect"],
[augmented-ui~="b-rect"] > [augmented-ui~="b-inherit"] {
  --aug-b: 15px; /* size */
  --aug-_BWidth: var(--aug-b-width, calc(var(--aug-b) * 2));
  --aug-_BHeight: var(--aug-b-height, var(--aug-b));
  --aug-_BOriginX: calc(var(--aug-b-origin-x, calc(var(--aug-_BlJoinRX, 0px) / 2 + var(--aug-_BrJoinLX, 100%) / 2)) + var(--aug-b-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_BPath: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) 100%,
                  calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) 100%;

  --aug-_BPathInset1: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W)) calc(100% - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W)) calc(100% - var(--aug-_BHeight) - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W)) calc(100% - var(--aug-_BHeight) - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W)) calc(100% - var(--aug-_W));

  --aug-_BPathInset2: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD)) calc(100% - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD)) calc(100% - var(--aug-_BHeight) - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD)) calc(100% - var(--aug-_BHeight) - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD)) calc(100% - var(--aug-_WD));
}
[augmented-ui~="l-rect"],
[augmented-ui~="l-rect"] > [augmented-ui~="l-inherit"] {
  --aug-l: 15px; /* size */
  --aug-_LWidth: var(--aug-l-width, var(--aug-l));
  --aug-_LHeight: var(--aug-l-height, calc(var(--aug-l) * 2));
  --aug-_LOriginY: calc(var(--aug-l-origin-y, calc(var(--aug-_TlJoinBY, 0px) / 2 + var(--aug-_BlJoinTY, 100%) / 2)) + var(--aug-l-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_LPath: , 0px calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  var(--aug-_LWidth) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  var(--aug-_LWidth) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2),
                  0px calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2);

  --aug-_LPathInset1: , var(--aug-_W) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W)),
                        calc(var(--aug-_LWidth) + var(--aug-_W)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W)),
                        calc(var(--aug-_LWidth) + var(--aug-_W)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W)),
                        var(--aug-_W) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W));

  --aug-_LPathInset2: , var(--aug-_WD) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD)),
                        calc(var(--aug-_LWidth) + var(--aug-_WD)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD)),
                        calc(var(--aug-_LWidth) + var(--aug-_WD)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD)),
                        var(--aug-_WD) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD));
}

[augmented-ui~="tl-clip-x"],
[augmented-ui~="tl-clip-x"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px;
  --aug-_TlHeight: var(--aug-tl-height, var(--aug-tl));
  --aug-_TlNotch: var(--aug-_TlHeight); /* how much of width is the notch */
  --aug-_TlWidth: var(--aug-tl-width, calc(var(--aug-tl) + var(--aug-_TlNotch)));
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-_TlHeight);
  --aug-_TlJoinRX: var(--aug-_TlWidth);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY),
            calc(var(--aug-_TlWidth) - var(--aug-_TlNotch)) var(--aug-_TlHeight),
            var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_W));
  --aug-_TlInset1JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY),
                 calc(var(--aug-_W) / 2 + var(--aug-_TlWidth) - var(--aug-_TlNotch)) calc(var(--aug-_TlHeight) + var(--aug-_W)),
                 var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_WD));
  --aug-_TlInset2JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY),
                 calc(var(--aug-_WD) / 2 + var(--aug-_TlWidth) - var(--aug-_TlNotch)) calc(var(--aug-_TlHeight) + var(--aug-_WD)),
                 var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}
[augmented-ui~="tr-clip-x"],
[augmented-ui~="tr-clip-x"] > [augmented-ui~="tr-inherit"] {
  --aug-tr: 15px;
  --aug-_TrHeight: var(--aug-tr-height, var(--aug-tr));
  --aug-_TrNotch: var(--aug-_TrHeight); /* how much of width is the notch */
  --aug-_TrWidth: var(--aug-tr-width, calc(var(--aug-tr) + var(--aug-_TrNotch)));
  --aug-_TrJoinLX: calc(100% - var(--aug-_TrWidth));
  --aug-_TrJoinLY: 0px;
  --aug-_TrJoinBX: 100%;
  --aug-_TrJoinBY: var(--aug-_TrHeight);
  --aug-_TrPath: var(--aug-_TrJoinLX) var(--aug-_TrJoinLY),
            calc(100% - var(--aug-_TrWidth) + var(--aug-_TrNotch)) var(--aug-_TrHeight),
            var(--aug-_TrJoinBX) var(--aug-_TrJoinBY);

  --aug-_TrInset1JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_W) / 2));
  --aug-_TrInset1JoinLY: var(--aug-_W);
  --aug-_TrInset1JoinBX: calc(100% - var(--aug-_W));
  --aug-_TrInset1JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_W));
  --aug-_TrPathInset1: var(--aug-_TrInset1JoinLX) var(--aug-_TrInset1JoinLY),
                calc(100% - var(--aug-_W) / 2 - var(--aug-_TrWidth) + var(--aug-_TrNotch)) calc(var(--aug-_TrHeight) + var(--aug-_W)),
                var(--aug-_TrInset1JoinBX) var(--aug-_TrInset1JoinBY);

  --aug-_TrInset2JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_WD) / 2));
  --aug-_TrInset2JoinLY: var(--aug-_WD);
  --aug-_TrInset2JoinBX: calc(100% - var(--aug-_WD));
  --aug-_TrInset2JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_WD));
  --aug-_TrPathInset2: var(--aug-_TrInset2JoinLX) var(--aug-_TrInset2JoinLY),
                    calc(100% - var(--aug-_WD) / 2 - var(--aug-_TrWidth) + var(--aug-_TrNotch)) calc(var(--aug-_TrHeight) + var(--aug-_WD)),
                    var(--aug-_TrInset2JoinBX) var(--aug-_TrInset2JoinBY);
}
[augmented-ui~="br-clip-x"],
[augmented-ui~="br-clip-x"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* size */
  --aug-_BrHeight: var(--aug-br-height, var(--aug-br));
  --aug-_BrNotch: var(--aug-_BrHeight); /* how much of width is the notch */
  --aug-_BrWidth: var(--aug-br-width, calc(var(--aug-br) + var(--aug-_BrNotch)));
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-_BrHeight));
  --aug-_BrJoinLX: calc(100% - var(--aug-_BrWidth));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY),
            calc(100% - var(--aug-_BrWidth) + var(--aug-_BrNotch)) calc(100% - var(--aug-_BrHeight)),
            var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_W)));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY),
                 calc(100% - var(--aug-_W) / 2 - var(--aug-_BrWidth) + var(--aug-_BrNotch)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_W))),
                 var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD)));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY),
                     calc(100% - var(--aug-_WD) / 2 - var(--aug-_BrWidth) + var(--aug-_BrNotch)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD))),
                     var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}
[augmented-ui~="bl-clip-x"],
[augmented-ui~="bl-clip-x"] > [augmented-ui~="bl-inherit"] {
  --aug-bl: 15px; /* size */
  --aug-_BlHeight: var(--aug-bl-height, var(--aug-bl));
  --aug-_BlNotch: var(--aug-_BlHeight); /* how much of width is the notch */
  --aug-_BlWidth: var(--aug-bl-width, calc(var(--aug-bl) + var(--aug-_BlNotch)));
  --aug-_BlJoinRX: var(--aug-_BlWidth);
  --aug-_BlJoinRY: 100%;
  --aug-_BlJoinTX: 0px;
  --aug-_BlJoinTY: calc(100% - var(--aug-_BlHeight));
  --aug-_BlPath: var(--aug-_BlJoinRX) var(--aug-_BlJoinRY),
            calc(var(--aug-_BlWidth) - var(--aug-_BlNotch)) calc(100% - var(--aug-_BlHeight)),
            var(--aug-_BlJoinTX) var(--aug-_BlJoinTY);

  --aug-_BlInset1JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_W) / 2);
  --aug-_BlInset1JoinRY: calc(100% - var(--aug-_W));
  --aug-_BlInset1JoinTX: var(--aug-_W);
  --aug-_BlInset1JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_W)));
  --aug-_BlPathInset1: var(--aug-_BlInset1JoinRX) var(--aug-_BlInset1JoinRY),
                 calc(var(--aug-_BlWidth) + var(--aug-_W) / 2 - var(--aug-_BlNotch)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_W))),
                 var(--aug-_BlInset1JoinTX) var(--aug-_BlInset1JoinTY);

  --aug-_BlInset2JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_WD) / 2);
  --aug-_BlInset2JoinRY: calc(100% - var(--aug-_WD));
  --aug-_BlInset2JoinTX: var(--aug-_WD);
  --aug-_BlInset2JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD)));
  --aug-_BlPathInset2: var(--aug-_BlInset2JoinRX) var(--aug-_BlInset2JoinRY),
                     calc(var(--aug-_BlWidth) + var(--aug-_WD) / 2 - var(--aug-_BlNotch)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD))),
                     var(--aug-_BlInset2JoinTX) var(--aug-_BlInset2JoinTY);
}
[augmented-ui~="t-clip-x"],
[augmented-ui~="t-clip-x"] > [augmented-ui~="t-inherit"] {
  --aug-t: 15px; /* size */
  --aug-_THeight: var(--aug-t-height, var(--aug-t));
  --aug-_TNotch: var(--aug-_THeight); /* how much of half the width is the notch */
  --aug-_TWidth: var(--aug-t-width, calc(var(--aug-t) * 2 + var(--aug-_TNotch) * 2));
  --aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_TPath: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) 0px,
                  calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 + var(--aug-_TNotch)) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 - var(--aug-_TNotch)) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) 0px;

  --aug-_TPathInset1: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W) / 2) var(--aug-_W),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W) / 2 + var(--aug-_TNotch)) calc(var(--aug-_THeight) + var(--aug-_W)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W) / 2 - var(--aug-_TNotch)) calc(var(--aug-_THeight) + var(--aug-_W)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W) / 2) var(--aug-_W);

  --aug-_TPathInset2: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD) / 2) var(--aug-_WD),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD) / 2 + var(--aug-_TNotch)) calc(var(--aug-_THeight) + var(--aug-_WD)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD) / 2 - var(--aug-_TNotch)) calc(var(--aug-_THeight) + var(--aug-_WD)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD) / 2) var(--aug-_WD);
}
[augmented-ui~="r-clip-x"],
[augmented-ui~="r-clip-x"] > [augmented-ui~="r-inherit"] {
  --aug-r: 15px; /* size */
  --aug-_RHeight: var(--aug-r-height, calc(var(--aug-r) * 2));
  --aug-_RNotch: calc(var(--aug-_RHeight) / 2); /* how much of width is the notch */
  --aug-_RWidth: var(--aug-r-width, calc(var(--aug-r) + var(--aug-_RNotch)));
  --aug-_ROriginY: calc(var(--aug-r-origin-y, calc(var(--aug-_TrJoinBY, 0px) / 2 + var(--aug-_BrJoinTY, 100%) / 2)) + var(--aug-r-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_RPath: , 100% calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth) + var(--aug-_RNotch)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth)) var(--aug-_ROriginY),
                  calc(100% - var(--aug-_RWidth) + var(--aug-_RNotch)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2),
                  100% calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2);

  --aug-_RPathInset1: , calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W) / 2 - var(--aug-_RNotch))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W) * 1.5)) var(--aug-_ROriginY),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W) / 2 - var(--aug-_RNotch))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W)),
                        calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W));

  --aug-_RPathInset2: , calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD) / 2 - var(--aug-_RNotch))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD) * 1.5)) var(--aug-_ROriginY),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD) / 2 - var(--aug-_RNotch))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD)),
                        calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD));
}
[augmented-ui~="b-clip-x"],
[augmented-ui~="b-clip-x"] > [augmented-ui~="b-inherit"] {
  --aug-b: 15px; /* size */
  --aug-_BHeight: var(--aug-b-height, var(--aug-b));
  --aug-_BNotch: var(--aug-_BHeight); /* how much of half the width is the notch */
  --aug-_BWidth: var(--aug-b-width, calc(var(--aug-b) * 2 + var(--aug-_BNotch) * 2));
  --aug-_BOriginX: calc(var(--aug-b-origin-x, calc(var(--aug-_BlJoinRX, 0px) / 2 + var(--aug-_BrJoinLX, 100%) / 2)) + var(--aug-b-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_BPath: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) 100%,
                  calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 - var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 + var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) 100%;

  --aug-_BPathInset1: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W) / 2) calc(100% - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W) / 2 - var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight) - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W) / 2 + var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight) - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W) / 2) calc(100% - var(--aug-_W));

  --aug-_BPathInset2: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD) / 2) calc(100% - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD) / 2 - var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight) - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD) / 2 + var(--aug-_BNotch)) calc(100% - var(--aug-_BHeight) - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD) / 2) calc(100% - var(--aug-_WD));
}
[augmented-ui~="l-clip-x"],
[augmented-ui~="l-clip-x"] > [augmented-ui~="l-inherit"] {
  --aug-l: 15px; /* size */
  --aug-_LHeight: var(--aug-l-height, calc(var(--aug-l) * 2));
  --aug-_LNotch: calc(var(--aug-_LHeight) / 2); /* how much of width is the notch */
  --aug-_LWidth: var(--aug-l-width, calc(var(--aug-l) + var(--aug-_LNotch)));
  --aug-_LOriginY: calc(var(--aug-l-origin-y, calc(var(--aug-_TlJoinBY, 0px) / 2 + var(--aug-_BlJoinTY, 100%) / 2)) + var(--aug-l-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_LPath: , 0px calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  calc(var(--aug-_LWidth) - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  calc(var(--aug-_LWidth)) var(--aug-_LOriginY),
                  calc(var(--aug-_LWidth) - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2),
                  0px calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2);

  --aug-_LPathInset1: , var(--aug-_W) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W)),
                        calc(var(--aug-_LWidth) + var(--aug-_W) / 2 - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W)),
                        calc(var(--aug-_LWidth) + var(--aug-_W) * 1.5) var(--aug-_LOriginY),
                        calc(var(--aug-_LWidth) + var(--aug-_W) / 2 - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W)),
                        var(--aug-_W) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W));

  --aug-_LPathInset2: , var(--aug-_WD) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD)),
                        calc(var(--aug-_LWidth) + var(--aug-_WD) / 2 - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD)),
                        calc(var(--aug-_LWidth) + var(--aug-_WD) * 1.5) var(--aug-_LOriginY),
                        calc(var(--aug-_LWidth) + var(--aug-_WD) / 2 - var(--aug-_LNotch)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD)),
                        var(--aug-_WD) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD));
}

[augmented-ui~="tl-clip-y"],
[augmented-ui~="tl-clip-y"] > [augmented-ui~="tl-inherit"] {
  --aug-tl: 15px; /* size */
  --aug-_TlWidth: var(--aug-tl-width, var(--aug-tl));
  --aug-_TlNotch: var(--aug-_TlWidth); /* how much of height is the notch */
  --aug-_TlHeight: var(--aug-tl-height, calc(var(--aug-tl) + var(--aug-_TlNotch)));
  --aug-_TlJoinBX: 0px;
  --aug-_TlJoinBY: var(--aug-_TlHeight);
  --aug-_TlJoinRX: var(--aug-_TlWidth);
  --aug-_TlJoinRY: 0px;
  --aug-_TlPath: var(--aug-_TlJoinBX) var(--aug-_TlJoinBY),
            var(--aug-_TlWidth) calc(var(--aug-_TlHeight) - var(--aug-_TlNotch)),
            var(--aug-_TlJoinRX) var(--aug-_TlJoinRY);

  --aug-_TlInset1JoinBX: var(--aug-_W);
  --aug-_TlInset1JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_W) / 2);
  --aug-_TlInset1JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_W));
  --aug-_TlInset1JoinRY: var(--aug-_W);
  --aug-_TlPathInset1: var(--aug-_TlInset1JoinBX) var(--aug-_TlInset1JoinBY),
                 calc(var(--aug-_W) + var(--aug-_TlWidth)) calc(var(--aug-_TlHeight) + var(--aug-_W) / 2 - var(--aug-_TlNotch)),
                 var(--aug-_TlInset1JoinRX) var(--aug-_TlInset1JoinRY);

  --aug-_TlInset2JoinBX: var(--aug-_WD);
  --aug-_TlInset2JoinBY: calc(var(--aug-_TlHeight) + var(--aug-_WD) / 2);
  --aug-_TlInset2JoinRX: calc(var(--aug-_TlWidth) + var(--aug-_WD));
  --aug-_TlInset2JoinRY: var(--aug-_WD);
  --aug-_TlPathInset2: var(--aug-_TlInset2JoinBX) var(--aug-_TlInset2JoinBY),
                 calc(var(--aug-_WD) + var(--aug-_TlWidth)) calc(var(--aug-_TlHeight) + var(--aug-_WD) / 2 - var(--aug-_TlNotch)),
                 var(--aug-_TlInset2JoinRX) var(--aug-_TlInset2JoinRY);
}
[augmented-ui~="tr-clip-y"],
[augmented-ui~="tr-clip-y"] > [augmented-ui~="tr-inherit"] {
  --aug-tr: 15px; /* size */
  --aug-_TrWidth: var(--aug-tr-width, var(--aug-tr));
  --aug-_TrNotch: var(--aug-_TrWidth); /* how much of height is the notch */
  --aug-_TrHeight: var(--aug-tr-height, calc(var(--aug-tr) + var(--aug-_TrNotch)));
  --aug-_TrJoinLX: calc(100% - var(--aug-_TrWidth));
  --aug-_TrJoinLY: 0px;
  --aug-_TrJoinBX: 100%;
  --aug-_TrJoinBY: var(--aug-_TrHeight);
  --aug-_TrPath: var(--aug-_TrJoinLX) var(--aug-_TrJoinLY),
            calc(100% - var(--aug-_TrWidth)) calc(var(--aug-_TrHeight) - var(--aug-_TrNotch)),
            var(--aug-_TrJoinBX) var(--aug-_TrJoinBY);

  --aug-_TrInset1JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_W)));
  --aug-_TrInset1JoinLY: var(--aug-_W);
  --aug-_TrInset1JoinBX: calc(100% - var(--aug-_W));
  --aug-_TrInset1JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_W) / 2);
  --aug-_TrPathInset1: var(--aug-_TrInset1JoinLX) var(--aug-_TrInset1JoinLY),
                calc(100% - var(--aug-_W) - var(--aug-_TrWidth)) calc(var(--aug-_TrHeight) + var(--aug-_W) / 2 - var(--aug-_TrNotch)),
                var(--aug-_TrInset1JoinBX) var(--aug-_TrInset1JoinBY);

  --aug-_TrInset2JoinLX: calc(100% - (var(--aug-_TrWidth) + var(--aug-_WD)));
  --aug-_TrInset2JoinLY: var(--aug-_WD);
  --aug-_TrInset2JoinBX: calc(100% - var(--aug-_WD));
  --aug-_TrInset2JoinBY: calc(var(--aug-_TrHeight) + var(--aug-_WD) / 2);
  --aug-_TrPathInset2: var(--aug-_TrInset2JoinLX) var(--aug-_TrInset2JoinLY),
                    calc(100% - var(--aug-_WD) - var(--aug-_TrWidth)) calc(var(--aug-_TrHeight) + var(--aug-_WD) / 2 - var(--aug-_TrNotch)),
                    var(--aug-_TrInset2JoinBX) var(--aug-_TrInset2JoinBY);
}
[augmented-ui~="br-clip-y"],
[augmented-ui~="br-clip-y"] > [augmented-ui~="br-inherit"] {
  --aug-br: 15px; /* size */
  --aug-_BrWidth: var(--aug-br-width, var(--aug-br));
  --aug-_BrNotch: var(--aug-_BrWidth); /* how much of height is the notch */
  --aug-_BrHeight: var(--aug-br-height, calc(var(--aug-br) + var(--aug-_BrNotch)));
  --aug-_BrJoinTX: 100%;
  --aug-_BrJoinTY: calc(100% - var(--aug-_BrHeight));
  --aug-_BrJoinLX: calc(100% - var(--aug-_BrWidth));
  --aug-_BrJoinLY: 100%;
  --aug-_BrPath: var(--aug-_BrJoinTX) var(--aug-_BrJoinTY),
            calc(100% - var(--aug-_BrWidth)) calc(100% - var(--aug-_BrHeight) + var(--aug-_BrNotch)),
            var(--aug-_BrJoinLX) var(--aug-_BrJoinLY);

  --aug-_BrInset1JoinTX: calc(100% - var(--aug-_W));
  --aug-_BrInset1JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_W) / 2));
  --aug-_BrInset1JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_W)));
  --aug-_BrInset1JoinLY: calc(100% - var(--aug-_W));
  --aug-_BrPathInset1: var(--aug-_BrInset1JoinTX) var(--aug-_BrInset1JoinTY),
                 calc(100% - var(--aug-_W) - var(--aug-_BrWidth)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_W) / 2) + var(--aug-_BrNotch)),
                 var(--aug-_BrInset1JoinLX) var(--aug-_BrInset1JoinLY);

  --aug-_BrInset2JoinTX: calc(100% - var(--aug-_WD));
  --aug-_BrInset2JoinTY: calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD) / 2));
  --aug-_BrInset2JoinLX: calc(100% - (var(--aug-_BrWidth) + var(--aug-_WD)));
  --aug-_BrInset2JoinLY: calc(100% - var(--aug-_WD));
  --aug-_BrPathInset2: var(--aug-_BrInset2JoinTX) var(--aug-_BrInset2JoinTY),
                     calc(100% - var(--aug-_WD) - var(--aug-_BrWidth)) calc(100% - (var(--aug-_BrHeight) + var(--aug-_WD) / 2) + var(--aug-_BrNotch)),
                     var(--aug-_BrInset2JoinLX) var(--aug-_BrInset2JoinLY);
}
[augmented-ui~="bl-clip-y"],
[augmented-ui~="bl-clip-y"] > [augmented-ui~="bl-inherit"] {
  --aug-bl: 15px; /* size */
  --aug-_BlWidth: var(--aug-bl-width, var(--aug-bl));
  --aug-_BlNotch: var(--aug-_BlWidth); /* how much of height is the notch */
  --aug-_BlHeight: var(--aug-bl-height, calc(var(--aug-bl) + var(--aug-_BlNotch)));
  --aug-_BlJoinRX: var(--aug-_BlWidth);
  --aug-_BlJoinRY: 100%;
  --aug-_BlJoinTX: 0px;
  --aug-_BlJoinTY: calc(100% - var(--aug-_BlHeight));
  --aug-_BlPath: var(--aug-_BlJoinRX) var(--aug-_BlJoinRY),
            var(--aug-_BlWidth) calc(100% - var(--aug-_BlHeight) + var(--aug-_BlNotch)),
            var(--aug-_BlJoinTX) var(--aug-_BlJoinTY);

  --aug-_BlInset1JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_W));
  --aug-_BlInset1JoinRY: calc(100% - var(--aug-_W));
  --aug-_BlInset1JoinTX: var(--aug-_W);
  --aug-_BlInset1JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_W) / 2));
  --aug-_BlPathInset1: var(--aug-_BlInset1JoinRX) var(--aug-_BlInset1JoinRY),
                 calc(var(--aug-_BlWidth) + var(--aug-_W)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_W) / 2) + var(--aug-_BlNotch)),
                 var(--aug-_BlInset1JoinTX) var(--aug-_BlInset1JoinTY);

  --aug-_BlInset2JoinRX: calc(var(--aug-_BlWidth) + var(--aug-_WD));
  --aug-_BlInset2JoinRY: calc(100% - var(--aug-_WD));
  --aug-_BlInset2JoinTX: var(--aug-_WD);
  --aug-_BlInset2JoinTY: calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD) / 2));
  --aug-_BlPathInset2: var(--aug-_BlInset2JoinRX) var(--aug-_BlInset2JoinRY),
                     calc(var(--aug-_BlWidth) + var(--aug-_WD)) calc(100% - (var(--aug-_BlHeight) + var(--aug-_WD) / 2) + var(--aug-_BlNotch)),
                     var(--aug-_BlInset2JoinTX) var(--aug-_BlInset2JoinTY);
}

[augmented-ui~="t-clip-y"],
[augmented-ui~="t-clip-y"] > [augmented-ui~="t-inherit"] {
  --aug-t: 15px; /* size */
  --aug-_TWidth: var(--aug-t-width, var(--aug-t) * 2);
  --aug-_TNotch: calc(var(--aug-_TWidth) / 2); /* how much of height is the notch */
  --aug-_THeight: var(--aug-t-height, calc(var(--aug-t) + var(--aug-_TNotch)));
  --aug-_TOriginX: calc(var(--aug-t-origin-x, calc(var(--aug-_TlJoinRX, 0px) / 2 + var(--aug-_TrJoinLX, 100%) / 2)) + var(--aug-t-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_TPath: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) 0px,
                  calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2) calc(var(--aug-_THeight) - var(--aug-_TNotch)),
                  var(--aug-_TOriginX) var(--aug-_THeight),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) calc(var(--aug-_THeight) - var(--aug-_TNotch)),
                  calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2) 0px;

  --aug-_TPathInset1: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W)) var(--aug-_W),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_W)) calc(var(--aug-_THeight) + var(--aug-_W) / 2 - var(--aug-_TNotch)),
                        var(--aug-_TOriginX) calc(var(--aug-_THeight) + var(--aug-_W) * 1.5),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W)) calc(var(--aug-_THeight) + var(--aug-_W) / 2 - var(--aug-_TNotch)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_W)) var(--aug-_W);

  --aug-_TPathInset2: , calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD)) var(--aug-_WD),
                        calc(var(--aug-_TOriginX) - var(--aug-_TWidth) / 2 - var(--aug-_WD)) calc(var(--aug-_THeight) + var(--aug-_WD) / 2 - var(--aug-_TNotch)),
                        var(--aug-_TOriginX) calc(var(--aug-_THeight) + var(--aug-_WD) * 1.5),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD)) calc(var(--aug-_THeight) + var(--aug-_WD) / 2 - var(--aug-_TNotch)),
                        calc(var(--aug-_TOriginX) + var(--aug-_TWidth) / 2 + var(--aug-_WD)) var(--aug-_WD);
}
[augmented-ui~="r-clip-y"],
[augmented-ui~="r-clip-y"] > [augmented-ui~="r-inherit"] {
  --aug-r: 15px; /* size */
  --aug-_RWidth: var(--aug-r-width, var(--aug-r));
  --aug-_RNotch: var(--aug-_RWidth); /* how much of half the height is the notch */
  --aug-_RHeight: var(--aug-r-height, calc(var(--aug-r) * 2 + var(--aug-_RNotch) * 2));
  --aug-_ROriginY: calc(var(--aug-r-origin-y, calc(var(--aug-_TrJoinBY, 0px) / 2 + var(--aug-_BrJoinTY, 100%) / 2)) + var(--aug-r-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_RPath: , 100% calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2),
                  calc(100% - var(--aug-_RWidth)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 + var(--aug-_RNotch)),
                  calc(100% - var(--aug-_RWidth)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 - var(--aug-_RNotch)),
                  100% calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2);

  --aug-_RPathInset1: , calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W) / 2),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_W) / 2 + var(--aug-_RNotch)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_W))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W) / 2 - var(--aug-_RNotch)),
                        calc(100% - var(--aug-_W)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_W) / 2);

  --aug-_RPathInset2: , calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD) / 2),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD))) calc(var(--aug-_ROriginY) - var(--aug-_RHeight) / 2 - var(--aug-_WD) / 2 + var(--aug-_RNotch)),
                        calc(100% - (var(--aug-_RWidth) + var(--aug-_WD))) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD) / 2 - var(--aug-_RNotch)),
                        calc(100% - var(--aug-_WD)) calc(var(--aug-_ROriginY) + var(--aug-_RHeight) / 2 + var(--aug-_WD) / 2);
}
[augmented-ui~="b-clip-y"],
[augmented-ui~="b-clip-y"] > [augmented-ui~="b-inherit"] {
  --aug-b: 15px; /* size */
  --aug-_BWidth: var(--aug-b-width, var(--aug-b) * 2);
  --aug-_BNotch: calc(var(--aug-_BWidth) / 2); /* how much of height is the notch */
  --aug-_BHeight: var(--aug-b-height, calc(var(--aug-b) + var(--aug-_BNotch)));
  --aug-_BOriginX: calc(var(--aug-b-origin-x, calc(var(--aug-_BlJoinRX, 0px) / 2 + var(--aug-_BrJoinLX, 100%) / 2)) + var(--aug-b-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_BPath: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) 100%,
                  calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2) calc(100% - var(--aug-_BHeight) + var(--aug-_BNotch)),
                  var(--aug-_BOriginX) calc(100% - var(--aug-_BHeight)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) calc(100% - var(--aug-_BHeight) + var(--aug-_BNotch)),
                  calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2) 100%;

  --aug-_BPathInset1: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W)) calc(100% - var(--aug-_W)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_W)) calc(100% - (var(--aug-_BHeight) + var(--aug-_W) / 2 - var(--aug-_BNotch))),
                        var(--aug-_BOriginX) calc(100% - (var(--aug-_BHeight) + var(--aug-_W) * 1.5)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W)) calc(100% - (var(--aug-_BHeight) + var(--aug-_W) / 2 - var(--aug-_BNotch))),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_W)) calc(100% - var(--aug-_W));

  --aug-_BPathInset2: , calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD)) calc(100% - var(--aug-_WD)),
                        calc(var(--aug-_BOriginX) + var(--aug-_BWidth) / 2 + var(--aug-_WD)) calc(100% - (var(--aug-_BHeight) + var(--aug-_WD) / 2 - var(--aug-_BNotch))),
                        var(--aug-_BOriginX) calc(100% - (var(--aug-_BHeight) + var(--aug-_WD) * 1.5)),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD)) calc(100% - (var(--aug-_BHeight) + var(--aug-_WD) / 2 - var(--aug-_BNotch))),
                        calc(var(--aug-_BOriginX) - var(--aug-_BWidth) / 2 - var(--aug-_WD)) calc(100% - var(--aug-_WD));
}
[augmented-ui~="l-clip-y"],
[augmented-ui~="l-clip-y"] > [augmented-ui~="l-inherit"] {
  --aug-l: 15px; /* size */
  --aug-_LWidth: var(--aug-l-width, var(--aug-l));
  --aug-_LNotch: var(--aug-_LWidth); /* how much of half the height is the notch */
  --aug-_LHeight: var(--aug-l-height, calc(var(--aug-l) * 2 + var(--aug-_LNotch) * 2));
  --aug-_LOriginY: calc(var(--aug-l-origin-y, calc(var(--aug-_TlJoinBY, 0px) / 2 + var(--aug-_BlJoinTY, 100%) / 2)) + var(--aug-l-offset, 0px));
  /* edge augs start with their comma path joiner - corners don't */
  --aug-_LPath: , 0px calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2),
                  var(--aug-_LWidth) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 - var(--aug-_LNotch)),
                  var(--aug-_LWidth) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 + var(--aug-_LNotch)),
                  0px calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2);

  --aug-_LPathInset1: , var(--aug-_W) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W) / 2),
                        calc(var(--aug-_LWidth) + var(--aug-_W)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_W) / 2 - var(--aug-_LNotch)),
                        calc(var(--aug-_LWidth) + var(--aug-_W)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W) / 2 + var(--aug-_LNotch)),
                        var(--aug-_W) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_W) / 2);

  --aug-_LPathInset2: , var(--aug-_WD) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD) / 2),
                        calc(var(--aug-_LWidth) + var(--aug-_WD)) calc(var(--aug-_LOriginY) + var(--aug-_LHeight) / 2 + var(--aug-_WD) / 2 - var(--aug-_LNotch)),
                        calc(var(--aug-_LWidth) + var(--aug-_WD)) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD) / 2 + var(--aug-_LNotch)),
                        var(--aug-_WD) calc(var(--aug-_LOriginY) - var(--aug-_LHeight) / 2 - var(--aug-_WD) / 2);
}

[augmented-ui~="tl-border-el-clean"],
[augmented-ui~="tl-border-clean"]::after {
  /* if --aug-_W <= --aug-tl */
  /* if border width is less than top-left effect size, don't apply an effect on the inner part of the tl border effect */
  --aug-_TlPathInset1: var(--aug-_W) var(--aug-_W);
}
[augmented-ui~="tl-inset-el-clean"],
[augmented-ui~="tl-inset-clean"]::before,
[augmented-ui~="tl-border-el-clean"],
[augmented-ui~="tl-border-clean"]::after {
  /* if --aug-_WD <= --aug-tl OR --aug-_W <= --aug-tl */
  /* if border width + inset distance is less than top-left effect size,
    OR if border width alone is less than top-left effect size,
    don't apply an effect on inset more tl either
  */
  --aug-_TlPathInset2: var(--aug-_WD) var(--aug-_WD);
}

[augmented-ui~="tr-border-el-clean"],
[augmented-ui~="tr-border-clean"]::after { --aug-_TrPathInset1: var(--aug-_100W) var(--aug-_W); }
[augmented-ui~="tr-inset-el-clean"],
[augmented-ui~="tr-inset-clean"]::before,
[augmented-ui~="tr-border-el-clean"],
[augmented-ui~="tr-border-clean"]::after { --aug-_TrPathInset2: var(--aug-_100WD) var(--aug-_WD); }

[augmented-ui~="br-border-el-clean"],
[augmented-ui~="br-border-clean"]::after { --aug-_BrPathInset1: var(--aug-_100W) var(--aug-_100W); }
[augmented-ui~="br-inset-el-clean"],
[augmented-ui~="br-inset-clean"]::before,
[augmented-ui~="br-border-el-clean"],
[augmented-ui~="br-border-clean"]::after { --aug-_BrPathInset2: var(--aug-_100WD) var(--aug-_100WD); }

[augmented-ui~="bl-border-el-clean"],
[augmented-ui~="bl-border-clean"]::after { --aug-_BlPathInset1: var(--aug-_W) var(--aug-_100W); }
[augmented-ui~="bl-inset-el-clean"],
[augmented-ui~="bl-inset-clean"]::before,
[augmented-ui~="bl-border-el-clean"],
[augmented-ui~="bl-border-clean"]::after { --aug-_BlPathInset2: var(--aug-_WD) var(--aug-_100WD); }

[augmented-ui~="exe"]::after {
  content: "";
  display: var(--aug-border-bg, none);
}
[augmented-ui~="border-el"],
[augmented-ui~="exe"]::after {
  opacity: var(--aug-border-opacity, 1);
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  pointer-events: none;
  clip-path: polygon(
    var(--aug-_TlPathInset1, var(--aug-_W) var(--aug-_W))
    var(--aug-_TPathInset1, ),
    var(--aug-_TrPathInset1, var(--aug-_100W) var(--aug-_W))
    var(--aug-_RPathInset1, ),
    var(--aug-_BrPathInset1, var(--aug-_100W) var(--aug-_100W))
    var(--aug-_BPathInset1, ),
    var(--aug-_BlPathInset1, var(--aug-_W) var(--aug-_100W))
    var(--aug-_LPathInset1, ),
    var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    0px 100%, 100% 100%, 100% 0px, 0px 0px,
    0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
    var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
  );
}
/* This renders a background in an element (or pseudo element) on top of the content. If it can't be clipped, it must not happen. Fallbacks add a css border to it. */
@supports (--foo: , 0 0) and ((clip-path: polygon(0 0, 100% 0, 50% 50%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))) {
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    background: var(--aug-border-bg, none);
  }
}
[augmented-ui~="exe"]::before {
  content: "";
  display: var(--aug-inset-bg, none);
}
[augmented-ui~="inset-el"],
[augmented-ui~="exe"]::before {
  background: var(--aug-inset-bg, none);
  opacity: var(--aug-inset-opacity, 1);
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  clip-path: polygon(
    var(--aug-_TlPathInset2, var(--aug-_WD) var(--aug-_WD))
    var(--aug-_TPathInset2, ),
    var(--aug-_TrPathInset2, var(--aug-_100WD) var(--aug-_WD))
    var(--aug-_RPathInset2, ),
    var(--aug-_BrPathInset2, var(--aug-_100WD) var(--aug-_100WD))
    var(--aug-_BPathInset2, ),
    var(--aug-_BlPathInset2, var(--aug-_WD) var(--aug-_100WD))
    var(--aug-_LPathInset2, )
  );
  z-index: -1;
}

/* exe-init does not clip itself and can not spawn pseudo elements for the border/inset. It allows delegated border-el and inset-el children. */
/* exe-lite clips itself but can not spawn pseudo elements for the border/inset. It allows delegated border-el and inset-el children. */
[augmented-ui~="exe-init"],
[augmented-ui~="exe"],
[augmented-ui~="exe-lite"],
[augmented-ui~="before"]::before,
[augmented-ui~="after"]::after {
  position: relative;
  --aug-border: initial;
  --aug-border-bg: initial;
  --aug-border-opacity: initial;
  --aug-inset: initial;
  --aug-inset-bg: initial;
  --aug-inset-opacity: initial;
  --aug-border-radius-fallback: initial;
  --aug-border-radius-fallback-inset: initial;
  --aug-border-fallback-color: initial;
  --aug-_W: var(--aug-border, 0px);
  --aug-_D: var(--aug-inset, 0px);
  --aug-_WD: calc(var(--aug-_W) + var(--aug-_D));
  --aug-_100W: calc(100% - var(--aug-_W));
  --aug-_100WD: calc(100% - var(--aug-_WD));
}
[augmented-ui~="exe"],
[augmented-ui~="exe-lite"],
[augmented-ui~="before"]::before,
[augmented-ui~="after"]::after {
  clip-path: polygon(
    var(--aug-_TlPath, 0px 0px)
    var(--aug-_TPath, ),
    var(--aug-_TrPath, 100% 0px)
    var(--aug-_RPath, ),
    var(--aug-_BrPath, 100% 100%)
    var(--aug-_BPath, ),
    var(--aug-_BlPath, 0px 100%)
    var(--aug-_LPath, )
  );
}

/* Full featured webkit support: Chrome 51-54, Safari 9.1+, iOS Safari >= 11, Opera 38-41, Opera mobile 46+, UC Browser 12+, Samsung Internet 5+ */
@supports (--foo: , 0 0) and (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%)) and (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) {
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    -webkit-clip-path: polygon(
      var(--aug-_TlPathInset1, var(--aug-_W) var(--aug-_W))
      var(--aug-_TPathInset1, ),
      var(--aug-_TrPathInset1, var(--aug-_100W) var(--aug-_W))
      var(--aug-_RPathInset1, ),
      var(--aug-_BrPathInset1, var(--aug-_100W) var(--aug-_100W))
      var(--aug-_BPathInset1, ),
      var(--aug-_BlPathInset1, var(--aug-_W) var(--aug-_100W))
      var(--aug-_LPathInset1, ),
      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      0px 100%, 100% 100%, 100% 0px, 0px 0px,
      0px var(--aug-_TlInset1JoinBY, var(--aug-_W)),
      var(--aug-_TlInset1JoinBX, var(--aug-_W)) var(--aug-_TlInset1JoinBY, var(--aug-_W))
    );
  }
  [augmented-ui~="inset-el"],
  [augmented-ui~="exe"]::before {
    -webkit-clip-path: polygon(
      var(--aug-_TlPathInset2, var(--aug-_WD) var(--aug-_WD))
      var(--aug-_TPathInset2, ),
      var(--aug-_TrPathInset2, var(--aug-_100WD) var(--aug-_WD))
      var(--aug-_RPathInset2, ),
      var(--aug-_BrPathInset2, var(--aug-_100WD) var(--aug-_100WD))
      var(--aug-_BPathInset2, ),
      var(--aug-_BlPathInset2, var(--aug-_WD) var(--aug-_100WD))
      var(--aug-_LPathInset2, )
    );
  }
  [augmented-ui~="exe"],
  [augmented-ui~="exe-lite"],
  [augmented-ui~="before"]::before,
  [augmented-ui~="after"]::after {
    -webkit-clip-path: polygon(
      var(--aug-_TlPath, 0px 0px)
      var(--aug-_TPath, ),
      var(--aug-_TrPath, 100% 0px)
      var(--aug-_RPath, ),
      var(--aug-_BrPath, 100% 100%)
      var(--aug-_BPath, ),
      var(--aug-_BlPath, 0px 100%)
      var(--aug-_LPath, )
    );
  }
}

/* Eliptical border radius fallback. (browsers without (-webkit-)clip-path or browsers that don't supprot css vars with leading or trailing commas) */
/* pre chromium Edge and safari iOS < 11 */
@supports (not ((--foo: , 0 0) and ((clip-path: polygon(0 0, 100% 0, 50% 50%)) or (-webkit-clip-path: polygon(0 0, 100% 0, 50% 50%))))) {
  /* vvv almost all of the code here avoids this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17410857/ for 5 layers of inheritance vvv */

  /* Step 1: set up any pseduo-level vars on main elements first (setup for any el that uses them to avoid repeat, not just pseudo parents) */
  [augmented-ui~="exe"],
  [augmented-ui~="before"],
  [augmented-ui~="after"],
  [augmented-ui~="border-el"] {
    --aug-_AutoBorderRadiusFallback: var(--aug-_TlWidth, var(--aug-tl, 0px))
                                     var(--aug-_TrWidth, var(--aug-tr, 0px))
                                     var(--aug-_BrWidth, var(--aug-br, 0px))
                                     var(--aug-_BlWidth, var(--aug-bl, 0px)) /
                                     var(--aug-_TlHeight, var(--aug-tl, 0px))
                                     var(--aug-_TrHeight, var(--aug-tr, 0px))
                                     var(--aug-_BrHeight, var(--aug-br, 0px))
                                     var(--aug-_BlHeight, var(--aug-bl, 0px));
    /* used on main el (or main el pseudo delegates) and main exe::after / border-el */
    --aug-_PrimaryBorderRadiusFallbackResolved: var(--aug-border-radius-fallback, var(--aug-_AutoBorderRadiusFallback));
  }
  [augmented-ui~="exe"],
  [augmented-ui~="inset-el"] {
    --aug-_InsetAutoBorderRadiusFallback: calc(var(--aug-_TlWidth, var(--aug-tl, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_TrWidth, var(--aug-tr, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BrWidth, var(--aug-br, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BlWidth, var(--aug-bl, 0px)) - var(--aug-_WD, 0px)) /
                                          calc(var(--aug-_TlHeight, var(--aug-tl, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_TrHeight, var(--aug-tr, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BrHeight, var(--aug-br, 0px)) - var(--aug-_WD, 0px))
                                          calc(var(--aug-_BlHeight, var(--aug-bl, 0px)) - var(--aug-_WD, 0px));
    /* used on exe::before and inset-el */
    --aug-_InsetBorderRadiusFallbackResolved: var(--aug-border-radius-fallback-inset, var(--aug-_InsetAutoBorderRadiusFallback));
    --aug-_InsetDistanceResolved: var(--aug-_WD, 0px);
    --aug-_InsetBGResolved: var(--aug-inset-bg, none);
    --aug-_InsetOpacityResolved: var(--aug-inset-opacity, 1);
  }
  [augmented-ui~="exe"],
  [augmented-ui~="border-el"] {
    --aug-_BorderNoColorResolved: var(--aug-_W, 0px) solid;
    --aug-_BorderColorResolved: var(--aug-border-fallback-color, var(--aug-border-bg, transparent));
    --aug-_BorderOpacityResolved: var(--aug-border-opacity, 1);
  }

  /* Step 2: apply CSS as normal to their respective parts, using only resolved form of vars as needed */
  [augmented-ui~="inset-el"],
  [augmented-ui~="exe"]::before {
    left: var(--aug-_InsetDistanceResolved);
    top: var(--aug-_InsetDistanceResolved);
    right: var(--aug-_InsetDistanceResolved);
    bottom: var(--aug-_InsetDistanceResolved);
    border-radius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    background: var(--aug-_InsetBGResolved);
    opacity: var(--aug-_InsetOpacityResolved);
    /* clip-path causes a new stacking context and hides overflow, this reproduces that */
    transform: translateZ(0px);
    overflow: hidden;
  }
  [augmented-ui~="border-el"],
  [augmented-ui~="exe"]::after {
    overflow: hidden;
    transform: translateZ(0px);
    background: transparent!important;
    border-radius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    border: var(--aug-_BorderNoColorResolved) var(--aug-_BorderColorResolved);
    opacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui~="exe"],
  [augmented-ui~="before"]::before,
  [augmented-ui~="after"]::after {
    border-radius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    /* clip-path causes a new stacking context and hides overflow, this reproduces that */
    transform: translateZ(0px);
    overflow: hidden;
  }

  /* Step 3 part 1: For any pseudo children using resoved vars,
     create duplicate vars, with depth dependent names, of each resolved var on their parent, for the first depth,
     then use the depth copy on pseudo children of that depth to override the broken one
  */
  [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH1_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH1_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH1_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH1_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH1_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH1_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH1_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH1_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui] [augmented-ui~="before"],
  [augmented-ui] [augmented-ui~="after"] {
    --aug-_CDPETH1_PrimaryBorderRadiusDelegated: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
  }
  [augmented-ui] [augmented-ui~="exe"]::after {
    border:        var(--aug-_CDEPTH1_BorderNoColor) var(--aug-_CDEPTH1_BorderColor);
    border-radius: var(--aug-_CDPETH1_PrimaryBorderRadius);
    opacity:       var(--aug-_CDEPTH1_BorderOpacity);
    display:       var(--aug-_CDEPTH1_BorderColor);
  }
  [augmented-ui] [augmented-ui~="exe"]::before {
    left:          var(--aug-_CDEPTH1_InsetDistance);
    top:           var(--aug-_CDEPTH1_InsetDistance);
    right:         var(--aug-_CDEPTH1_InsetDistance);
    bottom:        var(--aug-_CDEPTH1_InsetDistance);
    border-radius: var(--aug-_CDEPTH1_InsetBorderRadius);
    background:    var(--aug-_CDEPTH1_InsetBG);
    opacity:       var(--aug-_CDEPTH1_InsetOpacity);
    display:       var(--aug-_CDEPTH1_InsetBG);
  }
  [augmented-ui] [augmented-ui~="before"]::before,
  [augmented-ui] [augmented-ui~="after"]::after {
    border-radius: var(--aug-_CDPETH1_PrimaryBorderRadiusDelegated);
  }

  /* Step 3 part 2: copy step 3 part 1, increase the number on the depth vars, prepend the depth selector, repeat until supported dpeth reached */
  /* Note: preprosessor could make this painless */

  /* 2 deep */
  [augmented-ui] [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH2_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH2_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH2_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH2_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH2_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH2_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH2_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH2_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui] [augmented-ui] [augmented-ui~="before"],
  [augmented-ui] [augmented-ui] [augmented-ui~="after"] {
    --aug-_CDPETH2_PrimaryBorderRadiusDelegated: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
  }
  [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::after {
    border:        var(--aug-_CDEPTH2_BorderNoColor) var(--aug-_CDEPTH2_BorderColor);
    border-radius: var(--aug-_CDPETH2_PrimaryBorderRadius);
    opacity:       var(--aug-_CDEPTH2_BorderOpacity);
    display:       var(--aug-_CDEPTH2_BorderColor);
  }
  [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::before {
    left:          var(--aug-_CDEPTH2_InsetDistance);
    top:           var(--aug-_CDEPTH2_InsetDistance);
    right:         var(--aug-_CDEPTH2_InsetDistance);
    bottom:        var(--aug-_CDEPTH2_InsetDistance);
    border-radius: var(--aug-_CDEPTH2_InsetBorderRadius);
    background:    var(--aug-_CDEPTH2_InsetBG);
    opacity:       var(--aug-_CDEPTH2_InsetOpacity);
    display:       var(--aug-_CDEPTH2_InsetBG);
  }
  [augmented-ui] [augmented-ui] [augmented-ui~="before"]::before,
  [augmented-ui] [augmented-ui] [augmented-ui~="after"]::after {
    border-radius: var(--aug-_CDPETH2_PrimaryBorderRadiusDelegated);
  }
  /* 3 deep */
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH3_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH3_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH3_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH3_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH3_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH3_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH3_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH3_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"],
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"] {
    --aug-_CDPETH3_PrimaryBorderRadiusDelegated: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::after {
    border:        var(--aug-_CDEPTH3_BorderNoColor) var(--aug-_CDEPTH3_BorderColor);
    border-radius: var(--aug-_CDPETH3_PrimaryBorderRadius);
    opacity:       var(--aug-_CDEPTH3_BorderOpacity);
    display:       var(--aug-_CDEPTH3_BorderColor);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::before {
    left:          var(--aug-_CDEPTH3_InsetDistance);
    top:           var(--aug-_CDEPTH3_InsetDistance);
    right:         var(--aug-_CDEPTH3_InsetDistance);
    bottom:        var(--aug-_CDEPTH3_InsetDistance);
    border-radius: var(--aug-_CDEPTH3_InsetBorderRadius);
    background:    var(--aug-_CDEPTH3_InsetBG);
    opacity:       var(--aug-_CDEPTH3_InsetOpacity);
    display:       var(--aug-_CDEPTH3_InsetBG);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"]::before,
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"]::after {
    border-radius: var(--aug-_CDPETH3_PrimaryBorderRadiusDelegated);
  }
  /* 4 deep */
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH4_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH4_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH4_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH4_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH4_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH4_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH4_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH4_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"],
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"] {
    --aug-_CDPETH4_PrimaryBorderRadiusDelegated: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::after {
    border:        var(--aug-_CDEPTH4_BorderNoColor) var(--aug-_CDEPTH4_BorderColor);
    border-radius: var(--aug-_CDPETH4_PrimaryBorderRadius);
    opacity:       var(--aug-_CDEPTH4_BorderOpacity);
    display:       var(--aug-_CDEPTH4_BorderColor);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::before {
    left:          var(--aug-_CDEPTH4_InsetDistance);
    top:           var(--aug-_CDEPTH4_InsetDistance);
    right:         var(--aug-_CDEPTH4_InsetDistance);
    bottom:        var(--aug-_CDEPTH4_InsetDistance);
    border-radius: var(--aug-_CDEPTH4_InsetBorderRadius);
    background:    var(--aug-_CDEPTH4_InsetBG);
    opacity:       var(--aug-_CDEPTH4_InsetOpacity);
    display:       var(--aug-_CDEPTH4_InsetBG);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"]::before,
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"]::after {
    border-radius: var(--aug-_CDPETH4_PrimaryBorderRadiusDelegated);
  }
  /* 5 deep */
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"] {
    --aug-_CDEPTH5_BorderNoColor: var(--aug-_BorderNoColorResolved);
    --aug-_CDEPTH5_BorderColor: var(--aug-_BorderColorResolved);
    --aug-_CDEPTH5_InsetDistance: var(--aug-_InsetDistanceResolved);
    --aug-_CDPETH5_PrimaryBorderRadius: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH5_InsetBorderRadius: var(--aug-_InsetBorderRadiusFallbackResolved, 0px);
    --aug-_CDEPTH5_InsetBG: var(--aug-_InsetBGResolved);
    --aug-_CDEPTH5_InsetOpacity: var(--aug-_InsetOpacityResolved);
    --aug-_CDEPTH5_BorderOpacity: var(--aug-_BorderOpacityResolved);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"],
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"] {
    --aug-_CDPETH5_PrimaryBorderRadiusDelegated: var(--aug-_PrimaryBorderRadiusFallbackResolved, 0px);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::after {
    border:        var(--aug-_CDEPTH5_BorderNoColor) var(--aug-_CDEPTH5_BorderColor);
    border-radius: var(--aug-_CDPETH5_PrimaryBorderRadius);
    opacity:       var(--aug-_CDEPTH5_BorderOpacity);
    display:       var(--aug-_CDEPTH5_BorderColor);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="exe"]::before {
    left:          var(--aug-_CDEPTH5_InsetDistance);
    top:           var(--aug-_CDEPTH5_InsetDistance);
    right:         var(--aug-_CDEPTH5_InsetDistance);
    bottom:        var(--aug-_CDEPTH5_InsetDistance);
    border-radius: var(--aug-_CDEPTH5_InsetBorderRadius);
    background:    var(--aug-_CDEPTH5_InsetBG);
    opacity:       var(--aug-_CDEPTH5_InsetOpacity);
    display:       var(--aug-_CDEPTH5_InsetBG);
  }
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="before"]::before,
  [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui] [augmented-ui~="after"]::after {
    border-radius: var(--aug-_CDPETH5_PrimaryBorderRadiusDelegated);
  }
  /* ^^^ almost all of the code here avoids this: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17410857/ for 5 layers of inheritance ^^^ */
}



/* Augmented UI CSS FILE */
html {
  font-size: 16px;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 1rem;
  margin: 0px;
  padding: 0px;
}


:root {
  --media-prefers-light: initial;
  --c0-l: var(--media-prefers-light) #257ae4;
  --c0-l-a: var(--media-prefers-light) rgba(37, 122, 228, 0.25);
  --c0-l-i: var(--media-prefers-light) var(--gold);
  --c1-l: var(--media-prefers-light) #fffffd;
  --c1-l-i: var(--media-prefers-light) #1e1e1c;
  --c2-l: var(--media-prefers-light) #fdfdfa;
  --c3-l: var(--media-prefers-light) #e4e4e4;
  --c4-l: var(--media-prefers-light) #fcfcfa;
  --c0: var(--c0-l, var(--gold));
  --c0-a: var(--c0-l-a, rgba(255, 215, 0, 0.25));
  --c0-i: var(--c0-l-i, #257ae4);
  --c1: var(--c1-l, #1e1e1c);
  --c1-i: var(--c1-l-i, #fffffd);
  --c2: var(--c2-l, #1d1d1b);
  --c3: var(--c3-l, #2c2c2a);
  --c4: var(--c4-l, #312d18);
  --hbl: var(--media-prefers-light) #4039a5;
  --hot-blue: var(--hbl, #b1ffff);
  --hot-red: #ff604d;
  --hot-green: #b9ffb1;
  --gold: #ffd700;
  --gold88: rgba(255, 215, 0, 0.53);
  --goldDark: #eda725;
  --hovercolor: #ff0000;
  --hovercolorbg: rgba(255, 0, 0, 0.25);
  --inputfocus: rgba(255, 220, 23, 0.644);
  --termcolor: #0f0900;
}
body {
  background-image: url('https://steamuserimages-a.akamaihd.net/ugc/96102627876415855/B7C044FB1BEA7E9431E380FB807FFE36E43B66CE/');

  overflow-x: hidden;
}
body.anti-aug-transitions *,
body.anti-aug-transitions *:before,
body.anti-aug-transitions *:after {
  transition: clip-path 4s ease;
}
body.anti-aug [augmented-ui~="exe"],
body.anti-aug #bgFPS[augmented-ui~="exe"],
body.anti-aug [augmented-ui~="exe"]:before,
body.anti-aug [augmented-ui~="exe"]:after,
body.anti-aug .aug-exe,
body.anti-aug #bgFPS.aug-exe,
body.anti-aug .aug-exe:before,
body.anti-aug .aug-exe:after {
  --aug-inset: 0px;
  --aug-tl: 0px;
  --aug-tl-height: 0px;
  --aug-tl-width: 0px;
  --aug-tr: 0px;
  --aug-tr-height: 0px;
  --aug-tr-width: 0px;
  --aug-br: 0px;
  --aug-br-height: 0px;
  --aug-br-width: 0px;
  --aug-bl: 0px;
  --aug-bl-height: 0px;
  --aug-bl-width: 0px;
  --aug-t: 0px;
  --aug-t-height: 0px;
  --aug-t-width: 0px;
  --aug-r: 0px;
  --aug-r-height: 0px;
  --aug-r-width: 0px;
  --aug-b: 0px;
  --aug-b-height: 0px;
  --aug-b-width: 0px;
  --aug-l: 0px;
  --aug-l-height: 0px;
  --aug-l-width: 0px;
}
body.anti-aug .presentation-el {
  --aug-border-bg: var(--gold88);
  --aug-inset-bg: var(--gold);
}
body.background-haulted .header-presentation {
  --aug-inset-bg: linear-gradient(to bottom, #ff000033, rgba(0, 0, 0, 0.8), #ff000033), rgba(0, 0, 0, 0.8);
}

.header-presentation {
  width: 108vw;
  position: fixed;
  min-height: 90vh;
padding-bottom: -200px;  background: #00000000;
  --aug-tl: 50px;
  --aug-tl-width: 170px;
  --aug-tr-width: 170px;
--aug-tr: 30px;
  --aug-bl: 20px;
  --aug-bl-width: 40%;
  --aug-br: 20px;
  --aug-br-width: 40%;
  --aug-border: 1px;
  --aug-border-bg: var(--gold);
  --aug-inset: 0px;
  margin-left: -5px;
  --aug-inset-bg: rgba(0, 0, 0, 0.8);
  
}


/* .header-presentation houses all the --pjAnim vars */
.presentation-el {
  padding: 70px;
  position: absolute;
  top: 170px;
  left: 50%;
  transform: translate(-50%, -50%) translateZ(-250px);
  text-align: center;
  height:               var( --pjAnim-height,         350px   );
  width:                var( --pjAnim-width,          550px   );
  --aug-inset:          var( --pjAnim-inset,          7px     );
  --aug-inset-bg:       var( --pjAnim-inset-bg,       #ffd700 );
  --aug-border:         var( --pjAnim-border,         5px     );
  --aug-border-bg:      var( --pjAnim-border-bg,      #ffd700 );
  --aug-border-opacity: var( --pjAnim-border-opacity, 0.5     );
  --aug-l-offset:       var( --pjAnim-l-offset,       0px     );
  --aug-b-offset:       var( --pjAnim-b-offset,       0px     );
  --aug-tl:             var( --pjAnim-tl,             10px    );
  --aug-tl-height:      var( --pjAnim-tl-height,      0px     );
  --aug-tl-width:       var( --pjAnim-tl-width,       0px     );
  --aug-tr:             var( --pjAnim-tr,             20px    );
  --aug-tr-height:      var( --pjAnim-tr-height,      20px    );
  --aug-tr-width:       var( --pjAnim-tr-width,       160px   );
  --aug-br:             var( --pjAnim-br,             20px    );
  --aug-br-height:      var( --pjAnim-br-height,      0px     );
  --aug-br-width:       var( --pjAnim-br-width,       0px     );
  --aug-bl:             var( --pjAnim-bl,             30px    );
  --aug-bl-height:      var( --pjAnim-bl-height,      30px    );
  --aug-bl-width:       var( --pjAnim-bl-width,       30px    );
  --aug-t:              var( --pjAnim-t,              0px     );
  --aug-t-height:       var( --pjAnim-t-height,       0px     );
  --aug-t-width:        var( --pjAnim-t-width,        0px     );
  --aug-r:              var( --pjAnim-r,              0px     );
  --aug-r-height:       var( --pjAnim-r-height,       0px     );
  --aug-r-width:        var( --pjAnim-r-width,        0px     );
  --aug-b:              var( --pjAnim-b,              15px    );
  --aug-b-height:       var( --pjAnim-b-height,       15px    );
  --aug-b-width:        var( --pjAnim-b-width,        120px   );
  --aug-l:              var( --pjAnim-l,              20px    );
  --aug-l-height:       var( --pjAnim-l-height,       210px   );
  --aug-l-width:        var( --pjAnim-l-width,        20px    );
}
@media (max-width: 768px) {
  .presentation-el {
    max-width: 100%;
    /* has negative translate z so it's smaller */
  }
}
.color-button{
  background: none;
  border: 0;
  width: 30%;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: #ffd700;
  --aug-border-fallback-color: #ffd700;
  --aug-tr: 10px;
  --aug-bl: 10px;
  --aug-br: 0px;
  --aug-tl: 00px;
}
.color-button:first-child {
  color: gold;
}
.color-button:first-child:hover {
  color: #ffd700;
  --aug-border-bg: #ffd700;
}
.color-button:nth-child(2) {
  color: #ff0000;
  --aug-border-bg: #ff0000bb;
}
.color-button:nth-child(2):hover {
  color: #ad0000;
  --aug-border-bg: #b10101bb;
}
.color-button:last-child{
  color: #00d9ff;
  --aug-border-bg: #00d9ffb0;
  
}
.color-button:last-child:hover{
  color: #008ea7;
  --aug-border-bg: #009fbb98;
}
.button {
  padding: 0;
border: none;
background: none;
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  --aug-tr: 20px;
  --aug-bl: 20px;
  --aug-br: 0px;
  --aug-tl: 00px;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 5px;
  margin-bottom: 20px;
  }
  .button:nth-child(2) {

    padding-top: -20px;
    line-height: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
  }
  .button:hover i { 
    color: var(--hovercolor);
  }
  .button:nth-child(2):hover {
    padding: 10px;
    --aug-inset: 3px;
    --aug-inset-bg: var(--hovercolorbg);
    --aug-border: 2px;
    --aug-border-bg: var(--hovercolor);
    --aug-border-fallback-color: #ffd700;
    --aug-tr: 20px;
    --aug-bl: 20px;
    --aug-br: 0px;
    --aug-tl: 00px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    padding-top: -20px;
    line-height: 24px;
   padding-top: 10px;
   padding-bottom: 10px;
  }

  .close {
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  --aug-tr: 15px;
  --aug-bl: 15px;
  --aug-br: 15px;
  --aug-tl: 15px;
  height: 100%;
  width: 70%;
  padding: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 5px;
  margin-bottom: 20px;
  padding-left: 21px;
  margin-left: 15px;
  }
  .close:hover {
    --aug-inset: 3px;
    --aug-inset-bg: rgba(0, 255, 255, 0.534);
    --aug-border: 2px;
    --aug-border-bg:cyan;
    --aug-border-fallback-color: #ffd700;
    --aug-tr: 15px;
    --aug-bl: 15px;
    --aug-br: 15px;
    --aug-tl: 15px;
    height: 100%;
    width: 70%;
    padding: 10px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.75rem;
    line-height: 5px;
    margin-bottom: 20px;
    padding-left: 21px;
    margin-left: 15px;
    }

    .button:hover {
      padding: 10px;
      --aug-inset: 3px;
      --aug-inset-bg: var(--hovercolorbg);
      --aug-border: 2px;
      --aug-border-bg: var(--hovercolor);
      --aug-border-fallback-color: #ffd700;
      --aug-tr: 20px;
      --aug-bl: 20px;
      --aug-br: 0px;
      --aug-tl: 00px;
      padding: 20px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.75rem;
      line-height: 5px;
    }
  
    .button b {
      color: white;
      font-size: 1rem;
    }
.mydiv {
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  --aug-tr: 6px;
  --aug-bl: 6px;
  --aug-br: 25px;
  --aug-tl: 25px;
  height: 100%;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 15px;
  }


    .mydiv:hover {
      padding: 10px;
      --aug-inset: 3px;
      --aug-inset-bg: rgba(255, 0, 0, 0.25);
      --aug-border: 2px;
      --aug-border-bg: red;
      --aug-border-fallback-color: #ffd700;
      --aug-tr: 6px;
      --aug-bl: 6px;
      --aug-br: 25px;
      --aug-tl: 25px;
      padding: 20px;
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.75rem;
      line-height: 15px;
    }
  
    .mydiv b {
      color: white;
      font-size: 1rem;
    }

   #test {
      --aug-br1: 100px;
      
    
      --aug-border-bg: black;
      --aug-inlay-bg: black;
    --aug-b-extend1: 50%;

    --aug-border-all: 7px;
   

    --aug-inlay-all: 4px;
    --aug-inlay-bg: radial-gradient(var(--gold), black);
    --aug-inlay-opacity: 0.5;
}

.container .mydiv {
  margin-left: 20px;
  width: 2000px;
}
.dna-demo-mixins li {
  --aug-l: 0.5rem;
  --aug-r: 0.5rem;
  --aug-tl: 0.5rem;
  --aug-tr: 0.5rem;
  --aug-bl: 0.5rem;
  --aug-br: 0.5rem;
}
.presentation-text {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  width: 420px;
}
@keyframes retro-future-tv-lines {
  0% {
    -webkit-mask-position: center 0rem;
    mask-position: center 0rem;
  }
  100% {
    -webkit-mask-position: center -1.5rem;
    mask-position: center -1.5rem;
  }
}
.divserviços h1 {
  font-size: 50px;
  margin-top: -30px;
  padding-top: 0px;
  text-align:center;
  color:  var(--gold);
  top: 2.5rem;
  --aug-border: initial;
  --aug-border-all: 1px;
  --aug-border-bg: var(--hot-red);
  box-shadow: inset 0px 0px 1rem var(--gold88);
  -webkit-mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  -webkit-mask-position: center 0rem;
  mask-position: center 0rem;
  animation: retro-future-tv-lines linear infinite;
  animation-duration: 500ms;
  --playstate: var(--media-prefers-reduced-motion) paused;
  animation-play-state: var(--playstate, running);
}
.divserviços{ 
 margin-left: 150px;
 margin-top: 20px;
  width: 75vw;
  padding-left: 20px;
  --aug-bl: 25px;
  --aug-tr: 20px;
  --aug-br: 10px;
  --aug-tl: 90px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.35);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;

  font-size: 32px;
  color: rgb(255, 174, 0);
  filter: drop-shadow(0px 0px 0.125rem black);
  -webkit-mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
}
.icon {
  
  width: 130px;
  height: 130px;
  margin: 0 auto;
  line-height: 130px;
  border-width: 0px;
  font-size: 36px;
  color: var(--c0);

}
.icon .fa {
  size: 20px;
margin-left: 30px;
}.round-border{
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
}

.container
{

 
  padding-left: 2rem;
  padding-right: 2rem;
  color: var(--c1-i);



}
.content {
  padding-top: 100px;
  width: 80vw;
height: 100vh;

}
.contact {
  margin-left: 250px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-areas: "one two";
  grid-gap: 2rem;
  perspective: 400px;
  padding-right: -400px;

  }
.container #four .div1 {
  transform-origin: 50% 100%;
  transform: rotateY(8deg);
padding-top: 15px;
padding-left: 110px;
width: 300px;
  height: 500px;
  --aug-bl: 25px;
  --aug-tr: 20px;
  --aug-br: 50px;
  --aug-tl: 90px;
  --aug-inset: 3px;
--aug-inset-bg: rgba(0,0,0,0.35);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: #ffd700;
  
  grid-area: one;
  font-size: 32px;
  color:var(--gold);
  filter: drop-shadow(0px 0px 0.125rem rgb(0,0,0));
  -webkit-mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  margin-bottom: 30px;
}
.contacticon {
  color: inherit;
}
.contacticon:hover {
  color: var(--hovercolor);
}

#four form #send {
  border: 0;
  background: none;
  --aug-tl: 40px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0,0,0,0.35);
    --aug-border: 2px;
    --aug-border-bg: var(--gold88);
    --aug-border-fallback-color: var(--gold);
    --aug-br: var(--load-br, 25px);
  width: 70%;
  height: 35px;
  margin-bottom: -20px;
  margin-top: 45px;
  color: var(--gold);
  display: inline-block;
  font-size: 1.20vw;
  font-weight: bold;
  padding-top: 2px;
  margin-left: -80px;
}
#four form #send:hover {
  --aug-inset: 3px;
  --aug-inset-bg: var(--hovercolorbg);
  --aug-border: 2px;
  --aug-border-bg: var(--hovercolor);
  color: black;

}

.container #four .div2 {
  transform-origin: 50% 100%;
  transform: rotateY(-15deg);
 margin-left: 200px;
  width: 400px;
  grid-area: two;
  margin-top: -30px;
  
  --aug-bl: 25px;
  --aug-tr: 20px;
  --aug-br: 10px;
  --aug-tl: 90px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.35);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: var(--gold);

  font-size: 12px;
  color: var(--gold);
  filter: drop-shadow(0px 0px 0.125rem rgb(0,0,0));
  -webkit-mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  box-shadow: inset 0px 0px 1rem var(--gold88);
  -webkit-mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  -webkit-mask-position: center 0rem;
  mask-position: center 0rem;
  animation: retro-future-tv-lines linear infinite;
  animation-duration: 500ms;
  --playstate: var(--media-prefers-reduced-motion) paused;
  animation-play-state: var(--playstate, running);
}
.container #four .div1 h2 {
  font-size: 30px;
  margin-bottom: -30px;
  margin-left: -94px;
  color: var(--gold);
}
.container #four .div1 h1 {
  font-size: 21px;
  margin-left: -20px;

}


.container #four  form {
margin-top: 20px;
  margin-left: 120px;
  margin-bottom: -60px;
}

.inputgroup #nome  {
margin-left: 30px;
width: 40%;
padding-left: 20px;
}

.namefield {
  --aug-tr: 0px;
  --aug-tl: 40px;
  --aug-br: 0px;
  --aug-bl: 0px;
  top: 40px;
  padding-left: 30px;
  margin-left: -10px;
  height: 40px;
  width: 90%;
}
.input {

  --aug-inset: 3px;
  --aug-inset-bg: rgba(0,0,0,0.35);
    --aug-border: 2px;
    --aug-border-bg: var(--gold88);
    --aug-border-fallback-color: #ffd700;
    --aug-br: var(--load-br, 25px);
padding-left: 10px;
  width: 50%;
  height: 35px;
  margin-bottom: -30px;
  margin-top: 15px;
  color: var(--gold);
  display: inline-block;
  vertical-align: top;
  font-size: 1.20vw;
  font-weight: bold;
  padding-top: 8px;
  left: -100px;
}
.messagespan {
padding-left: -200px;;
}
.div1 .sectiontitle h1  {
  text-align: center;
padding-top: 25px;
  padding-left: 85px;
  color: var(--gold);
}
.div1 .sectiontitle{
  margin-left: -135px;
  height: 15%;
  margin-top: -30px;
  --aug-tl: 90px;
  --aug-border: initial;
  --aug-border-all: 1px;
  --aug-border-bg: var(--hot-red);
  box-shadow: inset 0px 0px 1rem var(--gold88);
  -webkit-mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  mask-image: repeating-linear-gradient(black, black 0.5rem, rgba(0, 0, 0, 0.5) 0.75rem);
  -webkit-mask-position: center 0rem;
  mask-position: center 0rem;
  animation: retro-future-tv-lines linear infinite;
  animation-duration: 500ms;
  --playstate: var(--media-prefers-reduced-motion) paused;
  animation-play-state: var(--playstate, running);

}
.inputfield {
  --aug-tr: 0px;
  --aug-tl: 40px;
  --aug-br: 0px;
  --aug-bl: 0px;
  top: 30px;
  padding-left: 30px;
  margin-left: -10px;
  height: 30px;
  width: 90%;
}
.inputfield:focus, .messageinput:focus {
 border: 0.45px solid black;

background: var(--inputfocus);

}
.messageinput {
  --aug-tr: 0px;
  --aug-tl: 40px;
  --aug-br: 0px;
  --aug-bl: 0px;
  top: 30px;
  padding-left: 30px;
  margin-left: -10px;
  height: 60px;
  width: 90%;
}
.container #four .div1 p {
  font-size: 14px;
margin-left: -94px;
color: var(--goldDark)
}
#two, #three, #four {
  display: none;
}




.title h1{ 
  margin-top: 1rem;
  color: var(--gold);
  filter: drop-shadow(0px 0px 0.125rem var(--gold));
  -webkit-mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  font-size: 60px;
}


.title {
left: 500px;
  position: fixed;
  top: 10;
  right: 0;
}

.definitions-container {
  position: fixed;
  bottom: 45px;
  right: 25px;
  height: 180px;
  width: 300px;
  transform-origin: 100% 50%;
  transform: rotateY(-20deg);
  perspective: 600px;
}
.definitions-container1 {
position: absolute;
  bottom: 45px;
  right: 1200px;
  height: 330px;
  width: 120px;
 
  perspective: 200px;

}
@media (max-width: 768px) {
  .definitions-container {
    width: 90%;
    max-width: 300px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
.perspectivecontainer {
perspective: 500px;
}
.definitions-container1 .def1 .fa {
  margin-top: -60px;
  margin-bottom: -60px;
}
.definitions-container1 .def1 .fa-envelope {
  margin-top: -600px;
  margin-bottom: -60px;
}

.definitions-container1 .def1 .fa-bars {
  margin-top: 2px;
  margin-bottom: 2px;
}
.definitions-container1 .def1 {
  --aug-bl: 25px;
  --aug-tr: 30px;
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.85);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: var(--gold);
  
  height: 82%;
  width: 100%;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0rem;
  line-height: 15px;
  transform-origin: 50% 100%;
  transform: rotateY(15deg);
}
#one .inicio {
  --aug-tr: 6px;
  --aug-bl: 6px;
  --aug-br: 25px;
  --aug-tl: 25px;

}

.definitions-container .def {
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.658);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: var(--gold);
  --aug-tr: 6px;
  --aug-bl: 6px;
  --aug-br: 25px;
  --aug-tl: 25px;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.75rem;
  line-height: 15px;
  transform-origin: 50% 100%;
  transform: rotateY(-15deg);
  
 
}
.definitions-container .def b,
.definitions-container .def em {
  font-size: 1rem;
}
.definitions-container .def span {
  font-size: 0.75rem;
}
.definitions-container1 .def1 b,
.definitions-container1 .def1 em {
  font-size: 1rem;
}
.definitions-container1 .def1 span {
  font-size: 0.75rem;
}
.bg-controls-container {
  position: absolute;
  bottom: 45px;
  left: 25px;
  height: 50px;
  width: 300px;
  transform-origin: 0 50%;
  transform: rotateY(5deg);
}
@media (max-width: 768px) {
  .bg-controls-container {
    display: none;
  }
}

.bg-controls {
  padding: 10px;
  --aug-inset: 3px;
  --aug-inset-bg: rgba(0, 0, 0, 0.25);
  --aug-border: 2px;
  --aug-border-bg: var(--gold88);
  --aug-border-fallback-color: var(--gold);
  --aug-tl: 6px;
  --aug-br: 6px;
  --aug-bl: 25px;
  --aug-tr: 25px;
  height: 100%;
  width: 100%;
}





.fps-label {
  background: #000000;
  color: #ffffff;
  height: 20px;
  width: 35px;
  position: absolute;
  left: 42px;
  bottom: 14px;
  --aug-bl: 7px;
  --aug-tr: 7px;
  font-size: 11px;
  text-align: center;
  --aug-border: 1px;
  --aug-border-bg: #ffffff88;
  padding-top: 5px;
  letter-spacing: 1px;
  line-height: 11px;
}

.header-top {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  display: grid;
  grid-template-columns: 170px 1fr;
}

h1.top-left {
  padding: 5px;
  padding-left: 15px;
  background: var(--gold);
  color: #312307;
  width: 170px;
  height: 30px;
  --aug-br: 30px;
}

.header-fallback-info {
  position: absolute;
  left: 170px;
  top: 0px;
  padding: 7px;
  padding-left: 15px;
  color: var(--gold88);
  height: 30px;
  opacity: 0.5;
  font-size: 0.75rem;
  display: none;
}
@supports (not (clip-path: polygon(0 0, 100% 0, 50% 50%))) {
  .header-fallback-info {
    display: block;
  }
}



/*  test */
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500);
@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css);




.slider {
  height: 100%;
  
padding-bottom: 330px;
margin-left: 0px;
  position: relative;
  overflow: hidden;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__nav {
  width: 12px;
  height: 12px;

  margin: 2rem 12px;
  border-radius: 50%;
  z-index: 10;
  outline: 6px solid var(--gold);
  outline-offset: -6px;
  box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(255, 13, 13, 0);
  cursor: pointer;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.slider__nav:checked {
  -webkit-animation: check 0.4s linear forwards;
          animation: check 0.4s linear forwards;
}
/* .slider__nav:checked:nth-of-type(1) ~ .slider__inner {
  left: -17%;
}
.slider__nav:checked:nth-of-type(2) ~ .slider__inner {
  left: -149%;
}
.slider__nav:checked:nth-of-type(3) ~ .slider__inner {
  left: -283%;
} */

.servtwo, .servthree {
  display :none;
}
.servone, .servtwo, .servthree {
  text-shadow: -2px 0 blue;

  height: 100%;
  width: 24.2%;
  padding: 2rem 0rem 2rem 2rem ;
  text-align: center;

        }
.slider__inner {
  position: absolute;
  
  top: 0;
  left: 0;
  width: 400%;
  height: 100%;
  -webkit-transition: all 0.4s ease;
  transition:all 0.4s;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row nowrap;
      -ms-flex-flow: row nowrap;
          flex-flow: row nowrap;
        
}

.glitch--animate:after, .glitch--animate:before {
	color: white;
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: black;
	overflow: hidden;

}
.glitch--animate{
    text-shadow: -2px 0 blue;
    color: var(--gold) !important;
  animation-name: glitch-anim-flash;
	animation-duration: 2s;
}
.glitch--animate:after {
  text-shadow: -2px 0 var(--gold) !important;
background: var(--gold) !important;

	animation-name: glitch-anim-3;
	animation-duration: 0.2s;
	animation-timing-function: linear;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
.glitch--animate:before {
  text-shadow: -2px 0 red;
  
	animation-name: glitch-anim-2;
	animation-duration: 0.2s;
	animation-delay: 0s;
	animation-iteration-count: infinite;
}
 

@keyframes glitch-anim-1 {
	0%, 100% { 
		opacity: 1;
		transform: translate3d(40px,0,0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	20% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	30% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	40% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	50% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	55% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	60% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	65% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	70% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	85% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
		clip-path: polygon(0 60%, 100% 60%, 100% 65%, 0 65%);
	}
	95% {
		-webkit-clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
		clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
	}
}

@keyframes glitch-anim-2 {
	0%, 100% { 
		opacity: 1;
		transform: translate3d(calc(-1 * 400px),0,0);
		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	}
	10% {
		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
		clip-path: polygon(0 30%, 100% 3%, 100% 3%, 0 30%);
	}

	35% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	40% {
		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	}
	45% {
		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	}
	49% {
		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	}
	50% {
		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	}

	80% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
		clip-path: polygon(0 80%, 100% 80%, 100% 85%, 0 85%);
	}
	90% {
		-webkit-clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
		clip-path: polygon(0 55%, 100% 55%, 100% 65%, 0 65%);
	}
}

@keyframes glitch-anim-3 {
	0%, 100% { 
		opacity: 1;
		transform: translate3d(0, calc(-1 * 50px), 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	
	42% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	48% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	50% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
  }
	77% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}

	94% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
}

@keyframes glitch-anim-text {
	0%, 100% { 
		transform: translate3d(2px, -2px, 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	20% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	41% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	52% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	61% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	75% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	96% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
}

@keyframes glitch-anim-title {
	0%, 100% { 
		transform: translate3d(2px, -2px, 0);
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	20% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	41% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	52% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	61% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	75% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	80% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	96% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
}

/* Flash */
@keyframes glitch-anim-flash {
	0%, 5% { 
		opacity: 0.2; 
		transform: translate3d(40px, 50px, 0);
	}
	5.5%, 50% {
		opacity: 0.4;
		transform: translate3d(0, 0, 0);
  }
  55%, 80% {
    opacity: 0.2;
		transform: translate3d(40px, 50px, 0);
  }
  100% {
    opacity: 1;
		transform: translate3d(0, 0, 0);
  }
}
 /* 
  */
.slider__contents {
  height: 100%;
  padding: 2rem;
  text-align: center;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  -webkit-flex-flow: column nowrap;
      -ms-flex-flow: column nowrap;
          flex-flow: column nowrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.slider__contents .fa {
margin-top: 20px;
margin-bottom: 20px;


}
.servone .fa-desktop {
  margin-left: 8px;
  color: var(--gold88);

}
.servtwo .fa-paint-brush {
  margin-left: -2px;
  color: var(--gold88);
}
.servthree .fa-database {
  margin-left: -6px;
  color: var(--gold88);
}
.slider__image {
  font-size: 2.7rem;
      color: #2196F3;
}
.slidetitle {
  margin-top: 20px;
}
.firstcaption{
padding-left: 15px;
color: var(--gold);
} 

.slider__caption {
  color: var(--gold) !important;
  font-size: 30px;
  font-weight: 800;
  text-align: center;
  padding-right: 16px;
  margin-bottom: 5px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  text-transform: uppercase;
 
}
.secondcaption {margin-left: 14px
   !important;
   color: var(--gold) !important; }




.slider__txt {
  color: #999;
  margin-bottom: 3rem;
  max-width: 300px;
}

@-webkit-keyframes check {
  50% {
    outline-color: var(--hovercolor);
    box-shadow: 0 0 0 12px #333, 0 0 0 36px rgba(51, 51, 51, 0.2);
  }
  100% {
    outline-color: var(--hovercolor);
    box-shadow: 0 0 0 0 #333, 0 0 0 0 rgba(51, 51, 51, 0);
  }
}

@keyframes check {
  50% {
    outline-color: var(--hovercolor);
    box-shadow: 0 0 0 12px var(--hovercolorbg), 0 0 0 36px rgba(251, 51, 51, 0.2);
  }
  100% {
    outline-color: var(--hovercolor);
    box-shadow: 0 0 0 0 var(--hovercolorbg), 0 0 0 0 rgba(251, 51, 51, 0);
  }
}

.glitch:before {
  position: absolute;
  z-index: 999999;
  background: var(--gold88) !important;
  content: '';
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  animation: bg-move 2s linear infinite;
  background-size: 100% 8px;
  background-image: linear-gradient(0, blue 10%, transparent 10%, transparent 50%, blue 50%, blue 60%, transparent 60%, transparent);
}

 .glitch {
  transform: skewX(0deg) scaleY(1);
  animation: clock-bag 4s linear infinite;
 
}




@keyframes glitch-animation-1 {
	0% {
		clip: rect(41px, 350px, 28px, 30px);
	}

	5% {
		clip: rect(118px, 350px, 83px, 30px);
	}

	10% {
		clip: rect(14px, 350px, 19px, 30px);
	}

	15% {
		clip: rect(38px, 350px, 79px, 30px);
	}

	20% {
		clip: rect(70px, 350px, 21px, 30px);
	}

	25% {
		clip: rect(9px, 350px, 120px, 30px);
	}

	30% {
		clip: rect(20px, 350px, 31px, 30px);
	}

	35% {
		clip: rect(62px, 350px, 46px, 30px);
	}

	40% {
		clip: rect(8px, 350px, 2px, 30px);
	}

	45% {
		clip: rect(112px, 350px, 43px, 30px);
	}

	50% {
		clip: rect(119px, 350px, 72px, 30px);
	}

	55% {
		clip: rect(145px, 350px, 121px, 30px);
	}

	60% {
		clip: rect(54px, 350px, 107px, 30px);
	}

	65% {
		clip: rect(70px, 350px, 73px, 30px);
	}

	70% {
		clip: rect(148px, 350px, 45px, 30px);
	}

	75% {
		clip: rect(66px, 350px, 100px, 30px);
	}

	80% {
		clip: rect(66px, 350px, 62px, 30px);
	}

	85% {
		clip: rect(126px, 350px, 115px, 30px);
	}

	90% {
		clip: rect(122px, 350px, 46px, 30px);
	}

	95% {
		clip: rect(76px, 350px, 11px, 30px);
	}

	100% {
		clip: rect(55px, 350px, 126px, 30px);
	}
}

@keyframes glitch-animation-2 {
	0% {
		clip: rect(132px, 350px, 25px, 30px);
	}

	5% {
		clip: rect(113px, 350px, 54px, 30px);
	}

	10% {
		clip: rect(86px, 350px, 108px, 30px);
	}

	15% {
		clip: rect(35px, 350px, 54px, 30px);
	}

	20% {
		clip: rect(149px, 350px, 93px, 30px);
	}

	25% {
		clip: rect(60px, 350px, 141px, 30px);
	}

	30% {
		clip: rect(104px, 350px, 136px, 30px);
	}

	35% {
		clip: rect(14px, 350px, 51px, 30px);
	}

	40% {
		clip: rect(32px, 350px, 75px, 30px);
	}

	45% {
		clip: rect(103px, 350px, 130px, 30px);
	}

	50% {
		clip: rect(19px, 350px, 110px, 30px);
	}

	55% {
		clip: rect(120px, 350px, 72px, 30px);
	}

	60% {
		clip: rect(93px, 350px, 123px, 30px);
	}

	65% {
		clip: rect(41px, 350px, 90px, 30px);
	}

	70% {
		clip: rect(63px, 350px, 14px, 30px);
	}

	75% {
		clip: rect(19px, 350px, 142px, 30px);
	}

	80% {
		clip: rect(135px, 350px, 55px, 30px);
	}

	85% {
		clip: rect(71px, 350px, 137px, 30px);
	}

	90% {
		clip: rect(26px, 350px, 67px, 30px);
	}

	95% {
		clip: rect(12px, 350px, 128px, 30px);
	}

	100% {
		clip: rect(69px, 350px, 125px, 30px);
	}
}
@-moz-keyframes c1 {
  0% {
    clip: rect(61px, 9999px, 36px, 0);
  }
  5% {
    clip: rect(24px, 9999px, 98px, 0);
  }
  10% {
    clip: rect(84px, 9999px, 62px, 0);
  }
  15.000000000000002% {
    clip: rect(61px, 9999px, 77px, 0);
  }
  20% {
    clip: rect(16px, 9999px, 57px, 0);
  }
  25% {
    clip: rect(89px, 9999px, 71px, 0);
  }
  30.000000000000004% {
    clip: rect(91px, 9999px, 5px, 0);
  }
  35.00000000000001% {
    clip: rect(95px, 9999px, 93px, 0);
  }
  40% {
    clip: rect(14px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 96px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 20px, 0);
  }
  60.00000000000001% {
    clip: rect(87px, 9999px, 20px, 0);
  }
  65% {
    clip: rect(39px, 9999px, 80px, 0);
  }
  70.00000000000001% {
    clip: rect(66px, 9999px, 97px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(2px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 62px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 96px, 0);
  }
  95% {
    clip: rect(23px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 64px, 0);
  }
}
@-webkit-keyframes c1 {
  0% {
    clip: rect(61px, 9999px, 36px, 0);
  }
  5% {
    clip: rect(24px, 9999px, 98px, 0);
  }
  10% {
    clip: rect(84px, 9999px, 62px, 0);
  }
  15.000000000000002% {
    clip: rect(61px, 9999px, 77px, 0);
  }
  20% {
    clip: rect(16px, 9999px, 57px, 0);
  }
  25% {
    clip: rect(89px, 9999px, 71px, 0);
  }
  30.000000000000004% {
    clip: rect(91px, 9999px, 5px, 0);
  }
  35.00000000000001% {
    clip: rect(95px, 9999px, 93px, 0);
  }
  40% {
    clip: rect(14px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 96px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 20px, 0);
  }
  60.00000000000001% {
    clip: rect(87px, 9999px, 20px, 0);
  }
  65% {
    clip: rect(39px, 9999px, 80px, 0);
  }
  70.00000000000001% {
    clip: rect(66px, 9999px, 97px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(2px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 62px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 96px, 0);
  }
  95% {
    clip: rect(23px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 64px, 0);
  }
}
@-o-keyframes c1 {
  0% {
    clip: rect(61px, 9999px, 36px, 0);
  }
  5% {
    clip: rect(24px, 9999px, 98px, 0);
  }
  10% {
    clip: rect(84px, 9999px, 62px, 0);
  }
  15.000000000000002% {
    clip: rect(61px, 9999px, 77px, 0);
  }
  20% {
    clip: rect(16px, 9999px, 57px, 0);
  }
  25% {
    clip: rect(89px, 9999px, 71px, 0);
  }
  30.000000000000004% {
    clip: rect(91px, 9999px, 5px, 0);
  }
  35.00000000000001% {
    clip: rect(95px, 9999px, 93px, 0);
  }
  40% {
    clip: rect(14px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 96px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 20px, 0);
  }
  60.00000000000001% {
    clip: rect(87px, 9999px, 20px, 0);
  }
  65% {
    clip: rect(39px, 9999px, 80px, 0);
  }
  70.00000000000001% {
    clip: rect(66px, 9999px, 97px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(2px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 62px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 96px, 0);
  }
  95% {
    clip: rect(23px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 64px, 0);
  }
}
@keyframes c1 {
  0% {
    clip: rect(61px, 9999px, 36px, 0);
  }
  5% {
    clip: rect(24px, 9999px, 98px, 0);
  }
  10% {
    clip: rect(84px, 9999px, 62px, 0);
  }
  15.000000000000002% {
    clip: rect(61px, 9999px, 77px, 0);
  }
  20% {
    clip: rect(16px, 9999px, 57px, 0);
  }
  25% {
    clip: rect(89px, 9999px, 71px, 0);
  }
  30.000000000000004% {
    clip: rect(91px, 9999px, 5px, 0);
  }
  35.00000000000001% {
    clip: rect(95px, 9999px, 93px, 0);
  }
  40% {
    clip: rect(14px, 9999px, 11px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 96px, 0);
  }
  50% {
    clip: rect(61px, 9999px, 70px, 0);
  }
  55% {
    clip: rect(10px, 9999px, 20px, 0);
  }
  60.00000000000001% {
    clip: rect(87px, 9999px, 20px, 0);
  }
  65% {
    clip: rect(39px, 9999px, 80px, 0);
  }
  70.00000000000001% {
    clip: rect(66px, 9999px, 97px, 0);
  }
  75% {
    clip: rect(66px, 9999px, 61px, 0);
  }
  80% {
    clip: rect(2px, 9999px, 97px, 0);
  }
  85% {
    clip: rect(16px, 9999px, 62px, 0);
  }
  90% {
    clip: rect(52px, 9999px, 96px, 0);
  }
  95% {
    clip: rect(23px, 9999px, 3px, 0);
  }
  100% {
    clip: rect(53px, 9999px, 64px, 0);
  }
}
@-moz-keyframes c2 {
  0% {
    clip: rect(53px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(66px, 9999px, 44px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 94px, 0);
  }
  15.000000000000002% {
    clip: rect(49px, 9999px, 2px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 43px, 0);
  }
  30.000000000000004% {
    clip: rect(33px, 9999px, 41px, 0);
  }
  35.00000000000001% {
    clip: rect(56px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(71px, 9999px, 66px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(81px, 9999px, 2px, 0);
  }
  55% {
    clip: rect(75px, 9999px, 7px, 0);
  }
  60.00000000000001% {
    clip: rect(39px, 9999px, 100px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 96px, 0);
  }
  70.00000000000001% {
    clip: rect(98px, 9999px, 49px, 0);
  }
  75% {
    clip: rect(50px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(84px, 9999px, 26px, 0);
  }
  85% {
    clip: rect(67px, 9999px, 38px, 0);
  }
  90% {
    clip: rect(89px, 9999px, 82px, 0);
  }
  95% {
    clip: rect(83px, 9999px, 44px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 41px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@-webkit-keyframes c2 {
  0% {
    clip: rect(53px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(66px, 9999px, 44px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 94px, 0);
  }
  15.000000000000002% {
    clip: rect(49px, 9999px, 2px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 43px, 0);
  }
  30.000000000000004% {
    clip: rect(33px, 9999px, 41px, 0);
  }
  35.00000000000001% {
    clip: rect(56px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(71px, 9999px, 66px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(81px, 9999px, 2px, 0);
  }
  55% {
    clip: rect(75px, 9999px, 7px, 0);
  }
  60.00000000000001% {
    clip: rect(39px, 9999px, 100px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 96px, 0);
  }
  70.00000000000001% {
    clip: rect(98px, 9999px, 49px, 0);
  }
  75% {
    clip: rect(50px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(84px, 9999px, 26px, 0);
  }
  85% {
    clip: rect(67px, 9999px, 38px, 0);
  }
  90% {
    clip: rect(89px, 9999px, 82px, 0);
  }
  95% {
    clip: rect(83px, 9999px, 44px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 41px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@-o-keyframes c2 {
  0% {
    clip: rect(53px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(66px, 9999px, 44px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 94px, 0);
  }
  15.000000000000002% {
    clip: rect(49px, 9999px, 2px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 43px, 0);
  }
  30.000000000000004% {
    clip: rect(33px, 9999px, 41px, 0);
  }
  35.00000000000001% {
    clip: rect(56px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(71px, 9999px, 66px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(81px, 9999px, 2px, 0);
  }
  55% {
    clip: rect(75px, 9999px, 7px, 0);
  }
  60.00000000000001% {
    clip: rect(39px, 9999px, 100px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 96px, 0);
  }
  70.00000000000001% {
    clip: rect(98px, 9999px, 49px, 0);
  }
  75% {
    clip: rect(50px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(84px, 9999px, 26px, 0);
  }
  85% {
    clip: rect(67px, 9999px, 38px, 0);
  }
  90% {
    clip: rect(89px, 9999px, 82px, 0);
  }
  95% {
    clip: rect(83px, 9999px, 44px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 41px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@keyframes c2 {
  0% {
    clip: rect(53px, 9999px, 87px, 0);
  }
  5% {
    clip: rect(66px, 9999px, 44px, 0);
  }
  10% {
    clip: rect(59px, 9999px, 94px, 0);
  }
  15.000000000000002% {
    clip: rect(49px, 9999px, 2px, 0);
  }
  20% {
    clip: rect(99px, 9999px, 59px, 0);
  }
  25% {
    clip: rect(2px, 9999px, 43px, 0);
  }
  30.000000000000004% {
    clip: rect(33px, 9999px, 41px, 0);
  }
  35.00000000000001% {
    clip: rect(56px, 9999px, 17px, 0);
  }
  40% {
    clip: rect(71px, 9999px, 66px, 0);
  }
  45% {
    clip: rect(99px, 9999px, 100px, 0);
  }
  50% {
    clip: rect(81px, 9999px, 2px, 0);
  }
  55% {
    clip: rect(75px, 9999px, 7px, 0);
  }
  60.00000000000001% {
    clip: rect(39px, 9999px, 100px, 0);
  }
  65% {
    clip: rect(85px, 9999px, 96px, 0);
  }
  70.00000000000001% {
    clip: rect(98px, 9999px, 49px, 0);
  }
  75% {
    clip: rect(50px, 9999px, 79px, 0);
  }
  80% {
    clip: rect(84px, 9999px, 26px, 0);
  }
  85% {
    clip: rect(67px, 9999px, 38px, 0);
  }
  90% {
    clip: rect(89px, 9999px, 82px, 0);
  }
  95% {
    clip: rect(83px, 9999px, 44px, 0);
  }
  100% {
    clip: rect(55px, 9999px, 41px, 0);
  }
  23% {
    transform: scaleX(0.8);
  }
}
@-moz-keyframes clock-bag {
  0% {
    transform: translate(3px, 3px);
  }
  2% {
    transform: translate(5px, 1px);
  }
  4% {
    transform: translate(3px, 4px);
  }
  6% {
    transform: translate(1px, 2px);
  }
  8% {
    transform: translate(2px, 1px);
  }
  10% {
    transform: translate(4px, 2px);
  }
  12% {
    transform: translate(1px, 4px);
  }
  14.000000000000002% {
    transform: translate(1px, 2px);
  }
  16% {
    transform: translate(2px, 2px);
  }
  18% {
    transform: translate(5px, 2px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 4px);
  }
  26% {
    transform: translate(5px, 5px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 2px);
  }
  32% {
    transform: translate(5px, 5px);
  }
  34% {
    transform: translate(5px, 2px);
  }
  36% {
    transform: translate(2px, 4px);
  }
  38% {
    transform: translate(3px, 1px);
  }
  40% {
    transform: translate(3px, 3px);
  }
  42% {
    transform: translate(3px, 5px);
  }
  44% {
    transform: translate(5px, 1px);
  }
  46.00000000000001% {
    transform: translate(1px, 5px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(2px, 5px);
  }
  52% {
    transform: translate(5px, 4px);
  }
  54% {
    transform: translate(5px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 4px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(2px, 1px);
  }
  62% {
    transform: translate(2px, 4px);
  }
  64% {
    transform: translate(2px, 4px);
  }
  66% {
    transform: translate(2px, 1px);
  }
  68% {
    transform: translate(3px, 5px);
  }
  70.00000000000001% {
    transform: translate(1px, 3px);
  }
  72% {
    transform: translate(1px, 2px);
  }
  74% {
    transform: translate(4px, 2px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(3px, 5px);
  }
  82.00000000000001% {
    transform: translate(5px, 2px);
  }
  84% {
    transform: translate(5px, 5px);
  }
  86% {
    transform: translate(1px, 2px);
  }
  88% {
    transform: translate(5px, 5px);
  }
  90% {
    transform: translate(2px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 1px);
  }
  94% {
    transform: translate(4px, 1px);
  }
  96% {
    transform: translate(4px, 2px);
  }
  98% {
    transform: translate(5px, 4px);
  }
  100% {
    transform: translate(3px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes clock-bag {
  0% {
    transform: translate(3px, 3px);
  }
  2% {
    transform: translate(5px, 1px);
  }
  4% {
    transform: translate(3px, 4px);
  }
  6% {
    transform: translate(1px, 2px);
  }
  8% {
    transform: translate(2px, 1px);
  }
  10% {
    transform: translate(4px, 2px);
  }
  12% {
    transform: translate(1px, 4px);
  }
  14.000000000000002% {
    transform: translate(1px, 2px);
  }
  16% {
    transform: translate(2px, 2px);
  }
  18% {
    transform: translate(5px, 2px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 4px);
  }
  26% {
    transform: translate(5px, 5px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 2px);
  }
  32% {
    transform: translate(5px, 5px);
  }
  34% {
    transform: translate(5px, 2px);
  }
  36% {
    transform: translate(2px, 4px);
  }
  38% {
    transform: translate(3px, 1px);
  }
  40% {
    transform: translate(3px, 3px);
  }
  42% {
    transform: translate(3px, 5px);
  }
  44% {
    transform: translate(5px, 1px);
  }
  46.00000000000001% {
    transform: translate(1px, 5px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(2px, 5px);
  }
  52% {
    transform: translate(5px, 4px);
  }
  54% {
    transform: translate(5px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 4px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(2px, 1px);
  }
  62% {
    transform: translate(2px, 4px);
  }
  64% {
    transform: translate(2px, 4px);
  }
  66% {
    transform: translate(2px, 1px);
  }
  68% {
    transform: translate(3px, 5px);
  }
  70.00000000000001% {
    transform: translate(1px, 3px);
  }
  72% {
    transform: translate(1px, 2px);
  }
  74% {
    transform: translate(4px, 2px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(3px, 5px);
  }
  82.00000000000001% {
    transform: translate(5px, 2px);
  }
  84% {
    transform: translate(5px, 5px);
  }
  86% {
    transform: translate(1px, 2px);
  }
  88% {
    transform: translate(5px, 5px);
  }
  90% {
    transform: translate(2px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 1px);
  }
  94% {
    transform: translate(4px, 1px);
  }
  96% {
    transform: translate(4px, 2px);
  }
  98% {
    transform: translate(5px, 4px);
  }
  100% {
    transform: translate(3px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-o-keyframes clock-bag {
  0% {
    transform: translate(3px, 3px);
  }
  2% {
    transform: translate(5px, 1px);
  }
  4% {
    transform: translate(3px, 4px);
  }
  6% {
    transform: translate(1px, 2px);
  }
  8% {
    transform: translate(2px, 1px);
  }
  10% {
    transform: translate(4px, 2px);
  }
  12% {
    transform: translate(1px, 4px);
  }
  14.000000000000002% {
    transform: translate(1px, 2px);
  }
  16% {
    transform: translate(2px, 2px);
  }
  18% {
    transform: translate(5px, 2px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 4px);
  }
  26% {
    transform: translate(5px, 5px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 2px);
  }
  32% {
    transform: translate(5px, 5px);
  }
  34% {
    transform: translate(5px, 2px);
  }
  36% {
    transform: translate(2px, 4px);
  }
  38% {
    transform: translate(3px, 1px);
  }
  40% {
    transform: translate(3px, 3px);
  }
  42% {
    transform: translate(3px, 5px);
  }
  44% {
    transform: translate(5px, 1px);
  }
  46.00000000000001% {
    transform: translate(1px, 5px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(2px, 5px);
  }
  52% {
    transform: translate(5px, 4px);
  }
  54% {
    transform: translate(5px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 4px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(2px, 1px);
  }
  62% {
    transform: translate(2px, 4px);
  }
  64% {
    transform: translate(2px, 4px);
  }
  66% {
    transform: translate(2px, 1px);
  }
  68% {
    transform: translate(3px, 5px);
  }
  70.00000000000001% {
    transform: translate(1px, 3px);
  }
  72% {
    transform: translate(1px, 2px);
  }
  74% {
    transform: translate(4px, 2px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(3px, 5px);
  }
  82.00000000000001% {
    transform: translate(5px, 2px);
  }
  84% {
    transform: translate(5px, 5px);
  }
  86% {
    transform: translate(1px, 2px);
  }
  88% {
    transform: translate(5px, 5px);
  }
  90% {
    transform: translate(2px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 1px);
  }
  94% {
    transform: translate(4px, 1px);
  }
  96% {
    transform: translate(4px, 2px);
  }
  98% {
    transform: translate(5px, 4px);
  }
  100% {
    transform: translate(3px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes clock-bag {
  0% {
    transform: translate(3px, 3px);
  }
  2% {
    transform: translate(5px, 1px);
  }
  4% {
    transform: translate(3px, 4px);
  }
  6% {
    transform: translate(1px, 2px);
  }
  8% {
    transform: translate(2px, 1px);
  }
  10% {
    transform: translate(4px, 2px);
  }
  12% {
    transform: translate(1px, 4px);
  }
  14.000000000000002% {
    transform: translate(1px, 2px);
  }
  16% {
    transform: translate(2px, 2px);
  }
  18% {
    transform: translate(5px, 2px);
  }
  20% {
    transform: translate(1px, 1px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(3px, 4px);
  }
  26% {
    transform: translate(5px, 5px);
  }
  28.000000000000004% {
    transform: translate(4px, 3px);
  }
  30% {
    transform: translate(4px, 2px);
  }
  32% {
    transform: translate(5px, 5px);
  }
  34% {
    transform: translate(5px, 2px);
  }
  36% {
    transform: translate(2px, 4px);
  }
  38% {
    transform: translate(3px, 1px);
  }
  40% {
    transform: translate(3px, 3px);
  }
  42% {
    transform: translate(3px, 5px);
  }
  44% {
    transform: translate(5px, 1px);
  }
  46.00000000000001% {
    transform: translate(1px, 5px);
  }
  48% {
    transform: translate(1px, 3px);
  }
  50% {
    transform: translate(2px, 5px);
  }
  52% {
    transform: translate(5px, 4px);
  }
  54% {
    transform: translate(5px, 2px);
  }
  56.00000000000001% {
    transform: translate(1px, 4px);
  }
  58% {
    transform: translate(5px, 1px);
  }
  60% {
    transform: translate(2px, 1px);
  }
  62% {
    transform: translate(2px, 4px);
  }
  64% {
    transform: translate(2px, 4px);
  }
  66% {
    transform: translate(2px, 1px);
  }
  68% {
    transform: translate(3px, 5px);
  }
  70.00000000000001% {
    transform: translate(1px, 3px);
  }
  72% {
    transform: translate(1px, 2px);
  }
  74% {
    transform: translate(4px, 2px);
  }
  76% {
    transform: translate(5px, 4px);
  }
  78% {
    transform: translate(5px, 5px);
  }
  80% {
    transform: translate(3px, 5px);
  }
  82.00000000000001% {
    transform: translate(5px, 2px);
  }
  84% {
    transform: translate(5px, 5px);
  }
  86% {
    transform: translate(1px, 2px);
  }
  88% {
    transform: translate(5px, 5px);
  }
  90% {
    transform: translate(2px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 1px);
  }
  94% {
    transform: translate(4px, 1px);
  }
  96% {
    transform: translate(4px, 2px);
  }
  98% {
    transform: translate(5px, 4px);
  }
  100% {
    transform: translate(3px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-moz-keyframes tr-bag {
  0% {
    transform: translate(1px, 2px);
  }
  2% {
    transform: translate(4px, 1px);
  }
  4% {
    transform: translate(2px, 4px);
  }
  6% {
    transform: translate(5px, 5px);
  }
  8% {
    transform: translate(2px, 2px);
  }
  10% {
    transform: translate(2px, 4px);
  }
  12% {
    transform: translate(3px, 2px);
  }
  14.000000000000002% {
    transform: translate(2px, 3px);
  }
  16% {
    transform: translate(2px, 1px);
  }
  18% {
    transform: translate(1px, 4px);
  }
  20% {
    transform: translate(1px, 2px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(4px, 4px);
  }
  26% {
    transform: translate(5px, 3px);
  }
  28.000000000000004% {
    transform: translate(3px, 1px);
  }
  30% {
    transform: translate(3px, 4px);
  }
  32% {
    transform: translate(3px, 1px);
  }
  34% {
    transform: translate(2px, 4px);
  }
  36% {
    transform: translate(2px, 1px);
  }
  38% {
    transform: translate(3px, 5px);
  }
  40% {
    transform: translate(5px, 1px);
  }
  42% {
    transform: translate(1px, 5px);
  }
  44% {
    transform: translate(2px, 3px);
  }
  46.00000000000001% {
    transform: translate(2px, 3px);
  }
  48% {
    transform: translate(3px, 5px);
  }
  50% {
    transform: translate(1px, 4px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(3px, 5px);
  }
  56.00000000000001% {
    transform: translate(5px, 2px);
  }
  58% {
    transform: translate(1px, 5px);
  }
  60% {
    transform: translate(4px, 2px);
  }
  62% {
    transform: translate(5px, 3px);
  }
  64% {
    transform: translate(3px, 4px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(5px, 5px);
  }
  70.00000000000001% {
    transform: translate(5px, 2px);
  }
  72% {
    transform: translate(2px, 2px);
  }
  74% {
    transform: translate(1px, 2px);
  }
  76% {
    transform: translate(1px, 1px);
  }
  78% {
    transform: translate(2px, 4px);
  }
  80% {
    transform: translate(1px, 5px);
  }
  82.00000000000001% {
    transform: translate(3px, 3px);
  }
  84% {
    transform: translate(2px, 2px);
  }
  86% {
    transform: translate(5px, 2px);
  }
  88% {
    transform: translate(3px, 1px);
  }
  90% {
    transform: translate(3px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 5px);
  }
  94% {
    transform: translate(3px, 4px);
  }
  96% {
    transform: translate(2px, 3px);
  }
  98% {
    transform: translate(5px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-webkit-keyframes tr-bag {
  0% {
    transform: translate(1px, 2px);
  }
  2% {
    transform: translate(4px, 1px);
  }
  4% {
    transform: translate(2px, 4px);
  }
  6% {
    transform: translate(5px, 5px);
  }
  8% {
    transform: translate(2px, 2px);
  }
  10% {
    transform: translate(2px, 4px);
  }
  12% {
    transform: translate(3px, 2px);
  }
  14.000000000000002% {
    transform: translate(2px, 3px);
  }
  16% {
    transform: translate(2px, 1px);
  }
  18% {
    transform: translate(1px, 4px);
  }
  20% {
    transform: translate(1px, 2px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(4px, 4px);
  }
  26% {
    transform: translate(5px, 3px);
  }
  28.000000000000004% {
    transform: translate(3px, 1px);
  }
  30% {
    transform: translate(3px, 4px);
  }
  32% {
    transform: translate(3px, 1px);
  }
  34% {
    transform: translate(2px, 4px);
  }
  36% {
    transform: translate(2px, 1px);
  }
  38% {
    transform: translate(3px, 5px);
  }
  40% {
    transform: translate(5px, 1px);
  }
  42% {
    transform: translate(1px, 5px);
  }
  44% {
    transform: translate(2px, 3px);
  }
  46.00000000000001% {
    transform: translate(2px, 3px);
  }
  48% {
    transform: translate(3px, 5px);
  }
  50% {
    transform: translate(1px, 4px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(3px, 5px);
  }
  56.00000000000001% {
    transform: translate(5px, 2px);
  }
  58% {
    transform: translate(1px, 5px);
  }
  60% {
    transform: translate(4px, 2px);
  }
  62% {
    transform: translate(5px, 3px);
  }
  64% {
    transform: translate(3px, 4px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(5px, 5px);
  }
  70.00000000000001% {
    transform: translate(5px, 2px);
  }
  72% {
    transform: translate(2px, 2px);
  }
  74% {
    transform: translate(1px, 2px);
  }
  76% {
    transform: translate(1px, 1px);
  }
  78% {
    transform: translate(2px, 4px);
  }
  80% {
    transform: translate(1px, 5px);
  }
  82.00000000000001% {
    transform: translate(3px, 3px);
  }
  84% {
    transform: translate(2px, 2px);
  }
  86% {
    transform: translate(5px, 2px);
  }
  88% {
    transform: translate(3px, 1px);
  }
  90% {
    transform: translate(3px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 5px);
  }
  94% {
    transform: translate(3px, 4px);
  }
  96% {
    transform: translate(2px, 3px);
  }
  98% {
    transform: translate(5px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-o-keyframes tr-bag {
  0% {
    transform: translate(1px, 2px);
  }
  2% {
    transform: translate(4px, 1px);
  }
  4% {
    transform: translate(2px, 4px);
  }
  6% {
    transform: translate(5px, 5px);
  }
  8% {
    transform: translate(2px, 2px);
  }
  10% {
    transform: translate(2px, 4px);
  }
  12% {
    transform: translate(3px, 2px);
  }
  14.000000000000002% {
    transform: translate(2px, 3px);
  }
  16% {
    transform: translate(2px, 1px);
  }
  18% {
    transform: translate(1px, 4px);
  }
  20% {
    transform: translate(1px, 2px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(4px, 4px);
  }
  26% {
    transform: translate(5px, 3px);
  }
  28.000000000000004% {
    transform: translate(3px, 1px);
  }
  30% {
    transform: translate(3px, 4px);
  }
  32% {
    transform: translate(3px, 1px);
  }
  34% {
    transform: translate(2px, 4px);
  }
  36% {
    transform: translate(2px, 1px);
  }
  38% {
    transform: translate(3px, 5px);
  }
  40% {
    transform: translate(5px, 1px);
  }
  42% {
    transform: translate(1px, 5px);
  }
  44% {
    transform: translate(2px, 3px);
  }
  46.00000000000001% {
    transform: translate(2px, 3px);
  }
  48% {
    transform: translate(3px, 5px);
  }
  50% {
    transform: translate(1px, 4px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(3px, 5px);
  }
  56.00000000000001% {
    transform: translate(5px, 2px);
  }
  58% {
    transform: translate(1px, 5px);
  }
  60% {
    transform: translate(4px, 2px);
  }
  62% {
    transform: translate(5px, 3px);
  }
  64% {
    transform: translate(3px, 4px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(5px, 5px);
  }
  70.00000000000001% {
    transform: translate(5px, 2px);
  }
  72% {
    transform: translate(2px, 2px);
  }
  74% {
    transform: translate(1px, 2px);
  }
  76% {
    transform: translate(1px, 1px);
  }
  78% {
    transform: translate(2px, 4px);
  }
  80% {
    transform: translate(1px, 5px);
  }
  82.00000000000001% {
    transform: translate(3px, 3px);
  }
  84% {
    transform: translate(2px, 2px);
  }
  86% {
    transform: translate(5px, 2px);
  }
  88% {
    transform: translate(3px, 1px);
  }
  90% {
    transform: translate(3px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 5px);
  }
  94% {
    transform: translate(3px, 4px);
  }
  96% {
    transform: translate(2px, 3px);
  }
  98% {
    transform: translate(5px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@keyframes tr-bag {
  0% {
    transform: translate(1px, 2px);
  }
  2% {
    transform: translate(4px, 1px);
  }
  4% {
    transform: translate(2px, 4px);
  }
  6% {
    transform: translate(5px, 5px);
  }
  8% {
    transform: translate(2px, 2px);
  }
  10% {
    transform: translate(2px, 4px);
  }
  12% {
    transform: translate(3px, 2px);
  }
  14.000000000000002% {
    transform: translate(2px, 3px);
  }
  16% {
    transform: translate(2px, 1px);
  }
  18% {
    transform: translate(1px, 4px);
  }
  20% {
    transform: translate(1px, 2px);
  }
  22% {
    transform: translate(2px, 2px);
  }
  24% {
    transform: translate(4px, 4px);
  }
  26% {
    transform: translate(5px, 3px);
  }
  28.000000000000004% {
    transform: translate(3px, 1px);
  }
  30% {
    transform: translate(3px, 4px);
  }
  32% {
    transform: translate(3px, 1px);
  }
  34% {
    transform: translate(2px, 4px);
  }
  36% {
    transform: translate(2px, 1px);
  }
  38% {
    transform: translate(3px, 5px);
  }
  40% {
    transform: translate(5px, 1px);
  }
  42% {
    transform: translate(1px, 5px);
  }
  44% {
    transform: translate(2px, 3px);
  }
  46.00000000000001% {
    transform: translate(2px, 3px);
  }
  48% {
    transform: translate(3px, 5px);
  }
  50% {
    transform: translate(1px, 4px);
  }
  52% {
    transform: translate(1px, 5px);
  }
  54% {
    transform: translate(3px, 5px);
  }
  56.00000000000001% {
    transform: translate(5px, 2px);
  }
  58% {
    transform: translate(1px, 5px);
  }
  60% {
    transform: translate(4px, 2px);
  }
  62% {
    transform: translate(5px, 3px);
  }
  64% {
    transform: translate(3px, 4px);
  }
  66% {
    transform: translate(3px, 5px);
  }
  68% {
    transform: translate(5px, 5px);
  }
  70.00000000000001% {
    transform: translate(5px, 2px);
  }
  72% {
    transform: translate(2px, 2px);
  }
  74% {
    transform: translate(1px, 2px);
  }
  76% {
    transform: translate(1px, 1px);
  }
  78% {
    transform: translate(2px, 4px);
  }
  80% {
    transform: translate(1px, 5px);
  }
  82.00000000000001% {
    transform: translate(3px, 3px);
  }
  84% {
    transform: translate(2px, 2px);
  }
  86% {
    transform: translate(5px, 2px);
  }
  88% {
    transform: translate(3px, 1px);
  }
  90% {
    transform: translate(3px, 3px);
  }
  92.00000000000001% {
    transform: translate(2px, 5px);
  }
  94% {
    transform: translate(3px, 4px);
  }
  96% {
    transform: translate(2px, 3px);
  }
  98% {
    transform: translate(5px, 2px);
  }
  100% {
    transform: translate(2px, 2px);
  }
  1% {
    transform: scaleY(1) skewX(0deg);
  }
  1.5% {
    transform: scaleY(3) skewX(-60deg);
  }
  2% {
    transform: scaleY(1) skewX(0deg);
  }
  51% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
  52% {
    transform: scaleX(1.5) scaleY(0.2) skewX(80deg);
  }
  53% {
    transform: scaleX(1) scaleY(1) skewX(0deg);
  }
}
@-moz-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@-webkit-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@-o-keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}
@keyframes bg-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 -32px;
  }
}




/* Glitch CSS (modified and masked), from css-tricks: https://css-tricks.com/glitch-effect-text-images-svg/ */
.glitch {
  display: inline-block;
  color: #ffae00;
  font-style: normal;
  position: relative;
  margin: 0 auto;
  -webkit-mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
  mask-image: repeating-linear-gradient(black, black 2px, transparent 3px);
}

@keyframes noise-anim {
  0% {
    clip-path: inset(52% 0 49% 0);
  }
  5% {
    clip-path: inset(98% 0 3% 0);
  }
  10% {
    clip-path: inset(90% 0 10% 0);
  }
  15% {
    clip-path: inset(75% 0 4% 0);
  }
  20% {
    clip-path: inset(32% 0 34% 0);
  }
  25% {
    clip-path: inset(41% 0 45% 0);
  }
  30% {
    clip-path: inset(22% 0 54% 0);
  }
  35% {
    clip-path: inset(11% 0 20% 0);
  }
  40% {
    clip-path: inset(70% 0 5% 0);
  }
  45% {
    clip-path: inset(80% 0 9% 0);
  }
  50% {
    clip-path: inset(20% 0 29% 0);
  }
  55% {
    clip-path: inset(33% 0 22% 0);
  }
  60% {
    clip-path: inset(86% 0 13% 0);
  }
  65% {
    clip-path: inset(42% 0 4% 0);
  }
  70% {
    clip-path: inset(23% 0 4% 0);
  }
  75% {
    clip-path: inset(50% 0 45% 0);
  }
  80% {
    clip-path: inset(23% 0 58% 0);
  }
  85% {
    clip-path: inset(53% 0 33% 0);
  }
  90% {
    clip-path: inset(60% 0 8% 0);
  }
  95% {
    clip-path: inset(45% 0 54% 0);
  }
  100% {
    clip-path: inset(71% 0 5% 0);
  }
}
.glitch::after {
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 #fbe806;
  top: 0;
  color: #fefcfe;
  background: gold;
  pointer-events: none;
  overflow: hidden;
  animation: noise-anim 5.25s infinite linear alternate-reverse;
}

@keyframes noise-anim-2 {
  0% {
    clip-path: inset(22% 0 49% 0);
  }
  5% {
    clip-path: inset(57% 0 2% 0);
  }
  10% {
    clip-path: inset(21% 0 44% 0);
  }
  15% {
    clip-path: inset(72% 0 14% 0);
  }
  20% {
    clip-path: inset(67% 0 33% 0);
  }
  25% {
    clip-path: inset(39% 0 30% 0);
  }
  30% {
    clip-path: inset(68% 0 2% 0);
  }
  35% {
    clip-path: inset(44% 0 54% 0);
  }
  40% {
    clip-path: inset(48% 0 41% 0);
  }
  45% {
    clip-path: inset(44% 0 21% 0);
  }
  50% {
    clip-path: inset(33% 0 52% 0);
  }
  55% {
    clip-path: inset(89% 0 11% 0);
  }
  60% {
    clip-path: inset(90% 0 5% 0);
  }
  65% {
    clip-path: inset(64% 0 36% 0);
  }
  70% {
    clip-path: inset(29% 0 22% 0);
  }
  75% {
    clip-path: inset(50% 0 45% 0);
  }
  80% {
    clip-path: inset(67% 0 7% 0);
  }
  85% {
    clip-path: inset(100% 0 1% 0);
  }
  90% {
    clip-path: inset(96% 0 5% 0);
  }
  95% {
    clip-path: inset(96% 0 3% 0);
  }
  100% {
    clip-path: inset(76% 0 5% 0);
  }
}
.glitch::before {
  content: attr(data-text);
  display: inline-block;
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 #5da1c6;
  top: 0;
  color: #fefcfe;
  overflow: hidden;
  pointer-events: none;
  animation: noise-anim-2 2s infinite linear alternate-reverse;
}
/* end glitch css from css-tricks.com */
.inicio {
	font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier,
		monospace;
	font-size: 3vw;
	font-weight: 100;
	text-shadow: 0 0 5px var(--gold);
	background-color: var(--termcolor);
	background-image: url(http://api.thumbr.it/whitenoise-200x200.png?background=00000000&noise=626262&density=15&opacity=15);
	background-size: 100px;
	color: var(--gold);
	height: 1000px;
	text-align: center;
	padding-top: 200px;
	margin-top: -100px;
	width: 100vw;
	opacity: 0.6;
	margin-left: -30px;
	padding-left: 60px;
}



@keyframes blink {
	0.01% {
		opacity: 0;
   }
	50% {
		opacity: 0;
   }
	50.01% {
		opacity: 1;
   }
}
@keyframes scanline {
	0.01% {
		height: 0;
   }
	99.99% {
		height: 100%;
   }
	100% {
		height: 0;
   }
}


#one p, #one pre {
	font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
	font-size: 14px;
	line-height: 1;
	margin-top: -100px;
	display: inherit;
}
.blink {
	opacity: 1;
	animation: blink 1s linear infinite;
}
.scanline {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(255, 255, 255, 0.02);
	animation: scanline 8s linear infinite;
	pointer-events: none;
}
!

JS 

              
                     const commands = String.raw`root「」~・サイバパンク --> cd ファイル
root「」~・サイバパンク・ファイル --> ls`;
const header = String.raw`
                                                  

        ________/\\\\\\\\\________________/\\\________________________________________________/\\\________/\\\__/\\\\\\\\\\\_        
      _____/\\\////////________________\/\\\_______________________________________________\/\\\_______\/\\\_\/////\\\///__       
       ___/\\\/______________/\\\__/\\\_\/\\\_______________________________________________\/\\\_______\/\\\_____\/\\\_____      
        __/\\\_______________\//\\\/\\\__\/\\\____________/\\\\\\\\___/\\/\\\\\\\____________\/\\\_______\/\\\_____\/\\\_____     
         _\/\\\________________\//\\\\\___\/\\\\\\\\\____/\\\/////\\\_\/\\\/////\\\___________\/\\\_______\/\\\_____\/\\\_____    
          _\//\\\________________\//\\\____\/\\\////\\\__/\\\\\\\\\\\__\/\\\___\///____________\/\\\_______\/\\\_____\/\\\_____   
           __\///\\\___________/\\_/\\\_____\/\\\__\/\\\_\//\\///////___\/\\\___________________\//\\\______/\\\______\/\\\_____  
            ____\////\\\\\\\\\_\//\\\\/______\/\\\\\\\\\___\//\\\\\\\\\\_\/\\\____________________\///\\\\\\\\\/____/\\\\\\\\\\\_ 
             _______\/////////___\////________\/////////_____\//////////__\///_______________________\/////////_____\///////////__

# # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # # #`;

const finalTitle = String.raw`


██████ ██    ██ ██████  ███████ ██████  ██████  ██    ██ ███    ██ ██   ██ 
██       ██  ██  ██   ██ ██      ██   ██ ██   ██ ██    ██ ████   ██ ██  ██  
██        ████   ██████  █████   ██████  ██████  ██    ██ ██ ██  ██ █████   
██         ██    ██   ██ ██      ██   ██ ██      ██    ██ ██  ██ ██ ██  ██  
 ██████    ██    ██████  ███████ ██   ██ ██       ██████  ██   ████ ██   ██ 
                                                                            
                                                 
                       `;

   let blink = document.querySelector('.blink');
const code = document.querySelector('.code');

const RandomNumber = (min, max) => {
	return Math.floor(Math.random() * max) + min
};

const Delay = (time) => {
	return new Promise((resolve) => setTimeout(resolve, time))
};

const ResetTerminal = () => {
	code.innerHTML = '<span class="blink">█</span>';
	blink = document.querySelector('.blink');
};

const RenderString = characters => {
	blink.insertAdjacentHTML('beforeBegin', characters);
};

const TypeString = async characters => {
	for(const character of characters.split('')) {
		await Delay(RandomNumber(90, 00));
		RenderString(character);
	}
}

const DrawLines = async ( characters, min = 50, max = 500 ) => {
	for(const line of characters.split('\n')) {
		await Delay(RandomNumber(min, max));
		RenderString(`${line}\n`);
	}
}

const DrawCommands = async commands => {
  
	for( const line of commands.split('\n')){
		// Seperate the directory and the command
		const [currentDir, command] = line.split(' --> ');
    RenderString('\n');
		// Print the directory, type the command and finish with new line
    RenderString(`${currentDir} ᑀ `);
		await TypeString(command);
		RenderString('\n');
	}
}


// Start the code
(async()=> {
	await DrawCommands(" --> BOOTING UMBRELLA...");

	await Delay(100);
	RenderString("\n");
	await DrawCommands(commands);
	RenderString('\nインデックス.js    題名.js\n\n');
	await DrawCommands('root「」~・サイバパンク・ファイル --> node インデックス.js');
	await DrawLines( header );
	await TypeString("\n\nSCIENCE IS NOW.NOT NEVER.");
	await Delay(2000);
	ResetTerminal();
	await DrawCommands('root「」~・サイバパンク・ファイル --> API_KEY=3db7ca618243da1ba3bc76ab14bcf07b && node 題名.js');
	await DrawLines(finalTitle);
})();




$(document).ready(function () {
    setTimeout(function () {
        $('.slider__inner').removeClass("glitch--animate");
   },2000);  
  
    $('#inicio').on('click', function () {


        $('#two').hide();
        $('#three').hide();

        $('#four').hide();
        $('#one').show();
        $('.inicio').addClass("glitch--animate");
        setTimeout(function () {
            
            $('.inicio').removeClass("glitch--animate");
       },1000); 

    });




    $('#servicos').on('click', function () {

        $('#one').hide();

        $('#two').hide();
        $('#four').hide();
        $('#three').show();

        $('.divserviços').addClass("glitch--animate");
        setTimeout(function () {
            
            $('.divserviços').removeClass("glitch--animate");
       },1000); 

    });

    $('#contato').on('click', function () {

        $('#one').hide();

        $('#two').hide();
        $('#three').hide();

        $('#four').show();
        $('.contact').addClass("glitch--animate");
        setTimeout(function () {
            
            $('.contact').removeClass("glitch--animate");
       },800);  

    });
    $('#close').on('click', function () {

        if ($('#buttons').hasClass("inactive")) {
            $('#buttons').toggleClass('inactive active')
            $('#buttons').show("blind");
            $('#navbar').animate({
                height: '330px'
            })
        }
        else if ($('#buttons').hasClass('active')) {
            $('#buttons').toggleClass('active inactive');
             $('#buttons').hide("blind");
             $('#navbar').animate({
                 height: '80px'
             })
             $('#close').animate({
                 'margin-top': '-5px'
             })

        }
    });

  


// Color changer


 
$('#redtheme').on('click', function () {

    $('.header-presentation').addClass('glitch--animate');
    setTimeout(function () {
        $('.header-presentation').removeClass("glitch--animate");
   },800);  

    $(':root').css('--gold88', ' rgba(255, 0, 0, 0.53)');
    $(':root').css('--gold', '#ff0000');
    $(':root').css('--goldDark', '#ed2525');
    $(':root').css('--hovercolor','#00ffbf');
    $(':root').css('--hovercolorbg','rgba(0, 255, 170, 0.25)');
    $(':root').css('--inputfocus','rgba(255, 23, 23, 0.644)');
    $(':root').css('--termcolor','#0f0000');

     
    
    });
    
$('#bluetheme').on('click', function () {
    $('.header-presentation').addClass('glitch--animate');
    setTimeout(function () {
        $('.header-presentation').removeClass("glitch--animate");
   },800);  


    $(':root').css('--gold88', 'rgba(0, 255, 213, 0.53)');
    $(':root').css('--gold', '#00ffd5');
    $(':root').css('--goldDark', '#25edc2');
    $(':root').css('--hovercolor','#ffee00');
    $(':root').css('--hovercolorbg','rgba(255, 217, 0, 0.25)');
    $(':root').css('--inputfocus','rgba(23, 255, 216, 0.644)');
    $(':root').css('--termcolor','#000f0d');
 });


 $('#goldtheme').on('click', function () {

    $('.header-presentation').addClass('glitch--animate');
    setTimeout(function () {
        $('.header-presentation').removeClass("glitch--animate");
   },800);  


    $(':root').css('--gold88', 'rgba(255, 215, 0, 0.53)');
    $(':root').css('--gold', '#ffd700');
    $(':root').css('--goldDark', '#eda725');
    $(':root').css('--hovercolor','#ff0000');
    $(':root').css('--hovercolorbg','rgba(255, 0, 0, 0.25)');
    $(':root').css('--inputfocus','rrgba(255, 220, 23, 0.644)');
    $(':root').css('--termcolor','#0f0900');
    });
});





$(document).ready(function(){





$('#slide1').on('click', function(){
    $('.servthree').hide();
    $('.servtwo').hide();
    $('.servone').show();
    $('.servone').addClass('glitch--animate');
    setTimeout(function () {
        $('.servone').removeClass("glitch--animate");
   },800);    
    
});

$('#slide2').on('click', function(){
    $('.servone').hide();
    $('.servthree').hide();
    $('.servtwo').show();
    $('.servtwo').addClass('glitch--animate');
    setTimeout(function () {
        $('.servtwo').removeClass("glitch--animate");
   },1200);  
});

$('#slide3').on('click', function(){
    $('.servone').hide();
    $('.servtwo').hide();
    $('.servthree').show();
    $('.servthree').addClass('glitch--animate');
    setTimeout(function () {
        $('.servthree').removeClass("glitch--animate");
   },800);  
});




});
!
999px

Console