Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

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

+ add another resource

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <html>
  <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/5bcdf2b414.js" crossorigin="anonymous"></script>
  </head>
  <body>
    <header>
      <h1 class="title">Katana UI</h1>
      <h2 class="subtitle">This should be a descriptive line.</h2>
      <p class="disclaimer">Disclaimer.</p>
      <button class="btn btn-default">Call to Action</button>
      <a class="scroll-down" href="#first"></a>
    </header>

    <div class="container-fluid">
      <div class="container" id="first">
        <div class="flexrow row-1-el">
          <div class="element text-center">
            <h1>Katana UI :h1</h1>
            <h2>Yet :h2</h2>
            <h3>Another :h3</h3>
            <h4>Lightweight :h4</h4>
            <h5>Responsive :h5</h5>
            <h6>Framework :h6</h6>
            <p>To speed :p</p>
            <span>Your :span</span> <br>
            <small>Projects :small</small>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="flexrow">
          <div class="col-25">
            <h3 style="background: red;">Hola</h3>
          </div>
          <div class="col-50">
            <h3 style="background: blue;">Adeu</h3>
          </div>
          <div class="col-25">
            <h3 style="background: green;">=D</h3>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3 class="t-center">Grid:</h3>
          </div>
        </div>
      </div>

      <div class="flex-container">
        <div class="flexrow row-7-el debug-inside">
          <div class="element">
            <p>Uno</p>
          </div>
          <div class="element">
            <p>Dos</p>
          </div>
          <div class="element">
            <p>Tres</p>
          </div>
          <div class="element">
            <p>Cuatro</p>
          </div>
          <div class="element">
            <p>Cinco</p>
          </div>
          <div class="element">
            <p>Seis</p>
          </div>
          <div class="element">
            <p>Siete</p>
          </div>
        </div>
      </div>
      <div class="flex-container">
        <div class="flexrow debug-inside">
          <div class="element col-10">
            <p>10% del ancho</p>
          </div>
          <div class="element col-15">
            <p>15% del ancho</p>
          </div>
          <div class="element col-45">
            <p>45% del ancho</p>
          </div>
          <div class="element col-30">
            <p>30% del ancho</p>
          </div>
        </div>
      </div>
      <!-- second grid block -->
      <div class="container">
        <div class="flexrow row-7-el debug-inside">
          <div class="element">
            <p>Uno</p>
          </div>
          <div class="element">
            <p>Dos</p>
          </div>
          <div class="element">
            <p>Tres</p>
          </div>
          <div class="element">
            <p>Cuatro</p>
          </div>
          <div class="element">
            <p>Cinco</p>
          </div>
          <div class="element">
            <p>Seis</p>
          </div>
          <div class="element">
            <p>Siete</p>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="flexrow debug-inside">
          <div class="element col-10">
            <p>10% del ancho</p>
          </div>
          <div class="element col-15">
            <p>15% del ancho</p>
          </div>
          <div class="element col-45">
            <p>45% del ancho</p>
          </div>
          <div class="element col-30">
            <p>30% del ancho</p>
          </div>
        </div>
      </div>
      <div class="flexrow row-1-el">
        <div class="element flex-center-x">
          <h3>Variable structure</h3>
        </div>
      </div>
      <div class="flexrow row-3-el xs-row-4-el md-row-6-el">
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid dolores sunt dolore vel iure, quidem laudantium atque iste eveniet a provident quia soluta fuga veniam iusto, pariatur deserunt error modi?
        </div>
        <div class="element">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur dolores ab saepe dicta ipsum minima, accusantium, molestias maxime repellat accusamus natus eligendi eaque sunt totam illum sint esse a atque.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos provident iusto sunt laboriosam quia sapiente repellat ducimus assumenda tempore qui, esse asperiores voluptatem explicabo, cum eum modi nisi minima at!
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, vel quidem at aperiam eaque nisi veniam quisquam in recusandae magnam. Nostrum consequatur sequi temporibus nulla et, labore ipsum ipsa quo.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, magnam. Illum ex aliquid, aspernatur minima officia, atque consequatur temporibus eum qui, voluptates eius. Expedita harum at soluta, aliquid sit inventore.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae ipsa totam culpa numquam veniam necessitatibus minima, quaerat id rem nihil unde quasi accusantium aspernatur, aperiam optio earum enim maxime.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid dolores sunt dolore vel iure, quidem laudantium atque iste eveniet a provident quia soluta fuga veniam iusto, pariatur deserunt error modi?
        </div>
        <div class="element">
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur dolores ab saepe dicta ipsum minima, accusantium, molestias maxime repellat accusamus natus eligendi eaque sunt totam illum sint esse a atque.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos provident iusto sunt laboriosam quia sapiente repellat ducimus assumenda tempore qui, esse asperiores voluptatem explicabo, cum eum modi nisi minima at!
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, vel quidem at aperiam eaque nisi veniam quisquam in recusandae magnam. Nostrum consequatur sequi temporibus nulla et, labore ipsum ipsa quo.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat, magnam. Illum ex aliquid, aspernatur minima officia, atque consequatur temporibus eum qui, voluptates eius. Expedita harum at soluta, aliquid sit inventore.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae ipsa totam culpa numquam veniam necessitatibus minima, quaerat id rem nihil unde quasi accusantium aspernatur, aperiam optio earum enim maxime.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae ipsa totam culpa numquam veniam necessitatibus minima, quaerat id rem nihil unde quasi accusantium aspernatur, aperiam optio earum enim maxime.
        </div>
        <div class="element">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique vitae ipsa totam culpa numquam veniam necessitatibus minima, quaerat id rem nihil unde quasi accusantium aspernatur, aperiam optio earum enim maxime.
        </div>
      </div>
      <div class="separator"></div>
      <div class="flex-container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3 class="t-center">Structure 10% + (15% * 5) + 30%</h3>
          </div>
        </div>
        <div class="flexrow debug-inside">
          <div class="element col-10">
            <p>10% of parent width</p>
          </div>
          <div class="element col-15">
            <p>15% of parent width</p>
          </div>
          <div class="element col-15">
            <p>15% of parent width</p>
          </div>
          <div class="element col-15">
            <p>15% of parent width</p>
          </div>
          <div class="element col-15">
            <p>15% of parent width</p>
          </div>
          <div class="element col-30">
            <p>30% of parent width</p>
          </div>
        </div>
      </div>
      <div class="separator"></div>
      <div class="flexrow row-3-el">
        <div class="element">
          <h3 class="t-center">Texts: </h3>
        </div>
        <div class="element">
          <h3 class="t-center">Modal: </h3>
        </div>
        <div class="element">
          <h3 class="t-center">Alerts: </h3>
        </div>
      </div>
      <div class="flexrow row-3-el">
        <div class="element flex-center-x">
          <div>
            <p class="text-default">default text</p>
            <p class="text-info">info text</p>
            <p class="text-warning">warning text</p>
            <p class="text-success">success text</p>
            <p class="text-danger">danger text</p>
          </div>
        </div>
        <div class="element flex-center-x">
          <div id="open-modal" class="modal-window">
            <div class="modal-content">
              <a href="#!" title="Close" class="modal-close"> X </a>
              <h2>Yaaay!</h2>
              <div>
                <p class="bold">A nice responsive css only modal.</p>
              </div>
              <div>
                <p>
                  You can close this dialog by clicking the close button at the bottom, the cross at the top right or the backdrop.
                </p>
                <p>
                  Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti dolore repellat nulla sunt, sed libero voluptatem facilis saepe iste dolores et dignissimos ea fugiat sit quae aliquam nisi corporis tempora.
                </p>
              </div>
              <div class="modal-footer">
                <a href="#!" title="Close" class="btn modal-close"> Close </a>
              </div>
            </div>
          </div>
          <a class="modal-backdrop" href="#!"></a>
          <a class="btn modal-btn" href="#open-modal" name="a">
            Open Modal
          </a>
        </div>
        <div class="element flex-center-x">
          <div class="alert-items">
            <p class="alert-default">default alert</p>
            <p class="alert-info">info alert</p>
            <p class="alert-warning">warning alert</p>
            <p class="alert-success">success alert</p>
            <p class="alert-danger">danger alert</p>
          </div>
        </div>
      </div>
      <div class="flexrow row-2-el">
        <div class="element t-right">
          <div class="container">
            <h3>Badges:</h3>
            <p class="badge">5</p> <br><br>
            <p class="badge badge--warning"> Pending </p><br><br>
            <p class="badge--title">Notifications <span class="badge badge--info">9</span></p>
            <p class="badge--title">Notifications <span class="badge badge--warning">7</span></p>
            <p class="badge--title">Notifications <span class="badge badge--success">6</span></p>
            <p class="badge--title">Notifications <span class="badge badge--danger">8</span></p>
            <p class="badge--title">Notifications <span class="badge badge--line">2</span></p>
          </div>
        </div>
        <div class="element">
          <h3>Pre: </h3>
          <pre> 
            let fruits: string[] = ['Apple', 'Orange', 'Banana'];
          </pre>
          <h3>Code:</h3>
          <code>
            let values: (string | number)[] = ['Apple', 2, 'Orange', 3]; 
          </code>
          <h3>samp:</h3>
          <samp>sample software output</samp>
          <h3>kbd:</h3>
          <kbd>keyboard input</kbd>
          <h3>var:</h3>
          <var>variable example</var>
          <h3>Mark:</h3>
          <p style="max-width: 300px;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit.  <mark>Doloremque error, corrupti quae tempore deserunt delectus magnam</mark>,nam ea molestias recusandae.
          </p>
        </div>
      </div>
      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3 class="t-center">
              Structure 100 -> 50 + 50 -> 20 - 80 (percents)
            </h3>
          </div>
        </div>
        <div class="flexrow">
          <div class="element col-100">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam sunt nulla accusamus tempora earum explicabo quia vel fugit, debitis commodi! Deleniti sequi consequuntur similique nesciunt ipsa! Alias voluptas excepturi repellendus?
          </div>
          <div class="element col-50">
            <div class="flexrow">
              <div class="element col-20 flex-right"> 88 </div> 
              <div class="element col-80">
                text text text
              </div>
            </div>
            <div class="flexrow">
              <div class="element col-20 flex-right"> 88 </div> 
              <div class="element col-80">
                text text text
              </div>
            </div>
            <div class="flexrow">
              <div class="element col-20 flex-right"> 88 </div> 
              <div class="element col-80">
                text text text
              </div>
            </div>
          </div>
          <div class="col-50">
            <div class="flexrow">
              <div class="col-20 flex-right"> 88 </div> 
              <div class="col-80">
                text text text
              </div>
            </div>
            <div class="flexrow">
              <div class="col-20 flex-right"> 88 </div> 
              <div class="col-80">
                text text text
              </div>
            </div>
            <div class="flexrow">
              <div class="col-20 flex-right"> 88 </div> 
              <div class="col-80">
                text text text
              </div>
            </div>
          </div>
        </div>
      </div>

      <hr>
      <br>
      <br>
      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Cards:</h3>
          </div>
        </div>
        <div class="flexrow">
          <div class="course-card-container">
            <div class="course-card sanidad">
              <a href="#ver-ciclo">
                <div class="card-effect-container">
                  <div class="effect-menu-item sevillaH">  
                    <p class="ver-ciclo">
                      <i class="fas fa-eye"></i>Ver ciclo
                    </p>
                  </div>
                </div>
              </a>
              <span class="card-category">
                GRADO MEDIO
              </span>
              <i class="fad fa-first-aid"></i>
              <p class="course-title">
                Auxiliar de Enfermería
              </p>
              <span class="course-family">Sanidad</span>
            </div>
          </div>

          <div class="course-card-container">
            <div class="course-card sanidad">
              <div class="card-effect-container">
                <div class="effect-menu-item">
                  <p class="center-select">Selecciona tu centro</p>
                  <p class="shop-links">
                    <span><a href="#sevilla">Sevilla</a></span>
                    <span><a href="#madrid">Madrid</a></span>
                    <span><a href="#lleida">Lleida</a></span>
                    <span><a href="#online">Online</a></span>
                  </p>
                </div>
              </div>
              <span class="card-category">
                GRADO SUPERIOR
              </span>
              <i class="fad fa-x-ray"></i>
              <p class="course-title">
                Imagen para el Diagnóstico y Medicina Nuclear
              </p>
              <span class="course-family">Sanidad</span>
            </div>
          </div>

          <div class="course-card-container">
            <div class="course-card sanidad">
              <a href="#ver-ciclo">
                <div class="card-effect-container">
                  <div class="effect-menu-item sevillaH">  
                    <p class="ver-ciclo">
                      <i class="fas fa-eye"></i>Ver ciclo
                    </p>
                  </div>
                </div>
              </a>
              <span class="card-category">
                GRADO SUPERIOR
              </span>
              <i class="fad fa-salad"></i>
              <p class="course-title">
                Dietética
              </p>
              <span class="course-family">Sanidad</span>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <br>
      <br>
      <div class="container">
        <form action="!#" class="flexrow row-1-el">
          <div class="element">
            <h3>Forms with HTML5 validations:</h3>
          </div>
          <div class="form-group element">
            <input id="s1" class="form-control" required pattern="['A-Za-z \u00C0-\u00FF\\-]{2,}" name="s1" type="text" placeholder=" ">
            <label for="s1" class="form-control-placeholder">
              Nombre*
            </label>
            <span class="error-msg">Error</span>
          </div>
          <div class="form-group element">
            <input id="s2" class="form-control" pattern="[A-Za-z \u00C0-\u00FF]{2,}" name="s2" type="text" placeholder=" ">
            <label for="s2" class="form-control-placeholder">
              Apellido/s
            </label>
            <span class="error-msg">Error</span>
          </div>
          <div class="form-group element">
            <input id="tel" class="form-control" pattern="[+0-9]{9,15}" name="tel" type="tel" placeholder=" ">
            <label for="tel" class="form-control-placeholder">
              Teléfono
            </label>
            <span class="error-msg">Error</span>
          </div>
          <div class="form-group element">
            <input id="n1" class="form-control" pattern="[0-9]{5,}" name="n1" type="text" placeholder=" ">
            <label for="n1" class="form-control-placeholder">
              Codigo postal
            </label>
            <span class="error-msg">Error</span>
          </div>
          <div class="form-group element">
            <select name="v" id="v" class="form-control" required>
              <option value="1">Opcion uno</option>
              <option value="2">Opcion dos</option>
              <option value="3">Opcion tres</option>
            </select>
            <label for="v" class="form-control-placeholder">
              Selecciona una opcion
            </label>
          </div>
          <div class="form-group element">
            <input type="password" id="pwd" name="pwd" class="form-control" placeholder=" " pattern="[A-Za-z0-9]{8,}" required>
            <label for="pwd" class="form-control-placeholder">
              password
            </label>
            <span class="error-msg">Mínimo 8 carácteres</span>
            <i class="fa fa-eye showpwd" onClick="showPwd('pwd', this)"></i>
          </div>
           <div class="form-group element">
            <input type="password" id="pwd2" name="pwd2" class="form-control" placeholder=" " pattern="[A-Za-z0-9]{8,}" required>
            <label for="pwd2" class="form-control-placeholder">
              repeat password
            </label>
            <span class="error-msg">Mínimo 8 carácteres</span>
            <i class="fa fa-eye showpwd" onClick="showPwd('pwd2', this)"></i>
          </div>
          <div class="element">
            <label class="checkbox-container">
              Custom checkbox
              <input type="checkbox" id="cuno" name="cuno" value="cuno">
              <span class="checkmark"></span>
            </label>
            <label class="checkbox-container">
              Custom checkbox
              <input type="checkbox" id="cdos" name="cdos" value="cdos">
              <span class="checkmark"></span>
            </label>
          </div>
          <fieldset class="element">
            <label for="rgroup_one" class="radio-container">
              First Custom radio input
              <input type="radio" id="rgroup_one" name="rgroup" value="rgroup_one">
              <span class="checkmark"></span>
            </label>
            <label for="rgroup_two" class="radio-container">
              <input type="radio" id="rgroup_two" name="rgroup" value="rgroup_two">
              <span class="checkmark"></span>
              Second Custom radio input
            </label>
          </fieldset>
          <div class="element">
            <div class="flexrow row-3-el">
              <div class="form-group element">
                <input id="day" class="form-control" name="day" type="number" min="1" max="31" placeholder=" ">
                <label for="day" class="form-control-placeholder">
                  DD
                </label>
              </div>

              <div class="form-group element">
                <input id="month" class="form-control" name="month" type="number" min="1" max="12" placeholder=" ">
                <label for="month" class="form-control-placeholder">
                  MM
                </label>
              </div>

              <div class="form-group element">
                <input id="year" class="form-control" name="year" type="number" min="1900" max="2030" placeholder=" ">
                <label for="year" class="form-control-placeholder">
                  YYYY
                </label>
              </div>
            </div>
          </div>
          <div class="form-info element">
            <p>
              <strong>Lorem ipsum dolor sit amet</strong> consectetur adipisicing <strong>elit</strong>. Impedit in est deserunt, deleniti voluptatem provident ullam quidem sequi! Minus sed eligendi numquam incidunt consequuntur pariatur facere ut aut enim blanditiis!

              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo repellendus autem atque, similique ipsam, <strong>minima debitis dolor saepe neque ea ex! Eveniet, est?</strong> Aliquid deserunt harum expedita velit! Commodi, alias.Debitis nam eos eum quia ratione omnis, possimus nostrum culpa consequuntur vero quisquam laboriosam ipsa nihil, pariatur impedit, sed animi repudiandae!  
            </p>
            <p>
              Nobis ratione veniam magnam enim saepe facilis, aliquam esse.
              <strong>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta consequuntur deleniti eveniet vero amet eligendi mollitia.</strong> Repudiandae accusamus eum numquam quas quia perferendis tempore, iure itaque aliquam impedit recusandae illum. <strong>Et odit animi soluta officia laudantium </strong>architecto veritatis voluptate dolorem deserunt earum vitae nisi a eum, doloribus officiis natus maxime ipsum molestiae nam eos debitis! Natus soluta <strong>molestias repellat</strong> ut?
            </p>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit in est deserunt, deleniti voluptatem provident ullam quidem sequi! Minus sed eligendi numquam incidunt consequuntur pariatur facere ut aut enim blanditiis!
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quo repellendus autem atque, similique ipsam, minima debitis dolor saepe neque ea ex! Eveniet, est? Aliquid deserunt harum expedita velit! Commodi, alias.Debitis nam eos eum quia ratione omnis, <strong>possimus nostrum culpa consequuntur vero quisquam laboriosam ipsa nihil, pariatur impedit, sed animi repudiandae!</strong> Nobis ratione veniam magnam enim saepe facilis, aliquam esse.
            </p>
          </div>
          <div class="element">
            <label class="checkbox-container agree-and-send">
              <p>Agree conditions</p>
              <input type="checkbox" id="conditions" name="conditions" value="conditions">
              <span class="checkmark"></span>
              <button class="btn submit btn-primary submit-btn"></button>
            </label>
          </div>
        </form>
      </div>
      <hr>
      <br>
      <br>
      <div class="separator"></div>
      <div class="container">
        <div class="flexrow row-2-el">
          <div class="element">
            <h3>Accordion / collapsible: </h3>
            <!-- accordion -->
            <section class="accordion">
              <div class="accordion-element">
                <input type="checkbox" id="check-1" />
                <label for="check-1"><i class="fa fa-plus"></i> Accordion first item </label>
                <article>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure saepe dolore harum adipisci quis illum placeat, nulla porro amet nostrum officiis perferendis neque enim, voluptatem, soluta voluptatibus dicta repellat tempore!</p>
                  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure saepe dolore harum adipisci quis illum placeat, nulla porro amet nostrum officiis perferendis neque enim, voluptatem, soluta voluptatibus dicta repellat tempore!</p>
                </article>
              </div>
              <div class="accordion-element">
                <input type="checkbox" id="check-2" />
                <label for="check-2">Accordion second item <span class="accordion-indicator"> </span></label>
                <article>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam dolorem alias numquam? Ipsa voluptate eligendi quasi beatae alias adipisci suscipit id qui temporibus repellendus placeat aperiam magnam sunt, voluptatum explicabo?</p>
                </article>
              </div>
              <div class="accordion-element">
                <input type="checkbox" id="check-3" />
                <label for="check-3">Accordion third item <span class="accordion-indicator"> </span></label>
                <article>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem magni quos odio modi sed earum corporis, fugit aspernatur, suscipit voluptatum eaque id omnis sequi nobis esse aliquam quaerat magnam cumque.</p>
                </article>
              </div>
            </section>
            <!-- accordion -->
          </div>
          <div class="element">
            <h3>Tabs:</h3>
            <!-- tabs -->
            <div class="tab-container">
              <input id="tab-1" type="radio" name="tabs" checked="checked" />
              <input id="tab-2" type="radio" name="tabs" />
              <input id="tab-3" type="radio" name="tabs" />
              <input id="tab-4" type="radio" name="tabs" />
              <div class="tabs">
                <label for="tab-1">Super</label>
                <label for="tab-2">Fancy</label>
                <label for="tab-3">CSS-only</label>
                <label for="tab-4">Tabs</label>
              </div>
              <div class="tab-content">
                <div class="tab">
                  <h3>Lorem Ipsum</h3>
                  <p>
                    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti?
                  </p>
                </div>
                <div class="tab">
                  <h3>Dolor sit amet</h3>
                  <p>
                    Dolor sit amet consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum 
                  </p>
                </div>
                <div class="tab">
                  <h3>Consectetur adipisicing elit</h3>
                  <p>
                    Consectetur adipisicing elit. Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum dolor sit amet 
                  </p>
                </div>
                <div class="tab">
                  <h3>Laudantium eaque velit</h3>
                  <p>
                    Laudantium eaque velit molestiae officiis eveniet voluptas perferendis autem ab itaque eum asperiores, atque nam sequi culpa. Eius ducimus consectetur totam deleniti? Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
                  </p>
                </div>
              </div>
            </div>
            <!-- end tabs -->
          </div>
        </div>
      </div>
      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Progress bars:</h3>
            <div class="progress-bar">
              <span class="progress-bar-green" style="width: 20%;"></span>
            </div>
          </div>
          <div class="element">
            <div class="progress-bar striped">
              <span class="progress-bar-red" style="width: 50%;"></span>
            </div>
          </div>
          <div class="element">
            <div class="progress-bar striped animated">
              <span class="progress-bar-blue" style="width: 60%;"></span>
            </div>
          </div>
        </div>
      </div>
      <div class="separator"></div>

      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Stepper:</h3>
            <div class="stepper">
              <div class="step">
                <p class="step-number completed">1</p>
                <p class="step-title">Step One: Download Katana UI</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>
              </div>
              <div class="step">
                <p class="step-number completed">2</p>
                <p class="step-title">Step Two: Compile SCSS to CSS</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>
              </div>
              <div class="step">
                <p class="step-number">3</p>
                <p class="step-title">Step Three: Use it</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit minus obcaecati rerum ex qui, atque?</p>

              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="separator"></div>

      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Pagination:</h3>
            <ul class="pagination">
              <li><a href="#!">Prev</a></li>
              <li><a href="#!">3</a></li>
              <li><a href="#!">4</a></li>
              <li><a class="active" href="#!">5</a></li>
              <li><a href="#!">6</a></li>
              <li><a href="#!">7</a></li>
              <li><a href="#!">Next</a></li>
            </ul>

          </div>
        </div>
      </div>


      <div class="separator"></div>

      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Tooltips:</h3>
            <span class="tooltip-text">Hover me to show more info on top
              <span class="tooltip-content top">more info!</span>
            </span>
            
            <span class="tooltip-text">Hover me to show more info on bottom
              <span class="tooltip-content bottom">more info!</span>
            </span>
          </div>
        </div>
      </div>

      <div class="separator"></div>

      <div class="container">
        <div class="flexrow row-1-el flex-center-x">
          <h3>Loader:</h3>
        </div>
      </div>
      <div id="loader-container" class="test">
        <div class="loader">Loading...</div>
      </div>
      <div class="separator"></div>
      <div class="container">
        <div class="flexrow row-1-el">
          <div class="element">
            <h3>Captions:</h3>
          </div>
        </div>
        <div class="flexrow row-2-el">
          <div class="element">

            <table class="caption-container top" border="1">
              <caption>Caption at top</caption>
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
              </tr>
              <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
              </tr>
            </table>

          </div>
          <div class="element">

            <table class="caption-container bottom" border="1">
              <caption>Caption at bottom</caption>
              <tr>
                <th>Company</th>
                <th>Contact</th>
                <th>Country</th>
              </tr>
              <tr>
                <td>Alfreds Futterkiste</td>
                <td>Maria Anders</td>
                <td>Germany</td>
              </tr>
            </table>

          </div>
        </div>
      </div>


      <div class="separator"></div>
      <div class="separator"></div>
      <div class="separator"></div>
      <hr>

      <br>
    </div>
    <div class="toast-container top right">
      <div class="toast danger">
        <a clasS="dismiss" href="#!" onclick="dismiss(this)">&times;</a>
        <span>I am a TOAST notification.</span><br>
        <small>You can dismiss me clicking the cross.</small>
      </div>

      <div class="toast success">
        <a clasS="dismiss" href="#!" onclick="dismiss(this)">&times;</a>
        <span>I am a TOAST notification.</span><br>
        <small>You can dismiss me clicking the cross.</small>
      </div>
    </div>

  </body>
