safety.com

In this example below you will see how to do a safety.com with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by JonathanRoyere, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright JonathanRoyere ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">


    <title>Safety.com</title>
    <meta name="description" content="Safety.com products">
    <meta name="author" content="Skyhook">




  <!-- SAFETY.COM DEPENDENCIES (NOT NEEDED) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!--  END DEPENDENCIES REMOVE-->

  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
  <![endif]-->

  <!-- PAGE STYLES IMPORTANT -->
  
  <script src="https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

  <!-- END PAGE STYLES IMPORTANT -->
</head>

<body>






<!-- Grid section -->

<section class="container">
  <div class="row">
    <div class="content product-page-intro col-sm-12 col-md-8">
      <h2>Branded home security products</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
    </div>
  </div>
</section>

<section class="product-grid-section container">
  <div class="product-info-table">
    <table class="horizontal">
    <thead>
      <!-- First and last <th> are for alignment purposes -->
      <tr>
        <th></th>
        <th>Monitoring</th>
        <th>Installation Price</th>
        <th>Monitoring Fees</th>
        <th>Contract Length</th>
        <th>Customer Support</th>
        <th>Easy to use</th>
        <th>Night Vision</th>
        <th>Motion sensors</th>
        <th>On-site patrol</th>
        <th>Search drone</th>
        <th>Monster deterrent</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td data-label="">
          <h4>Product Title</h4>
          <img src="http://fpoimg.com/300x300?text=Logo" alt="">
        </td>
        <td data-label="Monitoring"><i class="fa fa-check-circle"></i></td>
        <td data-label="Installation Price">$5</td>
        <td data-label="Monitoring Fees">$5</td>
        <td data-label="Contact Length">1 year</td>
        <td data-label="Customer Support"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td data-label="Easy to use"><i class="fa fa-check-circle"></i></td>
        <td data-label="Night Vision"><i class="fa fa-check-circle"></i></td>
        <td data-label="Motion Sensors"><i class="fa fa-check-circle"></i></td>
        <td data-label="On-site patrol"><i class="fa fa-check-circle"></i></td>
        <td data-label="Search drone"><i class="fa fa-check-circle"></i></td>
        <td data-label="Monster deterrent"><i class="fa fa-check-circle"></i></td>
        <td><div class="view-more-product-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div></td>
      </tr>
      <tr>
        <td data-label="">
          <h4>Product Title</h4>
          <img src="http://fpoimg.com/300x300?text=Logo" alt="">
        </td>
        <td data-label="Monitoring"><i class="fa fa-check-circle"></i></td>
        <td data-label="Installation Price">$5</td>
        <td data-label="Monitoring Fees">$5</td>
        <td data-label="Contact Length">1 year</td>
        <td data-label="Customer Support"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td data-label="Easy to use"><i class="fa fa-check-circle"></i></td>
        <td data-label="Night Vision"><i class="fa fa-check-circle"></i></td>
        <td data-label="Motion Sensors"><i class="fa fa-check-circle"></i></td>
        <td data-label="On-site patrol"><i class="fa fa-check-circle"></i></td>
        <td data-label="Search drone"><i class="fa fa-check-circle"></i></td>
        <td data-label="Monster deterrent"><i class="fa fa-check-circle"></i></td>
         <td><div class="view-more-product-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div></td>
      </tr>
      <tr>
        <td data-label="">
          <h4>Product Title</h4>
          <img src="http://fpoimg.com/300x300?text=Logo" alt="">
        </td>
        <td data-label="Monitoring"><i class="fa fa-check-circle"></i></td>
        <td data-label="Installation Price">$5</td>
        <td data-label="Monitoring Fees">$5</td>
        <td data-label="Contact Length">1 year</td>
        <td data-label="Customer Support"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td data-label="Easy to use"><i class="fa fa-check-circle"></i></td>
        <td data-label="Night Vision"><i class="fa fa-check-circle"></i></td>
        <td data-label="Motion Sensors"><i class="fa fa-check-circle"></i></td>
        <td data-label="On-site patrol"><i class="fa fa-check-circle"></i></td>
        <td data-label="Search drone"><i class="fa fa-check-circle"></i></td>
        <td data-label="Monster deterrent"><i class="fa fa-check-circle"></i></td>
          <td><div class="view-more-product-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div></td>
      </tr>
      <tr>
        <td data-label="">
          <h4>Product Title</h4>
          <img src="http://fpoimg.com/300x300?text=Logo" alt="">
        </td>
        <td data-label="Monitoring"><i class="fa fa-check-circle"></i></td>
        <td data-label="Installation Price">$5</td>
        <td data-label="Monitoring Fees">$5</td>
        <td data-label="Contact Length">1 year</td>
        <td data-label="Customer Support"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td data-label="Easy to use"><i class="fa fa-check-circle"></i></td>
        <td data-label="Night Vision"><i class="fa fa-check-circle"></i></td>
        <td data-label="Motion Sensors"><i class="fa fa-check-circle"></i></td>
        <td data-label="On-site patrol"><i class="fa fa-check-circle"></i></td>
        <td data-label="Search drone"><i class="fa fa-check-circle"></i></td>
        <td data-label="Monster deterrent"><i class="fa fa-check-circle"></i></td>
         <td><div class="view-more-product-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div></td>
      </tr>
      <tr>
        <td data-label="">
          <h4>Product Title</h4>
          <img src="http://fpoimg.com/300x300?text=Logo" alt="">
        </td>
        <td data-label="Monitoring"><i class="fa fa-check-circle"></i></td>
        <td data-label="Installation Price">$5</td>
        <td data-label="Monitoring Fees">$5</td>
        <td data-label="Contact Length">1 year</td>
        <td data-label="Customer Support"><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i></td>
        <td data-label="Easy to use"><i class="fa fa-check-circle"></i></td>
        <td data-label="Night Vision"><i class="fa fa-check-circle"></i></td>
        <td data-label="Motion Sensors"><i class="fa fa-check-circle"></i></td>
        <td data-label="On-site patrol"><i class="fa fa-check-circle"></i></td>
        <td data-label="Search drone"><i class="fa fa-check-circle"></i></td>
        <td data-label="Monster deterrent"><i class="fa fa-check-circle"></i></td>
         <td><div class="view-more-product-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div></td>
      </tr>
    </tbody>
  </table>
  </div>