</html>
              
            
!

CSS

              
                /* imports */
@import url('https://fonts.googleapis.com/css?family=Nunito:300,600,800&display=swap');
/* Variables */
$screen-xs: 480px;
$screen-sm: 768px;
$screen-md: 992px;
$screen-lg: 1200px;
$screen-xl: 1600px;
$col-margin: 16px;
$default-background: #fefefe;
$info-background: #e3f2fd;
$warning-background: #FFEE8C; 
$success-background: #1DEB43; 
$danger-background: #b9433b;
$default-color: #212121;
$info-color: #79a8c9;
$warning-color: #ffaf71; 
$success-color: #48ce51; 
$danger-color: #f55;
$badge-text-color: #ffffff;
$badge-default-bg: #2c3e50;
$badge-info-bg: #3498db;
$badge-warning-bg: #f1c40f;
$badge-danger-bg: #e74c3c;
$badge-success-bg: #2ecc71;
$small-font: 13px;
$normal-font: 16px;
$big-font: 19px;
$subtitle: 22px;
$title: 25px;
$light: 300;
$normal: 600;
$bold: 800;
$separator-size: 60px;


/* TABS */
@import 'https://fonts.googleapis.com/css?family=Roboto:400,700';

$tabs: 5;
$color: #242B36;
$brand: #D22C3F;
/* end tabs */