</section>

<!-- Product section -->

<!-- Product Item -->

<section class="product-section-cont">



<div class="container mix sort-support sort-features sort-contract" >
  <div class="product-item row">
    <div class=" col-sm-12 col-md-4 product-info-basic left-area">
        <img src="http://fpoimg.com/300x300?text=Product" alt="product logo">
        <h4 class="title">Product Title</h4>
        <div class="affiliate-link-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div>
    </div>
    <div class=" col-sm-12 col-md-8 ">
      <div class="product-featured-image" style="background-image: url(https://placeimg.com/1000/600/tech?t=1524695858082);"></div>
      <div class="product-sumary-cont">
        <h5>Branded home security products</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
      </div>
      <div class="col-xs-12 col-md-6">
        <h5>What we like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-6">
          <h5>What we don't like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Product Item -->
<div class="container mix sort-use sort-fees" >
  <div class="product-item row">
    <div class=" col-sm-12 col-md-4 product-info-basic left-area">
        <img src="http://fpoimg.com/300x300?text=Product" alt="product logo">
        <h4 class="title">Product Title</h4>
        <div class="affiliate-link-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div>
    </div>
    <div class=" col-sm-12 col-md-8 ">
      <div class="product-featured-image" style="background-image: url(https://placeimg.com/1000/600/tech?t=1524695858082);"></div>
      <div class="product-sumary-cont">
        <h5>Branded home security products</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
      </div>
      <div class="col-xs-12 col-md-6">
        <h5>What we like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-6">
          <h5>What we don't like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Product Item -->
<div class="container mix sort-price sort-features sort-fees sort-contract" >
  <div class="product-item row">
    <div class=" col-sm-12 col-md-4 product-info-basic left-area">
        <img src="http://fpoimg.com/300x300?text=Product" alt="product logo">
        <h4 class="title">Product Title</h4>
        <div class="affiliate-link-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div>
    </div>
    <div class=" col-sm-12 col-md-8 ">
      <div class="product-featured-image" style="background-image: url(https://placeimg.com/1000/600/tech?t=1524695858082);"></div>
      <div class="product-sumary-cont">
        <h5>Branded home security products</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
      </div>
      <div class="col-xs-12 col-md-6">
        <h5>What we like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-6">
          <h5>What we don't like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Product Item -->
<div class="container mix sort-price sort-support" >
  <div class="product-item row">
    <div class=" col-sm-12 col-md-4 product-info-basic left-area">
        <img src="http://fpoimg.com/300x300?text=Product" alt="product logo">
        <h4 class="title">Product Title</h4>
        <div class="affiliate-link-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div>
    </div>
    <div class=" col-sm-12 col-md-8 ">
      <div class="product-featured-image" style="background-image: url(https://placeimg.com/1000/600/tech?t=1524695858082);"></div>
      <div class="product-sumary-cont">
        <h5>Branded home security products</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
      </div>
      <div class="col-xs-12 col-md-6">
        <h5>What we like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-6">
          <h5>What we don't like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
    </div>
  </div>
</div>

<!-- Product Item -->
<div class="container mix sort-price sort-fees sort-contract" >
  <div class="product-item row">
    <div class=" col-sm-12 col-md-4 product-info-basic left-area">
        <img src="http://fpoimg.com/300x300?text=Product" alt="product logo">
        <h4 class="title">Product Title</h4>
        <div class="affiliate-link-btn">
        <a href="#" class="btn btn-primary btn-effect">
          <span>View Product</span>
                    <span><i class="icon icon-arrow-right"></i></span>
                </a>
      </div>
    </div>
    <div class=" col-sm-12 col-md-8 ">
      <div class="product-featured-image" style="background-image: url(https://placeimg.com/1000/600/tech?t=1524695858082);"></div>
      <div class="product-sumary-cont">
        <h5>Branded home security products</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suo enim quisque studio maxime ducitur. Quis suae urbis conservatorem Codrum, quis Erechthei filias non maxime laudat? Atqui pugnantibus et contrariis studiis consiliisque semper utens nihil quieti videre, nihil tranquilli potest. Unum nescio, quo modo possit, si luxuriosus sit, finitas cupiditates habere. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? Quid enim mihi potest esse optatius quam cum Catone, omnium virtutum auctore, de virtutibus disputare? Quacumque enim ingredimur, in aliqua historia vestigium ponimus. Duo Reges: constructio interrete. </p>
      </div>
      <div class="col-xs-12 col-md-6">
        <h5>What we like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
      <div class="col-sm-12 col-md-6">
          <h5>What we don't like</h5>
        <ul>
          <li>Lorem ipsum dolor sit amet</li>
          <li>Consectetur adipiscing elit</li>
          <li>Quacumque enim ingredimur</li>
          <li>Aliqua historia vestigium ponimus</li>
        </ul>
      </div>
    </div>
  </div>
</div>

</section>
<!-- Filtering section -->
<section class="container">

  <div class="filtering-choice-container col-xs-12 col-sm-12 col-md-10">


<div class="filter-heading-cont row">
  <div class="col-12">
    <h3 class="filter-heading-text">Still not sure? Choose your top three criteria when it comes to home security products</h3>
  </div>

</div>

    <!-- Displays the picked choices -->
    <div class="row picked-choices-cont">
      <div class="dropdown col-12">
            <span class="hida"></span>
            <div class="multiSel">
              <span class="categories-display-box"></span>
              <span class="categories-empty-box"></span>
            </div>
      </div>
    </div>

    <!-- Checkbox inputs to pick the categories -->
    <div class="row row-choice-picks">
      <div class="mutliSelect col-12">
                <div id="product-filter-select">
                    <span class="col-sm-6 col-md-4">
                        <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-price" value="Price" />Price
                      </div>
                      </span>
                    <span class="col-sm-6 col-md-4">
                      <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-features" value="Innovative Features" />Innovative Features
                      </div>
                      </span>
                    <span class="col-sm-6 col-md-4">
                        <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-fees" value="Monitoring Fees" />Monitoring Fees
                      </div>
                      </span>
                    <span class="col-sm-6 col-md-4">
                        <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-use" value="Easy to use" />Easy to use
                      </div>
                      </span>
                    <span class="col-sm-6 col-md-4">
                        <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-support" value="Customer Support" />Customer Support
                      </div>
                      </span>
                    <span class="col-sm-6 col-md-4">
                        <div class="category-choice-wrap">
                        <input type="checkbox" data-class="sort-contract" value="Contract Length" />Contract Length
                      </div>
                      </span>
                </div>
            </div>
    </div>

    <!-- Button used for filtering -->
    <div class="row row-sort-btn">
      <button id="filter-options" class="filter" data-filter="">See my best options</button></a>
    </div>
  </div>



</section>