// theme
/* General */
* { box-sizing: border-box; font-family: 'Nunito', sans-serif;}
p { margin-top: 0;}
h1{ font-size: 50px; }
h2{ font-size: 37px; }
h3{ font-size: 28px; }
h4{ font-size: 20px; }
h5{ font-size: 18px; }
h6{ font-size: 16px; }
p, span { font-size: 16px; }
small, caption { font-size: 13px; }
.caption-container {
  &.top {
    caption-side: top;
  }
  &.bottom {
    caption-side: bottom;
  }
}
hr {
  border: none;
  box-shadow: 0px 10px 5px #333;
  height: 1px;
}
/* Grid system */
.flex-container { margin: 0 15px;}
.container{ max-width: $screen-lg; margin:0 auto;}
.container-fluid{ width:100%; }
.flexrow { display: flex; flex-flow: row wrap; margin: 0 calc(#{$col-margin}/2 *-1); }
.preserve { display: block; }
.reverse { flex-direction:row-reverse; }
.no-reverse { flex-direction:row; }
.d-none { display: none; }
.d-block { display: block; }
.separator-xs { margin-bottom: calc( #{$separator-size}/2); }
.separator-sm { margin-bottom: calc( #{$separator-size}/1.5); }
.separator { margin-bottom: $separator-size; }
.separator-lg { margin-bottom: calc( #{$separator-size}*1.5); }
.separator-xl { margin-bottom: calc( #{$separator-size}*2); }
.f-right { float: right; }
.f-left { float: left; }
.t-center { text-align: center; }
.t-right { text-align: right; }
.bold { font-weight: $bold;}
/* col-percents */
.col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
.col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
.col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
.col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
.col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
.col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
.col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
.col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
.col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
.col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
.col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
.col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
.col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
.col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
.col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
.col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
.col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
.col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
.col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
.col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
.col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
.col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
.col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
.col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
.col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
.col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
.col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }

@media(min-width: $screen-xs) {
  .xs-col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
  .xs-col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
  .xs-col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
  .xs-col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
  .xs-col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(17.5% - #{$col-margin}); }
  .xs-col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
  .xs-col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
  .xs-col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
  .xs-col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
  .xs-col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
  .xs-col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
  .xs-col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
  .xs-col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
  .xs-col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
  .xs-col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
  .xs-col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
  .xs-col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
  .xs-col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
  .xs-col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
  .xs-col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
  .xs-col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .xs-col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .xs-col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
  .xs-col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
  .xs-col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
  .xs-col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
  .xs-col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }
}
/* from 768 to N */
@media(min-width: $screen-sm) {
  .sm-col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
  .sm-col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
  .sm-col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
  .sm-col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
  .sm-col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(17.5% - #{$col-margin}); }
  .sm-col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
  .sm-col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
  .sm-col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
  .sm-col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
  .sm-col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
  .sm-col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
  .sm-col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
  .sm-col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
  .sm-col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
  .sm-col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
  .sm-col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
  .sm-col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
  .sm-col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
  .sm-col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
  .sm-col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
  .sm-col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .sm-col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .sm-col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
  .sm-col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
  .sm-col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
  .sm-col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
  .sm-col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }
}
/* from 992 to N */
@media(min-width: $screen-md) {
  .md-col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
  .md-col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
  .md-col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
  .md-col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
  .md-col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(17.5% - #{$col-margin}); }
  .md-col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
  .md-col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
  .md-col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
  .md-col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
  .md-col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
  .md-col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
  .md-col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
  .md-col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
  .md-col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
  .md-col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
  .md-col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
  .md-col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
  .md-col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
  .md-col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
  .md-col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
  .md-col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .md-col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .md-col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
  .md-col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
  .md-col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
  .md-col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
  .md-col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }
}
/* from 1200 to N */
@media(min-width: $screen-lg) {
  .lg-col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
  .lg-col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
  .lg-col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
  .lg-col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
  .lg-col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(17.5% - #{$col-margin}); }
  .lg-col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
  .lg-col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
  .lg-col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
  .lg-col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
  .lg-col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
  .lg-col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
  .lg-col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
  .lg-col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
  .lg-col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
  .lg-col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
  .lg-col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
  .lg-col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
  .lg-col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
  .lg-col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
  .lg-col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
  .lg-col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .lg-col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .lg-col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
  .lg-col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
  .lg-col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
  .lg-col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
  .lg-col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }
}
/* from 1600 to N */
@media(min-width: $screen-xl) {
  .xl-col-5 { flex: 0 1 calc(5% - #{$col-margin}); max-width: calc(5% - #{$col-margin}); }
  .xl-col-10  { flex: 0 1 calc(10% - #{$col-margin}); max-width: calc(10% - #{$col-margin}); }
  .xl-col-12  { flex: 0 1 calc(12.5% - #{$col-margin}); max-width: calc(12.5% - #{$col-margin}); }
  .xl-col-15  { flex: 0 1 calc(15% - #{$col-margin}); max-width: calc(15% - #{$col-margin}); }
  .xl-col-17  { flex: 0 1 calc(16.6666% - #{$col-margin}); max-width: calc(17.5% - #{$col-margin}); }
  .xl-col-20  { flex: 0 1 calc(20% - #{$col-margin}); max-width: calc(20% - #{$col-margin}); }
  .xl-col-25  { flex: 0 1 calc(25% - #{$col-margin}); max-width: calc(25% - #{$col-margin}); }
  .xl-col-30  { flex: 0 1 calc(30% - #{$col-margin}); max-width: calc(30% - #{$col-margin}); }
  .xl-col-33  { flex: 0 1 calc(33.3333% - #{$col-margin}); max-width: calc(33.3333 - #{$col-margin}); }
  .xl-col-35  { flex: 0 1 calc(35% - #{$col-margin}); max-width: calc(35% - #{$col-margin}); }
  .xl-col-40  { flex: 0 1 calc(40% - #{$col-margin}); max-width: calc(40% - #{$col-margin}); }
  .xl-col-43  { flex: 0 1 calc(43.75% - #{$col-margin}); max-width: calc(43.75% - #{$col-margin}); }
  .xl-col-45  { flex: 0 1 calc(45% - #{$col-margin}); max-width: calc(45% - #{$col-margin}); }
  .xl-col-50  { flex: 0 1 calc(50% - #{$col-margin}); max-width: calc(50% - #{$col-margin}); }
  .xl-col-55  { flex: 0 1 calc(55% - #{$col-margin}); max-width: calc(55% - #{$col-margin}); }
  .xl-col-60  { flex: 0 1 calc(60% - #{$col-margin}); max-width: calc(60% - #{$col-margin}); }
  .xl-col-65  { flex: 0 1 calc(65% - #{$col-margin}); max-width: calc(65% - #{$col-margin}); }
  .xl-col-66  { flex: 0 1 calc(66.6666% - #{$col-margin}); max-width: calc(66.6666 - #{$col-margin}); }
  .xl-col-70  { flex: 0 1 calc(70% - #{$col-margin}); max-width: calc(70% - #{$col-margin}); }
  .xl-col-75  { flex: 0 1 calc(75% - #{$col-margin}); max-width: calc(75% - #{$col-margin}); }
  .xl-col-80  { flex: 0 1 calc(80% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .xl-col-83  { flex: 0 1 calc(83.3333% - #{$col-margin}); max-width: calc(80% - #{$col-margin}); }
  .xl-col-85  { flex: 0 1 calc(85% - #{$col-margin}); max-width: calc(85% - #{$col-margin}); }
  .xl-col-87  { flex: 0 1 calc(87.5% - #{$col-margin}); max-width: calc(87.5% - #{$col-margin}); }
  .xl-col-90  { flex: 0 1 calc(90% - #{$col-margin}); max-width: calc(90% - #{$col-margin}); }
  .xl-col-95  { flex: 0 1 calc(95% - #{$col-margin}); max-width: calc(95% - #{$col-margin}); }
  .xl-col-100 { flex: 0 1 calc(100% - #{$col-margin}); max-width: calc(100% - #{$col-margin}); }
}

/* From 0 to N - flexrows with equal width elements */
.element, [class*='col-']{ margin: calc(#{$col-margin}/2); word-wrap: break-word; }
.flexrow.row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
.flexrow.row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
.flexrow.row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
.flexrow.row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
.flexrow.row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
.flexrow.row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
.flexrow.row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
.flexrow.row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
.flexrow.row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
.flexrow.row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
.flexrow.row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
.flexrow.row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
/* from 480 to N */
@media(min-width: $screen-xs) {
  .xs-d-none { display: none; }
  .xs-d-block { display: block; }
  .xs-reverse { flex-direction:row-reverse; }
  .xs-no-reverse { flex-direction:row; }
  .flexrow.xs-row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
  .flexrow.xs-row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
  .flexrow.xs-row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
  .flexrow.xs-row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
  .flexrow.xs-row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
  .flexrow.xs-row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
  .flexrow.xs-row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
  .flexrow.xs-row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
  .flexrow.xs-row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
  .flexrow.xs-row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
  .flexrow.xs-row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
  .flexrow.xs-row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
}
/* from 768 to N */
@media(min-width: $screen-sm) {
  .sm-d-none { display: none; }
  .sm-d-block { display: block; }
  .sm-reverse { flex-direction:row-reverse; }
  .sm-no-reverse { flex-direction:row; }
  .flexrow.sm-row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
  .flexrow.sm-row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
  .flexrow.sm-row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
  .flexrow.sm-row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
  .flexrow.sm-row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
  .flexrow.sm-row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
  .flexrow.sm-row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
  .flexrow.sm-row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
  .flexrow.sm-row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
  .flexrow.sm-row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
  .flexrow.sm-row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
  .flexrow.row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
}
/* from 992 to N */
@media(min-width: $screen-md) {
  .md-d-none { display: none; }
  .md-d-block { display: block; }
  .md-reverse { flex-direction:row-reverse; }
  .md-no-reverse { flex-direction:row; }
  .flexrow.md-row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
  .flexrow.md-row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
  .flexrow.md-row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
  .flexrow.md-row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
  .flexrow.md-row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
  .flexrow.md-row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
  .flexrow.md-row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
  .flexrow.md-row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
  .flexrow.md-row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
  .flexrow.md-row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
  .flexrow.md-row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
  .flexrow.md-row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
}
/* from 1200 to N */
@media(min-width: $screen-lg) {
  .lg-d-none { display: none; }
  .lg-d-block { display: block; }
  .lg-reverse { flex-direction:row-reverse; }
  .lg-no-reverse { flex-direction:row; }
  .flexrow.lg-row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
  .flexrow.lg-row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
  .flexrow.lg-row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
  .flexrow.lg-row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
  .flexrow.lg-row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
  .flexrow.lg-row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
  .flexrow.lg-row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
  .flexrow.lg-row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
  .flexrow.lg-row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
  .flexrow.lg-row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
  .flexrow.lg-row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
  .flexrow.lg-row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
}
/* from 1600 to N */
@media(min-width: $screen-xl) {
  .xl-d-none { display: none; }
  .xl-d-block { display: block; }
  .xl-reverse { flex-direction:row-reverse; }
  .xl-no-reverse { flex-direction:row; }
  .flexrow.xl-row-1-el > .element { flex: 0 1 calc(100%/1  - #{$col-margin}); max-width: calc(100%/1  - #{$col-margin}); }
  .flexrow.xl-row-2-el > .element { flex: 0 1 calc(100%/2  - #{$col-margin}); max-width: calc(100%/2  - #{$col-margin}); }
  .flexrow.xl-row-3-el > .element { flex: 0 1 calc(100%/3  - #{$col-margin}); max-width: calc(100%/3  - #{$col-margin}); }
  .flexrow.xl-row-4-el > .element { flex: 0 1 calc(100%/4  - #{$col-margin}); max-width: calc(100%/4  - #{$col-margin}); }
  .flexrow.xl-row-5-el > .element { flex: 0 1 calc(100%/5  - #{$col-margin}); max-width: calc(100%/5  - #{$col-margin}); }
  .flexrow.xl-row-6-el > .element  { flex: 0 1 calc(100%/6  - #{$col-margin}); max-width: calc(100%/6  - #{$col-margin}); }
  .flexrow.xl-row-7-el > .element  { flex: 0 1 calc(100%/7  - #{$col-margin}); max-width: calc(100%/7  - #{$col-margin}); }
  .flexrow.xl-row-8-el > .element  { flex: 0 1 calc(100%/8  - #{$col-margin}); max-width: calc(100%/8  - #{$col-margin}); }
  .flexrow.xl-row-9-el > .element  { flex: 0 1 calc(100%/9  - #{$col-margin}); max-width: calc(100%/9  - #{$col-margin}); }
  .flexrow.xl-row-10-el > .element { flex: 0 1 calc(100%/10 - #{$col-margin}); max-width: calc(100%/10 - #{$col-margin}); }
  .flexrow.xl-row-11-el > .element { flex: 0 1 calc(100%/11 - #{$col-margin}); max-width: calc(100%/11 - #{$col-margin}); }
  .flexrow.xl-row-12-el > .element { flex: 0 1 calc(100%/12 - #{$col-margin}); max-width: calc(100%/12 - #{$col-margin}); }
}

/* responsive modal */
.modal-btn { font-size: $big-font; font-weight: $bold; text-decoration: none; color: $default-color; border-radius: .4em; border: 1px solid $info-color; height: fit-content; padding: 5px 15px;}
.modal-btn:hover, .modal-btn:hover p { background: $info-background;}
.modal-window { 
  position: fixed; left: 50%; top: 50%; right: 50%; bottom: 50%; transform: translate(-50%, -50%); z-index: 999;
  visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s;
  &:target { visibility: visible; opacity: 1; pointer-events: auto; 
    +.modal-backdrop { background-color: rgba(0, 0, 0, 0.75); position: fixed;  top: 0; right: 0; bottom: 0; left: 0; z-index: 990;}
  }
  &>div.modal-content { width: 900px; max-width: calc(100vw - #{$col-margin}); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 30px; background: #fff; max-height: 90vh; overflow-y: auto;}
  .modal-close:not(.btn) { position: fixed; right: 15px; top: 5px; font-size: 1.2rem; text-decoration: none; }
  .modal-close, .modal-close:visited { color: #212121; }
  .btn.modal-close { font-size: 1.2rem; text-decoration: none; border: 1px solid #333; padding: 10px 15px; background: #fff; border-radius: .4em; }
  .btn.modal-close:hover { background: #f0f0f0; }
  .modal-footer { width: 100%; display: flex; justify-content: flex-end; margin: 15px 0px 0px 5px;
  }
}
/* positioning elements */
.block-center-x { margin: 0 auto; }
.flex-center-x { display:flex; justify-content: center;}
.flex-right { display: flex; justify-content: flex-end; }
.flex-center-y { display:flex; align-items: center;}
.text-center { text-align: center; }
/* Feedback components */
[class*="alert-"] {padding: 10px; font-size: $big-font; border-radius: .4em; font-weight: $normal;}
.alert-default { background: $default-background; border: 1px solid $default-color; border-radius: .4em;}
.alert-info { background: $info-background; }
.alert-warning { background: $warning-background; }
.alert-success { background: $success-background; }
.alert-danger { background: $danger-background; }
[class*="text-"] { font-size: $big-font; font-weight: $normal;}
.text-default { color: $default-color; }
.text-info { color: $info-color; }
.text-warning { color: $warning-color; }
.text-success { color: $success-color; }
.text-danger { color: $danger-color; }


// badges
.badge--title { font-size: 1.5rem; }
.badge { box-sizing: border-box; display: inline-block; background-color: $badge-default-bg; color: $badge-text-color; border-radius: 5em; text-align: center; font-size: 1.6rem; font-weight: 400; padding: .05rem .8rem .1rem; line-height: inherit; margin: 0px 5px;}
.badge--line { background-color: transparent; color: #95a5a6; box-shadow: 0 0 0 1px #95a5a6;}
.badge--info { background-color: $badge-info-bg; }
.badge--warning { background-color: $badge-warning-bg; }
.badge--danger { background-color: $badge-danger-bg; }
.badge--success { background-color: $badge-success-bg; }
code { background: #f0f0f0; color: $default-color; font-family: 'Ubuntu Mono', Consolas, Monaco, 'Andale Mono', monospace; white-space: pre-line; }
pre { display: block; margin: 15px 0; padding: 10px 15px; border-left: 4px solid $info-color; background: #f0f0f0; font-family: 'Ubuntu Mono', Consolas, Monaco, 'Andale Mono', monospace; font-size: 15px; color: $default-color; white-space: normal; overflow-x: auto; }
samp { font-size: 1em; font-family: 'Ubuntu Mono', Consolas, Monaco, 'Andale Mono', monospace;}
kbd { font-size: 20px; font-family: 'Ubuntu Mono', Consolas, Monaco, 'Andale Mono', monospace;}
var { font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-weight: bold; color: #333; }
mark { background-color: #ff7;     padding-left: 1px; padding-right: 1px; }
// buttons
.btn {
  color: #282828;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  font-size: 1rem;
  padding: 12px 30px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2);
  &:disabled {
    opacity: 20%;
  }
  &:hover{ opacity: 95%;}
}

.btn-primary {
  background: #fec940;
}
.btn-default {
  background: #fff;
  border: 1px solid #282828;
}
.btn-inverse {
  background: #282828;
  color: #fff;
}
.submit {
  width: 100%;
  background: rgb(253, 197, 35);
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2);
  border: none;
  border-radius: 4px;
  color: rgb(40, 40, 40);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
  line-height: 50px;
}
@media(min-width: 991px) {
  .btn {
    font-size: 1.5rem;
    padding: 15px 30px;
  }
}
/* FORMS */
/* FLOATING LABELS */
.form-control{
  padding: .9em;
  caret-color: #333;
  &:not(select) {
    padding: 1.75em .75rem 0 5px;
  }
  width: calc(100% - (.75rem + 5px) );
  border-radius: 2px;
  border: 2px solid transparent;
  border-bottom: 2px solid #cfcfcf;
  background: rgb(242, 242, 243);
  font-size: 16px;
}
.form-control:hover {
  // background: rgb(229, 229, 230);
}
select.form-control {
  -webkit-appearance: menulist-button;
  height: 55px;
}
.form-control:focus {
  outline: none;
}
.form-group {
  position: relative;
  margin-bottom: 1.5rem;
  height: 56px;
}

.form-control-placeholder {
  position: absolute;
  bottom: 1.25em;
  left: 0;
  padding: 7px 0 0 13px;
  transition: all 250ms;
  opacity: 0.5;
}
span.error-msg {
  color: rgb(224, 32, 32); 
  font-size: 12px; 
  font-weight: 500; 
  transition: all .5s;
  opacity: 0;
}
.form-control:focus + .form-control-placeholder,
.form-control:valid:not(:placeholder-shown) + .form-control-placeholder,
.form-control:not(:placeholder-shown) + .form-control-placeholder,
.form-control:invalid:not(:placeholder-shown) + .form-control-placeholder{
  font-size: 75%;
  transform: translate3d(0, -100%, 0);
  opacity: 1;
}
.form-control:invalid:not(:placeholder-shown):not(select):not(:focus), .form-control.invalid:not(:focus) {
  border-bottom: 2px solid #f55;
  caret-color: #f55;
  +label {
    color: rgb(224, 32, 32);
    +.error-msg {
      opacity: 1;
    }
  }
}
.form-control:invalid:focus {
  border-bottom: 2px solid #cfcfcf;  
}
/* END floating labels */
/* Checkbox */
.checkbox-container {
  font-size: 14px;
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-bottom: 25px;
  margin-left: 15px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-style: normal;
  font-stretch: normal;
  line-height: 23px;
  letter-spacing: normal;
  color: #282828;
  &.agree-and-send {
    width: 100%;
    padding-left: 0;
    margin-left: 0;
    margin-top: 15px;
    p {
      padding-left: 30px;
    }
    .submit-btn {
      margin-top: 25px;
      pointer-events: none;
      transition: opacity .5s;
      &:before {
        content: "Agree conditions to submit";
      }
    }
  }
}
/* Hide the browser's default checkbox */
.checkbox-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: .4em;
}
.checkbox-container:hover input ~ .checkmark {
  background-color: #fff;
}
.checkbox-container input:not(:checked) ~ .checkmark {
  ~ .submit-btn {
    opacity: 50%;
    pointer-events: none;
  }
}
.checkbox-container input:checked ~ .checkmark {
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 0.4em;
  ~ .submit-btn {
    opacity: 100%;
    pointer-events: all;
    &:before {
      content: "Submit";
    }
  }
}
/* Checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checkbox-container input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checkbox-container .checkmark:after {
  // content: "\2713";
  left: 6px;
  top: 1px;
  width: 10px;
  height: 16px;
  border: solid #282828;
  border-width: 0 2.5px 2.5px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.form-info {
  padding: 15px;
  border-radius: .4em;
  border: 1px solid #999;
  max-height: 90px;
  overflow: auto;
}
.radio-container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  &:hover input ~ .checkmark {
    background-color: #ccc;
  }
  input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
    &:checked ~ .checkmark {
      background-color: #fff;
    }
    &:checked ~ .checkmark:after {
      display: block;
    }
  }
  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
    border-radius: 50%;
  }
  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }
  .checkmark:after {
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: black;
  }
}
.showpwd {
  position: absolute;
  right: 25px;
  top: 20px;
  cursor: pointer;
}
form {
  fieldset {
    border:none;
    margin:0 0 52px 0;
    padding-left: 15px;
  }
  .submit {
    width: 100%;
    background: rgb(253, 197, 35);
    box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2);
    border: none;
    border-radius: 4px;
    color: rgb(40, 40, 40);
    font-size: 20px;
    font-weight: 900;
    text-align: center;
    line-height: 50px;
  }
  legend {
    margin: 0;
    padding: 0;
  }
}

/* CARDS -- Require jQuery */
@media(max-width: 768px) {
  div.course-card-container {
    -webkit-flex:  0 1 calc(100% - 30px);;
    flex: 0 1 calc(100% - 30px);
    margin: 15px;
    margin-top: 45px;
  }
}
@media(min-width: 768px) and (max-width: 1100px) {
  div.course-card-container {
    -webkit-flex: 0 1 calc(50% - 30px);
    flex: 0 1 calc(50% - 30px);
    margin: 15px;
    margin-top: 45px;
  }
}
.course-card-container {
  max-height: 140px;
}
@media(min-width: 1100px) {
  div.course-card-container {
    -webkit-flex: 0 1 calc(33.3333% - 30px);
    flex: 0 1 calc(33.3333% - 30px);
    margin: 15px;
  }
}
.course-title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
  font-weight: 900;
  line-height: 1.5rem;
  margin-top: 5px;
}
.course-family {
  position: absolute;
  bottom: 15px;
  color: rgb(109, 114, 120);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
}
.card-category {
  color: rgb(109, 114, 120);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.fad:not(.fa-eye) {
  float: right;
}

.course-card {
  padding: 19px;
  cursor: pointer;
  height: 100%;
  position: relative;
  min-height: 140px;
  background: rgb(249, 248, 248);
  border-radius: 4px;
  box-shadow: 0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14);
  overflow: hidden;
}
.course-card.sanidad i.fad {
  color: #80c19b;
  font-size: 30px;
}
.card-effect-container {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: -50%;
  background: rgb(223, 239, 229);
  z-index: 999;
  display: block;
  align-items: center;
}
.card-effect-container.move {
  transition: transform .3s;
  transform: translateX(50%);
  transition-timing-function: ease-in-out;
}
.card-effect-container:not(.move) {  
  transition: transform .3s;
  transform: translateX(-60%);
  transition-timing-function: ease-in-out;
}

.effect-menu-item {
  -webkit-display: inline-table;
  display: inline-table;
  height: 100%;
  padding: 19px;
}

.effect-menu-item p span {
  color: rgb(65, 71, 68);
  font-size: 20px;
  font-weight: 900;
  height: 27px;
  letter-spacing: 0px;
  text-decoration: underline;
}
.effect-menu-item p i {
  font-size: 20px !important;
}
.center-select {
  color: rgb(109, 114, 120);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0px;
  margin-bottom: 38px;
}
.shop-links span:not(:first-child):not(:last-child) {
  margin: 0 5px;
}
.shop-links span:first-child {
  margin-right: 5px;
}
.shop-links span:last-child {
  margin-left: 5px;
}
.shop-links {
  -webkit-display: flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
}
.shop-links span {
  -webkit-flex: 0 1 calc(25% - 15px);
  flex: 0 1 calc(25% - 15px);
}
@media(max-width: 1240px) {
  .shop-links span {
    -webkit-flex: 0 1 calc(50% - 15px);
    flex: 0 1 calc(50% - 15px);
  }
}
.shop-links a {
  color: inherit;
}
.shop-links a:hover {
  color: #000;
}
.course-card i.fas.fa-eye {
  color: rgb(77, 81, 84);
  vertical-align: middle;
  margin-right: 16px;
  font-size: 20px !important;
}
.effect-menu-item > p.ver-ciclo {
  display: table-cell;
  vertical-align: middle;
  font-size: 20px;
  font-weight: 900;
  color: rgb(77, 81, 84);
}
.course-card a {
  color: rgb(77, 81, 84);
  text-decoration: none;
}
.course-card a p:hover {
  color: #000;
  text-decoration: underline;
}
.course-card a p:hover i {
  color: #000 !important;
}
.sevillaH{
  padding: 21px;
}
/* END CARDS */
/* TABS */
input[name="tabs"] {
  display: none;
  @for $i from 1 through $tabs {
    &#tab-#{$i}:checked {
      ~ .tab-content .tab:nth-of-type(#{$i}) {
        display: inline-block;
      }
      ~ .tabs label:nth-child(#{$i}) {
        color: #242b36;
        &:after {
          width: calc(100% - 40px);
          transition: .3s;
        }
      }
    }
  }
}

.tabs {
  box-shadow: 0 5px 5px -5px rgba(0, 0, 0, .3);
  overflow-X: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  white-space: nowrap;
  label {
    display: inline-block;
    padding: 18px;
    position: relative;
    color: lighten($color, 60%);
    font-weight: 700;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    &:after {
      content: '';
      background: #007386;
      width: 0;
      height: 4px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: .1s;
    }
  }
}

.tab-container {
  background: #FFF;
  border-radius: 3px;
  box-shadow: 0 5px 25px -10px rgba(0, 0, 0, .3);
  overflow: hidden;
  .tab {
    display: none;
    padding: 0 20px;
  }
}
// accordion 

.accordion {
  input {
    display: none;
  }
  label {
    font-size: 20px;
    font-weight: 600;
    background: #fefefe;
    border-radius: .25em;
    cursor: pointer;
    display: block;
    margin-bottom: .125em;
    padding: .5em;
    z-index: 20;
    span.accordion-indicator {
      transition: all 0.4s;
      width: 13px;
      height: 13px;
      margin-top: 5px;
      margin-right: 5px;
      display: inline-block;
      border: solid #282828;
      border-width: 0 2.5px 2.5px 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      float: right;
    }
  }
  .accordion-element {
    margin-bottom: 5px;
  }
  label:hover, .accordion-element:hover {
    background: #f5f5f5;
  }
  input:checked + label > i{
    transition: all 0.25s;
    &.fa::before, &.fa {
      content: "\f068";
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  input:checked + label {
    background: #f0f0f0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: $default-color;
    margin-bottom: 0;
    span.accordion-indicator { 
      -webkit-transform: rotate(225deg);
      -ms-transform: rotate(225deg);
      transform: rotate(225deg);
      margin-top: 10px;
    }
  }
  article {
    background: #fefefe;
    border-bottom-left-radius: .25em;
    border-bottom-right-radius: .25em;
    border-bottom: 2px solid #f0f0f0;
    border-left: 2px solid #f0f0f0;
    border-right: 2px solid #f0f0f0;
    overflow: hidden;
    z-index: 10;
    transition: max-height .25s;
  }
  input:not(:checked) ~ article {
    max-height: 0;
  }
  input:checked ~ article {
    height: auto;
    max-height: 2500px;
    margin-bottom: .125em;

  }
  article p {
    padding: 1em;
  }
}
// Progress bars

$progress-bar-height: 20px !default;
$progress-bar-bg-color: #f0f0f0 !default;
$progress-bar-colors: (
  'green'  : $success-color,
  'blue'   : #007386,
  'red'    : $danger-color,
) !default;

.progress-bar {
  position: relative;
  margin: 15px 0;
  height: $progress-bar-height;
  background: $progress-bar-bg-color;
  border-radius: 5px;
  overflow: hidden;

  & > span {
    display: block;
    position: absolute;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;

    @each $name, $color in $progress-bar-colors {
      &.progress-bar-#{$name} {
        background: $color;
      }
    }
  }

  &.striped {
    & > span:after {
      content: "";
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
      background-size: 50px 50px;
      overflow: hidden;
    }
  }

  &.animated {
    & > span:after {
      animation: move 2s linear infinite;
    }
  }

  @keyframes move {
    0% {
      background-position: 0 0;
    }
    100% {
      background-position: 50px 50px;
    }
  }
}

// progress bars

// stepper

.stepper {
  margin: 30px 15px;
  .step {
    position: relative;
    padding: 0 30px 30px 30px;
    border-left: 1px solid #f0f0f0;
    &:last-of-type {
      border: none;
    }
    .step-number {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: -18px;
      height: 36px;
      width: 36px;
      z-index: 1;
      font-weight: 600;
      color: $default-color;
      background: $success-background;
      border-radius: 50%;
      box-shadow: 0 2px 4px #f0f0f0;
      &.completed {
        background: $success-color;
      }
    }
    .step-title {
      margin: 0;
      font-weight: 600;
      font-size: 20px;
      line-height: 36px;
    }
  }
}

// stepper
// header

// HEADER
// ==============================
$corporate-primary-color: rgb(72, 185, 206);
$corporate-highlight-color: rgb(253, 197, 35);
$header-height: 100vh !default;
$header-title-size: 50px !default;
$header-subtitle-size: 18px !default;
$header-disclaimer-size: 12px !default;
$header-bg-color: $corporate-primary-color !default;
$header-text-color: $default-color !default;


header,
.header {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 15px;
  height: $header-height;
  background: $header-bg-color;

  .title {
    font-size: $header-title-size;
    line-height: $header-title-size;
    font-weight: 400;
    color: $header-text-color;
    text-align: center;

    @media(min-width: 768px) {
      font-size: $header-title-size * 1.2;
      line-height: $header-title-size * 1.2;
    }
  }

  .subtitle {
    font-size: $header-subtitle-size;
    line-height: 26px;
    font-weight: 300;
    color: $header-text-color;
    text-align: center;

    @media (min-width: 992px) {
      font-size: $header-subtitle-size * 1.4;
      line-height: $header-subtitle-size * 1.4;
    }
  }

  .disclaimer {
    font-size: 12px;
    color: $header-text-color;
    text-align: center;
  }

  .scroll-down {
    opacity: 1;
    -webkit-transition: all .5s ease-in 3s;
    transition: all .5s ease-in 3s;
  }

  .scroll-down {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 45px;
    left: 50%;
    margin-left: -16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;

    &::before {
      display: block;
      position: relative;
      bottom: 2px;
      content: '';
      transform: rotate(-45deg);
      width: 12px;
      height: 12px;
      border: 2px solid $header-text-color;
      border-width: 0px 0 2px 2px;
    }
  }
}

// header

// pagination
.pagination {
  display: flex;
  list-style: none;
  margin: 15px 0;
  padding: 0;

  li {
    margin: 0 5px;

    a {
      display: block;
      padding: 5px 10px;
      border-radius: 5px;
      background: $default-background;
      border: 1px solid $default-color;
      text-decoration: none;
      color: $default-color;

      &.active,
      &:focus,
      &:hover {
        opacity: 1;
        border-color: $corporate-primary-color;
      }

      &.active {
        background: $corporate-primary-color;
        color: $default-background;
      }

      &:active {
        transform: scale(0.95);
      }
    }
  }
}

// pagination
// tooltip

.tooltip-text {
  display: inline-block;
  position: relative;
  border-bottom: 1px dashed $default-background;
  cursor: pointer;
  
  .tooltip-content {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    min-width: 300px;
    padding: 10px 15px;
    color: $default-background;
    text-align: center;
    background: $default-color;
    border-radius: 5px;
    box-shadow: 0 2px 4px #333;;

    &::after {
      position: absolute;
      content: '';
      left: 50%;
      transform: translateX(-50%);
      border-width: 8px;
      border-style: solid;
    }
    
    &.top {
      bottom: 125%;
      &::after {
        top: 100%;
        border-color: $default-color transparent transparent;
      }
    }
    &.bottom {
      top: 125%;
      &::after {
        bottom: 100%;
        border-color: transparent transparent $default-color;
      }
    }
  }
  &:hover, &:target {
    .tooltip-content {
      display: block !important;
    }
  }
}
// tooltip
// loader
#loader-container.test{
  background: #fff;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  z-index: 99999;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
}
.loader {
  color: #ffffff;
  font-size: 11px;
  text-indent: -99999em;
  margin: 55px auto;
  position: relative;
  width: 10em;
  height: 10em;
  box-shadow: inset 0 0 0 1em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.loader:before,
.loader:after {
  position: absolute;
  content: '';
}
.loader:before { 
  width: 5.2em;
  height: 10.2em;
  background: $corporate-highlight-color;
  border-radius: 10.2em 0 0 10.2em;
  top: -0.1em;
  left: -0.1em;
  -webkit-transform-origin: 5.1em 5.1em;
  transform-origin: 5.1em 5.1em;
  -webkit-animation: load2 2s infinite ease 1.5s;
  animation: load2 2s infinite ease 1.5s;
  box-shadow: 0 0 5px #333;
}
.loader:after {
  width: 5.2em;
  height: 10.2em;
  background: $corporate-primary-color;
  border-radius: 0 10.2em 10.2em 0;
  top: -0.1em;
  left: 4.9em;
  -webkit-transform-origin: 0.1em 5.1em;
  transform-origin: 0.1em 5.1em;
  -webkit-animation: load2 2s infinite ease;
  animation: load2 2s infinite ease;
  box-shadow: 0 0 5px #333;
}
@-webkit-keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load2 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

// loader
// toast
.toast-container {
  height: auto;
  max-width: 300px;
  position: fixed;
  &.top {
    top: 1px;
    .toast {
      animation: toast-top 500ms cubic-bezier(1.46,.16,.82,.23);
    }
  }
  &.bottom {
    bottom: 1px;
    .toast{
      animation: toast-bottom 500ms cubic-bezier(.23,.82,.16,1.46);
    }
  }
  &.left {
    left: 25px;
  }
  &.right {
    right: 25px;
  }
  .toast {
    position: relative;
    width: 250px;
    max-width: 350px;
    border-radius: 4px;
    box-shadow: #333 1px 1px 7px;
    padding:10px;
    margin-bottom: 15px;
    opacity:1;
    animation-iteration-count: 1;

    &.default {
      color: $default-color;
      background-color: rgba(177, 7, 15, 0.78);
      a.dismiss{
        color: $default-color;
        border: 1px solid $default-color;
      }
    }
    &.success {
      color: $default-color;
      background-color: $success-background;
      // bottom: 100px;
      a.dismiss{
        color: $default-color;
        border: 1px solid $default-color;
      }
    }
    &.danger {
      color: $default-background;
      background-color: $danger-background;
      a.dismiss{
        color: $default-background;
        border: 1px solid $default-background;
      }
    }
    a.dismiss{
      position: absolute;
      top: 5px;
      right: 5px;
      text-decoration: none;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      font-size: 1.2em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

@keyframes toast-bottom{
  0% {
    opacity:0;
    transform: translateY(200px);
  } 100% {
    opacity:1;
    transform: translateY(0px);
  }
}
@keyframes toast-top{
  0% {
    opacity:0;
    transform: translateY(0px);
  } 100% {
    opacity:1;
    transform: translateY(200px);
  }
}
// toast

// debug
.debug-inside > * {outline: auto green;}
// div { background: rgba(0,0,0,0.01); outline: auto green;}
              
            
!

JS

              
                $('.course-card-container').on('mouseenter', function(){
  $('.card-effect-container', this).toggleClass('move');
  return false;
}); 
$('.course-card-container').on('mouseleave', function(){
  $('.card-effect-container', this).toggleClass('move');
  return false;
}); 

function showPwd(id, el) {
  let x = document.getElementById(id);
  if (x.type === "password") {
    x.type = "text";
    el.className = 'fa fa-eye-slash showpwd';
  } else {
    x.type = "password";
    el.className = 'fa fa-eye showpwd';
  }
}

function dismiss(el) {
  let fadeTarget = el.parentElement;
  const fadeEffect = setInterval(function () {
    if (!fadeTarget.style.opacity) {
      fadeTarget.style.opacity = 1;
    }
    if (fadeTarget.style.opacity > 0) {
      fadeTarget.style.opacity -= 0.2;
    } else {
      clearInterval(fadeEffect);
      fadeTarget.style.display = "none";
    }
  }, 40);
  
}

window.onload = function() {
  console.log('before timeout');
  setTimeout(function(){
    document.getElementById('loader-container').classList.add("container");
    document.getElementById('loader-container').classList.remove("test");
  }, 1);
}


              
            
!
999px

Console