<!-- SAFETY.COM DEPENDENCIES (NOT NEEDED) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel='stylesheet' id='authentic_vendors-css'  href='https://www.safety.com/wp-content/themes/authentic/dist/css/vendors.min.css?ver=1.0.9' type='text/css' media='all' />
<link rel='stylesheet' id='authentic_css-css'  href='https://www.safety.com/wp-content/themes/authentic/style.css?ver=1.0.9' type='text/css' media='all' />
<style media="screen">
  body{font-family:Lato,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:1rem;line-height:1.5;color:#777}#wp-calendar tfoot,.btn-primary,.btn-secondary,.comment-reply-link,.gallery-button,.link-more,.list-social a span,.nav-pills .nav-link,.nav-tabs .nav-link,.panel .card-header,.post-pagination-title,.title-share{font-weight:400;font-size:12px;letter-spacing:1px;text-transform:uppercase;font-family:Montserrat,Helvetica,Arial,sans-serif;font-style:normal}a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color:#231f20}a:active,a:focus,a:focus:active,a:hover,a:hover:active,h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color:#5a595e}.btn-primary{color:#EEE}.btn-primary:active,.btn-primary:active:focus,.btn-primary:active:hover,.btn-primary:focus,.btn-primary:hover{color:#FFF;background-color:#262f2f}.overlay .btn.btn-primary{color:#EEE;background-color:#262f2f}.overlay .btn.btn-primary:active,.overlay .btn.btn-primary:active:focus,.overlay .btn.btn-primary:active:hover,.overlay .btn.btn-primary:focus,.overlay .btn.btn-primary:hover{color:#FFF;background-color:#262f2f}.btn-primary,.nav-pills .nav-link.active,.nav-pills .nav-link.active:focus,.nav-pills .nav-link.active:hover{background-color:#262f2f}.btn-secondary{color:#5a595e;background-color:#EEE}.btn-secondary:active,.btn-secondary:active:focus,.btn-secondary:active:hover,.btn-secondary:focus,.btn-secondary:hover{color:#231f20;background-color:#f8f8f8}.overlay .btn.btn-secondary{color:#5a595e;background-color:#EEE}.overlay .btn.btn-secondary:active,.overlay .btn.btn-secondary:active:focus,.overlay .btn.btn-secondary:active:hover,.overlay .btn.btn-secondary:focus,.overlay .btn.btn-secondary:hover{color:#231f20;background-color:#f8f8f8}.post-standard h2,.site-footer h2,h1{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-style:normal;font-size:2rem;line-height:1;letter-spacing:-.1rem;text-transform:none;color:#231F20}.page-header-archive h1,.post-featured h2,h2,h3,h4{font-weight:700;letter-spacing:-.05rem;text-transform:none;color:#231F20;font-family:Montserrat,Helvetica,Arial,sans-serif;font-style:normal;line-height:1}.page-header-archive h1,.post-featured h2,h2{font-size:1.5rem}h3{font-size:1.25rem}h4{font-size:1rem}.comment .fn,h5,h6{font-size:15px}h5{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;line-height:1;letter-spacing:-1px;text-transform:uppercase;color:#231F20}.comment .fn,.comment-reply-title,.list-categories,.nav-links,.title-comments,.title-related,.title-trending,.title-widget,h6{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;line-height:1;letter-spacing:-1px;text-transform:none;color:#231F20;font-style:normal}.comment-reply-title,.list-categories,.nav-links,.title-comments,.title-related,.title-trending,.title-widget{font-size:16px}.content{font-family:Lato,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:1rem;line-height:1.5;color:#777}.content .lead,.content blockquote{font-family:Montserrat,Helvetica,Arial,sans-serif;line-height:1.25;letter-spacing:-.1rem;color:#231F20}.content .lead{font-weight:700;font-style:normal;font-size:1.75rem}.content .dropcap:first-letter{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:2.5rem}.content blockquote{font-weight:700;font-style:normal;font-size:1.75rem}.page-header .post-excerpt,.post-number span:first-child{font-family:Lato,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal}#wp-calendar caption,.comment-metadata,.logged-in-as,.post-categories,.post-count,.post-meta,.post-tags,.share-title,.sub-title,.tagcloud,.timestamp,.widget-about-lead,blockquote cite,label{font-family:Lato,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:1.5;letter-spacing:0;text-transform:uppercase;color:#A0A0A0}.page-header .post-excerpt{font-size:1.5rem;line-height:1.25;letter-spacing:0;color:#231F20}.post-number span:first-child{font-size:1.25rem;line-height:1}.header-logo img{width:300px}.header-content{height:100px}.navbar-brand>img{height:25px}.navbar-primary .navbar-nav>li.menu-item>a,.navbar-search,.widget_archive li,.widget_categories li,.widget_meta li a,.widget_nav_menu .menu>li.menu-item>a,.widget_pages .page_item a,select{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:1.5;letter-spacing:1px;text-transform:uppercase}.navbar-primary .sub-menu a,.navbar-secondary .navbar-nav>li.menu-item>a,.navbar-secondary .sub-menu a,.widget_categories .children li a,.widget_nav_menu .sub-menu a{font-family:Lato,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:1.5;text-transform:uppercase}.navbar-primary .sub-menu a,.widget_categories .children li a,.widget_nav_menu .sub-menu a{letter-spacing:0}.navbar-secondary .navbar-nav>li.menu-item>a{letter-spacing:1px}.navbar-secondary .sub-menu a{letter-spacing:0}.site-footer{background-color:#262F2F;color:#D1D1D1}.site-footer .owl-dot{background-color:#D1D1D1}.site-footer .title-widget{color:#777}.site-footer #wp-calendar thead th,.site-footer .owl-dot.active,.site-footer a,.site-footer h2{color:#FFF}.site-footer .btn,.site-footer a:focus:active,.site-footer a:hover,site-footer a:hover:active{color:#A0A0A0}.site-footer #wp-calendar tbody td a,.site-footer #wp-calendar tfoot tr #prev+.pad:after,.site-footer .authentic_widget_subscribe .widget-body:before,.site-footer .title-widget:after{background-color:#242424}.footer-section+.footer-section>.container>*,.site-footer #wp-calendar tbody td,.site-footer #wp-calendar tbody td#today:after,.site-footer .widget,.site-footer .widget.authentic_widget_twitter .twitter-actions,.site-footer .widget_archive>ul>li:not(:first-child),.site-footer .widget_categories>ul>li:not(:first-child),.site-footer .widget_meta li:not(:first-child) a,.site-footer .widget_nav_menu .menu>.menu-item:not(:first-child)>a,.site-footer .widget_pages li:not(:first-child) a,.site-footer .widget_recent_comments li:not(:first-child),.site-footer .widget_recent_entries li:not(:first-child){border-top-color:#242424}.site-footer .widget.authentic_widget_twitter{border-color:#242424}.site-footer .btn:active,.site-footer .btn:active:focus,.site-footer .btn:active:hover,.site-footer .btn:focus,.site-footer .btn:hover{color:#FFF;background-color:#141414}.site-footer .authentic_widget_posts .numbered .post-number,.site-footer .btn,.site-footer select{background-color:#242424}.navbar-footer .navbar-nav>li.menu-item>a{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:400;font-style:normal;font-size:12px;line-height:1.5;letter-spacing:1px;text-transform:uppercase}.footer-logo{max-width:250px}@media (min-width:992px){#search input[type=search],.owl-featured h2,.page-header h1,.post-featured h2,.post-header h1,.post-standard h2{font-family:Montserrat,Helvetica,Arial,sans-serif;font-weight:700;font-style:normal;text-transform:none}.page-header h1,.post-header h1,.post-standard h2{font-size:3rem;line-height:1;letter-spacing:-.2rem;color:#231F20}.post-featured h2{font-size:2rem;line-height:1;letter-spacing:-.1rem;color:#231F20}#search input[type=search]{font-size:4.25rem;letter-spacing:-.25rem}.archive .site-content .container,.home .site-content .container{width:1140px}.page.layout-fullwidth .site-content .container,.single.layout-fullwidth .site-content .container{width:940px},.single.layout-sidebar-left .site-content .container,.single.layout-sidebar-right .site-content .container{max-width:1140px},.page.layout-sidebar-left .site-content .container,.page.layout-sidebar-right .site-content .container{max-width:1140px}.owl-featured .owl-slide .overlay-container{height:600px}.owl-featured h2{font-size:3rem;line-height:1;letter-spacing:-.2rem}}@media (min-width:1200px){.owl-center .owl-slide{width:1100px}.owl-boxed{max-width:1100px}}
</style>
<!-- END SAFETY.COM DEPENDENCIES (NOT NEEDED)  -->

</body>
</html>


/*Downloaded from https://www.codeseek.co/JonathanRoyere/safetycom-ELKqWE */
    /*
STYLES TO ADD
ADD those styles to the main css
For SCSS version of those style look into the SCSS folder

 */


.product-page-intro {
  margin: 2rem 0;
}

.product-section-cont{text-align: center;}
.product-section-cont .container {
 text-align: left;
 display: none;
}



.product-section-cont.fail:after {
  display: block;
  content: 'No Products matching your selection where found.';
  font-size: 1.3rem;
  margin: 1rem 0;
}


/*  GRID CSS */
.product-info-table {
  padding: 2rem 0;
  border-bottom: 1px solid #dadada;
}
.product-info-table .post-more {
  margin: .5rem 0;
}
.product-info-table table {
  margin: 0 auto;
}
.product-info-table table caption {
  font-size: 1.5rem;
  margin: 0.5rem;
}
.product-info-table tbody tr td:first-of-type {
  min-height: 250px;
}
.product-info-table tbody tr td:first-of-type img {
  max-width: 150px;
}
.product-info-table tbody tr td:last-of-type {
  min-height: 75px;
  border-bottom: 0;
}
.product-info-table thead tr th:first-of-type {
  min-height: 250px;
}
.product-info-table thead tr th:last-of-type {
  min-height: 75px;
  border-bottom: 0;
}
.product-info-table table tr {
  padding: 0.5rem;
}
.product-info-table table th, .product-info-table table td {
  padding: .625rem;
}
.product-info-table table thead th {
  border-top: 0;
}
.product-info-table table th:first-child, .product-info-table table td:first-child {
  border-left: 0;
}
.product-info-table tbody tr, .product-info-table thead tr {
  padding: 0;
  border-right: 0;
}
@media screen and (max-width: 1024px) {
  .product-info-table table:not(.preset) {
    border-collapse: collapse;
    border: 0;
    width: 100%;
  }
  .product-info-table tbody tr td:first-of-type {
    text-align: center;
  }
  .product-info-table tbody tr td:last-of-type {
    text-align: center;
  }
  .product-info-table thead tr th:first-of-type {
    min-height: 250px;
  }
  .product-info-table table:not(.preset) thead, .product-info-table table:not(.preset) th {
    border: 0;
    height: 1px;
    width: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset();
    clip-path: inset(100%);
  }
  .product-info-table table:not(.preset) tr {
    display: block;
    float: left;
    width: calc(50% - 2rem);
    border-bottom: 1px solid #dadada;
    margin: 1rem;
  }
  .product-info-table table:not(.preset) td {
    display: block;
    border: 0;
    text-align: right;
    min-height: 1.5rem;
  }
  .product-info-table table:not(.preset) td:before {
    content: attr(data-label);
    float: left;
    font-weight: 700;
  }
  .product-info-table table:not(.preset) td:last-child {
    border-bottom: 0;
  }
}
@media screen and (min-width: 1024px) {
  .product-info-table table.horizontal, .product-info-table table.scrollable {
    display: -webkit-box;
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0.5rem;
  }
  .product-info-table table.horizontal caption, .product-info-table table.scrollable caption {
    -webkit-box-flex: 1;
    max-width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
  .product-info-table table.horizontal thead, .product-info-table table.horizontal tbody, .product-info-table table.scrollable thead, .product-info-table table.scrollable tbody {
    display: -webkit-box;
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: -webkit-flex;
    display: flex;
  }
  .product-info-table table.horizontal thead, .product-info-table table.scrollable thead {
    z-index: 999;
  }
  .product-info-table table.horizontal tr, .product-info-table table.scrollable tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .product-info-table table.horizontal thead, .product-info-table table.horizontal tbody {
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .product-info-table table.horizontal tbody {
    overflow: auto;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
  }
  .product-info-table table.horizontal tr {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  .product-info-table table.horizontal th, .product-info-table table.horizontal td {
    width: auto;
    border-bottom: .0625rem solid #c9c9c9;
  }
  .product-info-table table.horizontal th:not(:first-child), .product-info-table table.horizontal td:not(:first-child) {
    border-top: 0;
  }
  .product-info-table table.horizontal th {
    text-align: right;
  }
  .product-info-table table.horizontal thead tr:first-child {
    padding-left: 0;
  }
  .product-info-table table.horizontal tbody tr:first-child > td {
    padding-left: 1.25rem;
  }
  .product-info-table table.scrollable {
    overflow: auto;
    max-height: 400px;
    border: 0;
    padding-top: 0;
  }
  .product-info-table table.scrollable thead, .product-info-table table.scrollable tbody {
    -webkit-box-flex: 1;
    max-width: 100%;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    border: 0.0625rem solid #c9c9c9;
  }
  .product-info-table table.scrollable tbody {
    border-top: 0;
    margin-top: -0.0625rem;
  }
  .product-info-table table.scrollable tr {
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    padding: 0;
  }
  .product-info-table table.scrollable th, .product-info-table table.scrollable td {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    flex: 1 0 0%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-info-table table.scrollable thead {
    position: sticky;
    top: 0;
  }
}
@media screen and (max-width: 1024px) {
  .product-info-table table.horizontal.preset, .product-info-table table.scrollable.preset {
    display: -webkit-box;
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: -webkit-flex;
    display: flex;
    -webkit-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    padding: 0.5rem;
  }
  .product-info-table table.horizontal.preset caption, .product-info-table table.scrollable.preset caption {
    -webkit-box-flex: 1;
    max-width: 100%;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
  }
  .product-info-table table.horizontal.preset thead, .product-info-table table.horizontal.preset tbody, .product-info-table table.scrollable.preset thead, .product-info-table table.scrollable.preset tbody {
    display: -webkit-box;
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    display: -webkit-flex;
    display: flex;
  }
  .product-info-table table.horizontal.preset thead, .product-info-table table.scrollable.preset thead {
    z-index: 999;
  }
  .product-info-table table.horizontal.preset tr, .product-info-table table.scrollable.preset tr {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .product-info-table table.horizontal.preset thead, .product-info-table table.horizontal.preset tbody {
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
  }
  .product-info-table table.horizontal.preset tbody {
    overflow: auto;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex: 1 0 0;
    flex: 1 0 0;
  }
  .product-info-table table.horizontal.preset tr {
    -webkit-box-flex: 1;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
  }
  .product-info-table table.horizontal.preset th, .product-info-table table.horizontal.preset td {
    width: 100%;
    border: 0.0625rem solid #c9c9c9;
  }
  .product-info-table table.horizontal.preset th:not(:first-child), .product-info-table table.horizontal.preset td:not(:first-child) {
    border-top: 0;
  }
  .product-info-table table.horizontal.preset th {
    text-align: right;
  }
  .product-info-table table.horizontal.preset thead tr:first-child {
    padding-left: 0;
  }
  .product-info-table table.horizontal.preset tbody tr:first-child > td {
    padding-left: 1.25rem;
  }
  .product-info-table table.scrollable.preset {
    overflow: auto;
    max-height: 400px;
    border: 0;
    padding-top: 0;
  }
  .product-info-table table.scrollable.preset thead, .product-info-table table.scrollable.preset tbody {
    -webkit-box-flex: 1;
    max-width: 100%;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    border: 0.0625rem solid #c9c9c9;
  }
  .product-info-table table.scrollable.preset tbody {
    border-top: 0;
    margin-top: -0.0625rem;
  }
  .product-info-table table.scrollable.preset tr {
    -webkit-box-flex: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    -webkit-flex: 0 0 100%;
    flex: 0 0 100%;
    padding: 0;
  }
  .product-info-table table.scrollable.preset th, .product-info-table table.scrollable.preset td {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    flex: 1 0 0%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .product-info-table table.scrollable.preset thead {
    position: sticky;
    top: 0;
  }
}
.product-info-table table.striped tr:nth-of-type(2n) > td {
  background: #e5e5e5;
}
@media screen and (max-width: 1024px) {
  .product-info-table table.striped:not(.preset) tr:nth-of-type(2n) {
    background: #e5e5e5;
  }
}
@media (max-width: 769px) {
  .product-info-table table:not(.preset) tr {
    float: left;
    width: 100%;
    border: 0;
    padding: 1rem;
    margin: 0;
  }
}


/*Product Section*/
/*  Product Info section */
.product-featured-image {
  min-height: 10rem;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

  .product-section-cont {
    padding-top: 4rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid #dadada;
  }

  .product-sumary-cont h5 {
  margin: 2rem 0 ;
}

.product-info-basic {
  text-align: center;
  padding-bottom: 3rem;
}

section .product-info-basic h4.title {
  font-size: 1.7rem;
  margin: 2rem 0;
  font-weight: 300;
}

.product-sumary-cont {
  margin-bottom: 2rem;
}


/* Custom grid classes  */
/* Don’t honor column widths until viewport is at least 600px wide */
/* Clear floats */
.container:before,
.container:after,
.wrapper:before,
.wrapper:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.container:after,
.wrapper:after,
.row:after {
  clear: both;
}


/* Sorting Styles area */

#product-filter-select {
  margin: 0;
  display: block;
}
.empty-choices {
 border: 1px dashed #dadada;
}


.filter-btn {
  padding: .5rem;
  text-align: center;
}

  .filter-btn  > span {
    display: block;
    padding: 1rem;
    border-radius: 5px;
  }


  .mutliSelect  span {
    list-style-type: none;
    padding: .5rem;
  }

  .category-choice-wrap {
    padding: 1rem;
    background: #dadada;
    color: #666;
    text-align: center;
  }

    .category-choice-wrap:hover {
      cursor: pointer;
    }

  .category-choice-wrap.active {
    background: #333;
    color: #fff;
  }

  .empty-choices h3 {
    margin: 0;
  }

  .filter-choice {
    background: #06f;
    border: 1px solid #06f;
    font-size: 1.2rem;
  }

  .filter-choice h3 {
    color: #fff;
    margin: 0;
    font-weight: 300;
  }

  .picked-choices-cont {
    margin-bottom: 1rem;
  }


  .container .filtering-choice-container {
    margin: 3rem 0;
    padding: 3rem 2rem;
    border: 3px solid #06f;
  }

  .row-sort-btn {
  text-align:  center;
  margin-top: 1.5rem;
}


.row-sort-btn button {
  margin: 0.7rem auto;
  padding: 1rem 2rem;
  color: #fff;
  background: #06f;
  border: 0;
  border-radius: 3px;
  transition: .3s ease-in-out;
}

.row-sort-btn button:hover {
  cursor: pointer;
  background: #0052cc;
}

.filter-heading-cont {
  text-align: center;
}

.filter-heading-text , h3.filter-heading-text {
  color: #06f;
  font-size: 1.4;
  line-height: 1.8;
  font-weight: 600
}


@media (min-width: 769px) {
  .row {
    margin-right: -1.333%;
    margin-left: -1.333%;
  }

  [class^="col-"],
  [class*=" col-"]{
    position: relative;
    float: left;
    padding-right: 1.333%;
    padding-left: 1.333%;
    min-height: 1px;
    width: 100%;
  }

  /* Remove space between `.col-*` elements with `.no-gutter` class */
  .row.no-gutter {
    margin-left: 0;
    margin-right: 0;
  }

  .row.no-gutter [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
  }



  .product-section-cont .left-area {
    padding-right: 6rem;
  }

  .filtering-choice-container , .product-page-intro { left: 8.333%;  }


    .filter-btn  > span {
      padding: 2rem 0;
    }

    .category-choice-wrap {
      padding: 2rem 0;
    }

    .picked-choices-cont {
      margin-bottom: 4rem;
    }

    .filter-heading-cont > div {
      padding: 2rem 7.5rem;
    }

  /* Column widths */


}

/* Clear floats */
.container:before,
.container:after,
.wrapper:before,
.wrapper:after,
.row:before,
.row:after {
  display: table;
  content: " ";
}

.container:after,
.wrapper:after,
.row:after {
  clear: both;
}

/*  Sorting loader */
body {background:#000}
.loading {
  -webkit-animation:fadein 2s;
     -moz-animation:fadein 2s;
       -o-animation:fadein 2s;
          animation:fadein 2s;
}
@-moz-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@-webkit-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@-o-keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}
@keyframes fadein {
  from {opacity:0}
  to {opacity:1}
}

.loading-cont {
  position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 9999;
background: rgba(255,255,255,0.8);
}

.spinner-wrapper {
  min-width:100%;
  min-height:100%;
  height:100%;
  top:0;
  left:0;
  background:rgba(255,255,255,0.93);
  position:absolute;
  z-index:300;
}

.spinner-text {position:absolute;top:41.5%;left:47%;margin:16px 0 0 35px;font-size:9px;font-family:Arial;color:#BBB;letter-spacing:1px;font-weight:700}
.spinner {
  margin:0;
  display:block;
  position:absolute;
  left:45%;
  top:40%;
  border:25px solid rgba(100,100,100,0.2);
  width:1px;
  height:1px;
  border-left-color:transparent;
  border-right-color:transparent;
  -webkit-border-radius:50px;
     -moz-border-radius:50px;
          border-radius:50px;
  -webkit-animation:spin 1.5s infinite;
     -moz-animation:spin 1.5s infinite;
          animation:spin 1.5s infinite;
}

@-webkit-keyframes spin {
  0%,100% {-webkit-transform:rotate(0deg) scale(1)}
  50%     {-webkit-transform:rotate(720deg) scale(0.6)}
}

@-moz-keyframes spin  {
  0%,100% {-moz-transform:rotate(0deg) scale(1)}
  50%     {-moz-transform:rotate(720deg) scale(0.6)}
}
@-o-keyframes spin  {
  0%,100% {-o-transform:rotate(0deg) scale(1)}
  50%     {-o-transform:rotate(720deg) scale(0.6)}
}
@keyframes spin  {
  0%,100% {transform:rotate(0deg) scale(1)}
  50%     {transform:rotate(720deg) scale(0.6)}
}



/*Downloaded from https://www.codeseek.co/JonathanRoyere/safetycom-ELKqWE */
    
  (function($){
    $(document).ready(function() {
      $(".dropdown dt a").on('click', function() {
      $(".dropdown dd ul").slideToggle('fast');
      });

      $(".dropdown dd ul li a").on('click', function() {
      $(".dropdown dd ul").hide();
      });

      $("#product-filter-select span .category-choice-wrap").click(function() {
        $(this).children('input').trigger('click');
      })

      function getSelectedValue(id) {
      return $("#" + id).find("dt a span.value").html();
      }



      // calculate maissing containers to add the empty ones
      function calculate_empty_categories() {
        $('.empty-choices').parent().remove();
        $('.empty-choices').remove();

      var selected = $('.multiSel .categories-display-box > span').length;


      if(3 > selected) {
       var needed =  3 - selected;
       for(var i = 0;  i < needed; i++) {
         $('<span class=" col-sm-4 col-md-4 filter-btn"><span class="empty-choices"><h3>' + (3 - i) + '</h3></span></span>').prependTo('.multiSel .categories-empty-box');
       }
      }

      };

      calculate_empty_categories();


      // add filter classes for the see options button trigger sort onclick
      function build_sort() {
      var classes = '';
      $('.mutliSelect input[type=checkbox]:checked').each(function() {

        classes += '.'+  $(this).attr('data-class');
      })


      $("#filter-options").attr('data-filter' , classes);
      }




      //calculate_empty_cats(); // run

      $(document).bind('click', function(e) {
      var $clicked = $(e.target);
      if (!$clicked.parents().hasClass("dropdown")) $(".dropdown div ul").hide();
      });



      $('.mutliSelect input[type="checkbox"]').on('click', function() {
      if ($('.mutliSelect input[type=checkbox]:checked').length > 3) {
            $(this).prop('checked', false);
          //  alert("allowed only 3");
        }

      var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(),
        title = $(this).val() + "";

      if ($(this).is(':checked')) {
        $(this).parent().addClass('active');


        var html = '<span class=" col-sm-4 col-md-4 filter-btn"><span class="filter-choice" title="' + title + '"><h3>' + title + '</h3></span></span>';
        $('.multiSel .categories-display-box').prepend(html);
        $(".hida").hide();
      } else {
        $(this).parent().removeClass('active');
        $('span[title="' + title + '"]').parent().remove();
        $('span[title="' + title + '"]').remove();
        var ret = $(".hida");
        $('.dropdown div a').prepend(ret);

      }
      calculate_empty_categories();
      build_sort();
      });



      //Mixitup styles
    $('.product-section-cont').mixItUp({
         animation: {
           duration: 400,
           effects: 'fade translateY(600%) stagger(35ms)',
           easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
           reverseOut: true
         },
         controls: {
           enable: false
         }
       });

       //removing spinner with delay to not show scroll
       $('.product-section-cont').on('mixEnd', function(e, state){


        setTimeout(function(){
        $('.loading-cont').css('display', 'none');
         }, 600);

     });


       $("#filter-options").click(function() {

         $('.loading-cont').css('display', 'block');
         var $btn = $(this);
          var filter = $btn.attr('data-filter');
          var offset = -100; //Offset of 20px


         $btn.addClass('active').siblings().removeClass('active');

             $('.product-section-cont').mixItUp('filter', 'none', function(){
             $('.product-section-cont').mixItUp('filter', filter);
         });


         //scroll to content
                      $('html, body').animate({
                          scrollTop: $(".product-section-cont").offset().top + offset
                      }, 0);

       });



       //append the loading -o-animation
       $('html').append('<div class="loading-cont" style="display: none;"><div class="spinner-wrapper"><span class="spinner-text">LOADING</span><span class="spinner"></span></div></div>');


    }) // end doc ready




     })(jQuery);


Comments