sss

Signed-off-by: Jeff <jeff@gotenzing.com>

@@ -11,26 +11,63 @@
 
 
 ?>
 ?>
 <?php if( have_rows('work') ): ?>  
 <?php if( have_rows('work') ): ?>  
-    <?php $rowCount = count( get_field('work') ); //GET THE COUNT ?>
-
+    <?php $rowCount = count( get_field('work') ); //GET THE COUNT ?> 
 	<?php $i = 1; ?>
 	<?php $i = 1; ?>
-    <div class="tiles">          
-    <?php while( the_repeater_field('work') ): ?>
-        <div class="tile <?php if($i == $rowCount): ?>  last	<?php endif; ?>">
-            <div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
-                <div class="hover_content">
-                <?php the_sub_field('hover_text'); ?>
-                </div> 
-                <div class="tile_content"> 
-                    <?php the_sub_field('content'); ?>
+        <div class="tiles">          
+            <?php while( the_repeater_field('work') ): ?>
+            <div class="tile <?php if($i == $rowCount): ?>  last <?php endif; ?>">
+                <div class="tile_image" style="background-image:url(<?php the_sub_field('background_image'); ?>);">
+                    <div class="hover_content">
+                    <?php the_sub_field('hover_text'); ?>
+                    </div> 
+                    <div class="tile_content">
+                        <div class="title-mobile">   
+                           <h3> <?php the_sub_field('content_title'); ?> </h3> 
+                        </div>
+                        <div class="image">
+                            <?php $image = get_sub_field('content_image'); ?>
+                            <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
+                        </div>  
+                        <div class="text">   
+                            <div>
+                                <h3><?php the_sub_field('content_title'); ?> </h3> 
+                                <?php the_sub_field('content'); ?>  
+                            </div>
+                            <a class="whole-story" href="#">Get the whole story… </a>
+                        </div>
+                    </div>
                 </div>
                 </div>
-            </div> 
-        </div>
+                <div class="tile_content mobile">
+                    <div class="title-mobile">   
+                        <h3> <?php the_sub_field('content_title'); ?> </h3> 
+                    </div>
+                    <div class="image">
+                        <?php $image = get_sub_field('content_image'); ?>
+                        <img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
+                    </div>  
+                    <div class="text">   
+                        <div>
+                            <h3><?php the_sub_field('content_title'); ?> </h3> 
+                            <?php the_sub_field('content'); ?>  
+                        </div>
+                        <a class="whole-story" href="#">Get the whole story… </a>
+                    </div>
+                </div> 
+            </div>
         <?php $i++; ?>
         <?php $i++; ?>
     <?php endwhile; ?>
     <?php endwhile; ?>
 <br clear="both">
 <br clear="both">
 </div>
 </div>
+
 <?php endif; ?>
 <?php endif; ?>
 
 
 
 
-    
+<!--     
+<div class="tiles">	 
+  <div class="tile"><span>1</span></div>	 
+  <div class="tile"><span>2</span></div>	 
+  <div class="tile"><span>3</span></div>	 
+  <div class="tile"><span>4</span></div>	 
+  <div class="tile"><span>5</span></div>	 
+  <div class="tile last"><span>6</span></div>
+</div> -->
\ No newline at end of file

@@ -15764,14 +15764,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   margin-left: -12px;
   margin-left: -12px;
   margin-right: -12px;
   margin-right: -12px;
 }
 }
+@media (max-width: 900px) {
+  .the-numbers {
+    margin-left: -50px;
+    margin-right: -50px;
+  }
+}
 .the-numbers .wp-block-columns {
 .the-numbers .wp-block-columns {
   gap: 0em;
   gap: 0em;
 }
 }
+@media (max-width: 900px) {
+  .the-numbers .wp-block-columns {
+    flex-wrap: wrap !important;
+  }
+}
 .the-numbers .wp-block-column {
 .the-numbers .wp-block-column {
   padding: 50px;
   padding: 50px;
   background-color: #7AA6AD;
   background-color: #7AA6AD;
   color: #fff;
   color: #fff;
 }
 }
+@media (max-width: 900px) {
+  .the-numbers .wp-block-column {
+    flex-basis: 50% !important;
+  }
+}
 .the-numbers .wp-block-column:nth-of-type(2) {
 .the-numbers .wp-block-column:nth-of-type(2) {
   background-color: #C2B59B;
   background-color: #C2B59B;
   color: #666666;
   color: #666666;
@@ -15820,13 +15836,13 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   line-height: 72px;
   line-height: 72px;
   font-weight: 400;
   font-weight: 400;
   margin-bottom: 20px;
   margin-bottom: 20px;
-  padding: 0px 2%;
+  padding: 0px 25%;
 }
 }
 .the-work p.first-of-type {
 .the-work p.first-of-type {
   color: #fff;
   color: #fff;
   font-size: 20px;
   font-size: 20px;
   line-height: 24px;
   line-height: 24px;
-  padding: 0px 20%;
+  padding: 0px 25%;
 }
 }
 
 
 .wp-block-getwid-tabs__nav-link {
 .wp-block-getwid-tabs__nav-link {
@@ -15917,19 +15933,30 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
 
 
 .tiles {
 .tiles {
   display: grid;
   display: grid;
-  grid-template-columns: auto auto auto;
-  -moz-column-width: 33%;
-  column-width: 33%;
+  grid-template-columns: 33.3% 33.3% 33.3%;
+  -moz-column-width: 33.3%;
+  column-width: 33.3%;
   -moz-column-gap: 0px;
   -moz-column-gap: 0px;
   column-gap: 0px;
   column-gap: 0px;
   grid-auto-flow: dense;
   grid-auto-flow: dense;
-  grid-template-rows: masonry;
-  margin-top: 40px;
-  max-width: 100vw;
+  max-width: 1300px;
   margin: auto;
   margin: auto;
+  margin-top: 40px;
   transition: 0.5s;
   transition: 0.5s;
   background: #333;
   background: #333;
 }
 }
+@media (max-width: 1300px) {
+  .tiles {
+    max-width: 100vw;
+  }
+}
+@media (max-width: 800px) {
+  .tiles {
+    width: 100vw;
+    display: block;
+    height: auto;
+  }
+}
 
 
 .tile {
 .tile {
   display: inline-grid;
   display: inline-grid;
@@ -15940,6 +15967,12 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
   vertical-align: top;
   vertical-align: top;
   grid-column-end: span 1;
   grid-column-end: span 1;
   grid-row-end: span 1;
   grid-row-end: span 1;
+  height: 275px;
+}
+@media (max-width: 800px) {
+  .tile {
+    display: block;
+  }
 }
 }
 .tile .tile_image {
 .tile .tile_image {
   background-size: cover;
   background-size: cover;
@@ -15950,41 +15983,200 @@ body.understrap-no-sidebar .wp-block-cover.alignwide {
 }
 }
 .tile .hover_content {
 .tile .hover_content {
   opacity: 0;
   opacity: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 20px;
+  background-color: rgba(0, 0, 0, 0.6);
+  height: 100%;
+}
+@media (max-width: 800px) {
+  .tile .hover_content {
+    opacity: 1;
+  }
+}
+.tile .hover_content h3, .tile .hover_content .h3 {
+  color: #fff;
+  font-size: 20px;
+  line-height: 24px;
+  text-transform: uppercase;
+  font-family: "TradeGothic";
+  text-align: left;
+}
+.tile .hover_content p {
+  color: #fff;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: "TradeGothic";
+  max-width: 70%;
+  text-align: left;
 }
 }
 .tile .tile_content {
 .tile .tile_content {
   display: none;
   display: none;
+  flex-direction: column;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-wrap: wrap;
+  padding: 70px;
+}
+@media (max-width: 1300px) {
+  .tile .tile_content {
+    padding: 40px;
+  }
+}
+.tile .tile_content h3, .tile .tile_content .h3 {
+  color: #fff;
+  font-size: 30px;
+  line-height: 36px;
+  text-transform: uppercase;
+  font-family: "TradeGothic";
+  text-align: left;
+}
+@media (max-width: 800px) {
+  .tile .tile_content h3, .tile .tile_content .h3 {
+    text-align: center;
+    font-size: 20px;
+    line-height: 24px;
+    margin-bottom: 30px;
+  }
+}
+.tile .tile_content p {
+  color: #fff;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 400;
+  font-family: "TradeGothic";
+  text-align: left;
+}
+@media (max-width: 800px) {
+  .tile .tile_content p {
+    text-align: center;
+    font-size: 16px;
+    line-height: 19px;
+  }
+}
+.tile .tile_content .image {
+  height: 100%;
+  width: 40%;
+  display: inline-block;
+  margin-right: 30px;
+}
+@media (max-width: 800px) {
+  .tile .tile_content .image {
+    width: 80%;
+    height: auto;
+    margin: auto;
+  }
+}
+.tile .tile_content .tile_content.mobile {
+  display: none;
+}
+.tile .tile_content .title-mobile {
+  display: none;
+}
+@media (max-width: 800px) {
+  .tile .tile_content .title-mobile {
+    display: block;
+  }
+}
+.tile .tile_content .text {
+  display: flex;
+  flex-direction: column;
+  width: 55%;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  height: 90%;
+}
+@media (max-width: 800px) {
+  .tile .tile_content .text {
+    display: block;
+    margin-top: 30px;
+    height: auto;
+    width: 100%;
+  }
+}
+@media (max-width: 800px) {
+  .tile .tile_content .text h3, .tile .tile_content .text .h3 {
+    display: none;
+  }
+}
+.tile .tile_content .text .whole-story {
+  align-items: flex-end;
+  display: flex;
+  align-content: flex-end;
+  flex-wrap: wrap;
+  font-size: 24px;
+  line-height: 29px;
+  color: #fff;
+  text-decoration: none;
+  font-weight: 400;
+}
+@media (max-width: 800px) {
+  .tile .tile_content .text .whole-story {
+    display: block;
+    text-align: center;
+    margin-top: 100px;
+  }
+}
+.tile .tile_content .text .whole-story:hover {
+  text-decoration: underline;
 }
 }
 
 
 .tile:hover .hover_content {
 .tile:hover .hover_content {
   opacity: 1;
   opacity: 1;
-  background-color: rgba(0, 0, 0, 0.6);
-  height: 100%;
 }
 }
 
 
 .tile.expand {
 .tile.expand {
   grid-column-end: span 2;
   grid-column-end: span 2;
   grid-row-end: span 2;
   grid-row-end: span 2;
+  height: 550px;
+}
+@media (max-width: 800px) {
+  .tile.expand {
+    height: auto;
+  }
 }
 }
 .tile.expand .hover_content {
 .tile.expand .hover_content {
   display: none;
   display: none;
 }
 }
 .tile.expand .tile_content {
 .tile.expand .tile_content {
-  margin-top: -16px;
-  display: block;
+  display: flex;
   height: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.7);
   background-color: rgba(0, 0, 0, 0.7);
 }
 }
+@media (max-width: 800px) {
+  .tile.expand .tile_content {
+    display: none;
+  }
+}
 .tile.expand .tile_image {
 .tile.expand .tile_image {
   height: 550px;
   height: 550px;
 }
 }
-
-.tile.expand:hover .hover_content {
+@media (max-width: 800px) {
+  .tile.expand .tile_image {
+    height: 275px;
+  }
+}
+.tile.expand .tile_content.mobile {
   display: none;
   display: none;
+  background-color: #333;
 }
 }
-.tile.expand:hover .tile_content {
-  display: block;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.7);
+@media (max-width: 800px) {
+  .tile.expand .tile_content.mobile {
+    display: block;
+  }
+}
+
+.last-expand .tile:nth-of-type(4) {
+  grid-column-end: 2;
+}
+.last-expand .tile:nth-of-type(5) {
+  grid-row-end: 4;
+  grid-column-end: 2;
 }
 }
 
 
 /*# sourceMappingURL=child-theme.css.map */
 /*# sourceMappingURL=child-theme.css.map */
\ No newline at end of file

@@ -24,17 +24,17 @@ $container = get_theme_mod( 'understrap_container_type' );
 		<!-- Your site branding in the menu -->
 		<!-- Your site branding in the menu -->
 		<?php get_template_part( 'global-templates/navbar-branding' ); ?>
 		<?php get_template_part( 'global-templates/navbar-branding' ); ?>
 
 
-		<button
+		<!-- <button
 			class="navbar-toggler"
 			class="navbar-toggler"
 			type="button"
 			type="button"
 			data-bs-toggle="collapse"
 			data-bs-toggle="collapse"
 			data-bs-target="#navbarNavDropdown"
 			data-bs-target="#navbarNavDropdown"
 			aria-controls="navbarNavDropdown"
 			aria-controls="navbarNavDropdown"
 			aria-expanded="false"
 			aria-expanded="false"
-			aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
+			aria-label="<?php // esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
 		>
 		>
 			<span class="navbar-toggler-icon"></span>
 			<span class="navbar-toggler-icon"></span>
-		</button>
+		</button> -->
 
 
 		<!-- The WordPress Menu goes here -->
 		<!-- The WordPress Menu goes here -->
 		<?php
 		<?php

@@ -3422,7 +3422,7 @@
 	  }, []);
 	  }, []);
 	}
 	}
 
 
-	function debounce(fn) {
+	function debounce$1(fn) {
 	  var pending;
 	  var pending;
 	  return function () {
 	  return function () {
 	    if (!pending) {
 	    if (!pending) {
@@ -3571,7 +3571,7 @@
 	      },
 	      },
 	      // Async and optimistically optimized update – it will not be executed if
 	      // Async and optimistically optimized update – it will not be executed if
 	      // not necessary (debounced to run at most once-per-tick)
 	      // not necessary (debounced to run at most once-per-tick)
-	      update: debounce(function () {
+	      update: debounce$1(function () {
 	        return new Promise(function (resolve) {
 	        return new Promise(function (resolve) {
 	          instance.forceUpdate();
 	          instance.forceUpdate();
 	          resolve(state);
 	          resolve(state);
@@ -7321,7 +7321,7 @@
 	    return !_isString$1(value) || !(v = _unitExp.exec(value)) ? "" : v[1];
 	    return !_isString$1(value) || !(v = _unitExp.exec(value)) ? "" : v[1];
 	  },
 	  },
 	  // note: protect against padded numbers as strings, like "100.100". That shouldn't return "00" as the unit. If it's numeric, return no unit.
 	  // note: protect against padded numbers as strings, like "100.100". That shouldn't return "00" as the unit. If it's numeric, return no unit.
-	  clamp = function clamp(min, max, value) {
+	  clamp$3 = function clamp(min, max, value) {
 	    return _conditionalReturn(value, function (v) {
 	    return _conditionalReturn(value, function (v) {
 	      return _clamp$1(min, max, v);
 	      return _clamp$1(min, max, v);
 	    });
 	    });
@@ -7485,7 +7485,7 @@
 	      return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
 	      return _isArray(min) ? min[~~(Math.random() * min.length)] : (roundingIncrement = roundingIncrement || 1e-5) && (returnFunction = roundingIncrement < 1 ? Math.pow(10, (roundingIncrement + "").length - 2) : 1) && Math.floor(Math.round((min - roundingIncrement / 2 + Math.random() * (max - min + roundingIncrement * .99)) / roundingIncrement) * roundingIncrement * returnFunction) / returnFunction;
 	    });
 	    });
 	  },
 	  },
-	  pipe = function pipe() {
+	  pipe$1 = function pipe() {
 	    for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
 	    for (var _len = arguments.length, functions = new Array(_len), _key = 0; _key < _len; _key++) {
 	      functions[_key] = arguments[_key];
 	      functions[_key] = arguments[_key];
 	    }
 	    }
@@ -10404,12 +10404,12 @@
 	    snap: snap,
 	    snap: snap,
 	    normalize: normalize,
 	    normalize: normalize,
 	    getUnit: getUnit,
 	    getUnit: getUnit,
-	    clamp: clamp,
+	    clamp: clamp$3,
 	    splitColor: splitColor,
 	    splitColor: splitColor,
 	    toArray: toArray,
 	    toArray: toArray,
 	    selector: selector,
 	    selector: selector,
 	    mapRange: mapRange,
 	    mapRange: mapRange,
-	    pipe: pipe,
+	    pipe: pipe$1,
 	    unitize: unitize,
 	    unitize: unitize,
 	    interpolate: interpolate,
 	    interpolate: interpolate,
 	    shuffle: shuffle
 	    shuffle: shuffle
@@ -12136,8 +12136,8 @@
 	      _context$1 = gsap$1.core.context || function () {};
 	      _context$1 = gsap$1.core.context || function () {};
 	      _pointerType = "onpointerenter" in _body$1 ? "pointer" : "mouse"; // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
 	      _pointerType = "onpointerenter" in _body$1 ? "pointer" : "mouse"; // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
 
 
-	      _isTouch = Observer.isTouch = _win$1.matchMedia && _win$1.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win$1 || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0;
-	      _eventTypes = Observer.eventTypes = ("ontouchstart" in _docEl$1 ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl$1) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(",");
+	      _isTouch = Observer$1.isTouch = _win$1.matchMedia && _win$1.matchMedia("(hover: none), (pointer: coarse)").matches ? 1 : "ontouchstart" in _win$1 || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0 ? 2 : 0;
+	      _eventTypes = Observer$1.eventTypes = ("ontouchstart" in _docEl$1 ? "touchstart,touchmove,touchcancel,touchend" : !("onpointerdown" in _docEl$1) ? "mousedown,mousemove,mouseup,mouseup" : "pointerdown,pointermove,pointercancel,pointerup").split(",");
 	      setTimeout(function () {
 	      setTimeout(function () {
 	        return _startup$1 = 0;
 	        return _startup$1 = 0;
 	      }, 500);
 	      }, 500);
@@ -12148,7 +12148,7 @@
 	  };
 	  };
 	_horizontal.op = _vertical;
 	_horizontal.op = _vertical;
 	_scrollers.cache = 0;
 	_scrollers.cache = 0;
-	var Observer = /*#__PURE__*/function () {
+	var Observer$1 = /*#__PURE__*/function () {
 	  function Observer(vars) {
 	  function Observer(vars) {
 	    this.init(vars);
 	    this.init(vars);
 	  }
 	  }
@@ -12507,20 +12507,20 @@
 	  }]);
 	  }]);
 	  return Observer;
 	  return Observer;
 	}();
 	}();
-	Observer.version = "3.11.4";
-	Observer.create = function (vars) {
-	  return new Observer(vars);
+	Observer$1.version = "3.11.4";
+	Observer$1.create = function (vars) {
+	  return new Observer$1(vars);
 	};
 	};
-	Observer.register = _initCore;
-	Observer.getAll = function () {
+	Observer$1.register = _initCore;
+	Observer$1.getAll = function () {
 	  return _observers.slice();
 	  return _observers.slice();
 	};
 	};
-	Observer.getById = function (id) {
+	Observer$1.getById = function (id) {
 	  return _observers.filter(function (o) {
 	  return _observers.filter(function (o) {
 	    return o.vars.id === id;
 	    return o.vars.id === id;
 	  })[0];
 	  })[0];
 	};
 	};
-	_getGSAP$1() && gsap$1.registerPlugin(Observer);
+	_getGSAP$1() && gsap$1.registerPlugin(Observer$1);
 
 
 	/*!
 	/*!
 	 * ScrollTrigger 3.11.4
 	 * ScrollTrigger 3.11.4
@@ -14116,10 +14116,10 @@
 
 
 	      if (_body) {
 	      if (_body) {
 	        _enabled = 1;
 	        _enabled = 1;
-	        Observer.register(gsap); // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
+	        Observer$1.register(gsap); // isTouch is 0 if no touch, 1 if ONLY touch, and 2 if it can accommodate touch but also other types like mouse/pointer.
 
 
-	        ScrollTrigger.isTouch = Observer.isTouch;
-	        _fixIOSBug = Observer.isTouch && /(iPad|iPhone|iPod|Mac)/g.test(navigator.userAgent); // since 2017, iOS has had a bug that causes event.clientX/Y to be inaccurate when a scroll occurs, thus we must alternate ignoring every other touchmove event to work around it. See https://bugs.webkit.org/show_bug.cgi?id=181954 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503
+	        ScrollTrigger.isTouch = Observer$1.isTouch;
+	        _fixIOSBug = Observer$1.isTouch && /(iPad|iPhone|iPod|Mac)/g.test(navigator.userAgent); // since 2017, iOS has had a bug that causes event.clientX/Y to be inaccurate when a scroll occurs, thus we must alternate ignoring every other touchmove event to work around it. See https://bugs.webkit.org/show_bug.cgi?id=181954 and https://codepen.io/GreenSock/pen/ExbrPNa/087cef197dc35445a0951e8935c41503
 
 
 	        _addListener(_win, "wheel", _onScroll); // mostly for 3rd party smooth scrolling libraries.
 	        _addListener(_win, "wheel", _onScroll); // mostly for 3rd party smooth scrolling libraries.
 
 
@@ -14361,7 +14361,7 @@
 	    if (direction === true) {
 	    if (direction === true) {
 	      target.style.removeProperty("touch-action");
 	      target.style.removeProperty("touch-action");
 	    } else {
 	    } else {
-	      target.style.touchAction = direction === true ? "auto" : direction ? "pan-" + direction + (Observer.isTouch ? " pinch-zoom" : "") : "none"; // note: Firefox doesn't support it pinch-zoom properly, at least in addition to a pan-x or pan-y.
+	      target.style.touchAction = direction === true ? "auto" : direction ? "pan-" + direction + (Observer$1.isTouch ? " pinch-zoom" : "") : "none"; // note: Firefox doesn't support it pinch-zoom properly, at least in addition to a pan-x or pan-y.
 	    }
 	    }
 
 
 	    target === _docEl && _allowNativePanning(_body, direction);
 	    target === _docEl && _allowNativePanning(_body, direction);
@@ -14393,7 +14393,7 @@
 	  },
 	  },
 	  // capture events on scrollable elements INSIDE the <body> and allow those by calling stopPropagation() when we find a scrollable ancestor
 	  // capture events on scrollable elements INSIDE the <body> and allow those by calling stopPropagation() when we find a scrollable ancestor
 	  _inputObserver = function _inputObserver(target, type, inputs, nested) {
 	  _inputObserver = function _inputObserver(target, type, inputs, nested) {
-	    return Observer.create({
+	    return Observer$1.create({
 	      target: target,
 	      target: target,
 	      capture: true,
 	      capture: true,
 	      debounce: false,
 	      debounce: false,
@@ -14404,10 +14404,10 @@
 	      onDrag: nested,
 	      onDrag: nested,
 	      onScroll: nested,
 	      onScroll: nested,
 	      onEnable: function onEnable() {
 	      onEnable: function onEnable() {
-	        return inputs && _addListener(_doc, Observer.eventTypes[0], _captureInputs, false, true);
+	        return inputs && _addListener(_doc, Observer$1.eventTypes[0], _captureInputs, false, true);
 	      },
 	      },
 	      onDisable: function onDisable() {
 	      onDisable: function onDisable() {
-	        return _removeListener(_doc, Observer.eventTypes[0], _captureInputs, true);
+	        return _removeListener(_doc, Observer$1.eventTypes[0], _captureInputs, true);
 	      }
 	      }
 	    });
 	    });
 	  },
 	  },
@@ -14439,7 +14439,7 @@
 	      scrollFuncY = _getScrollFunc(target, _vertical),
 	      scrollFuncY = _getScrollFunc(target, _vertical),
 	      scrollFuncX = _getScrollFunc(target, _horizontal),
 	      scrollFuncX = _getScrollFunc(target, _horizontal),
 	      scale = 1,
 	      scale = 1,
-	      initialScale = (Observer.isTouch && _win.visualViewport ? _win.visualViewport.scale * _win.visualViewport.width : _win.outerWidth) / _win.innerWidth,
+	      initialScale = (Observer$1.isTouch && _win.visualViewport ? _win.visualViewport.scale * _win.visualViewport.width : _win.outerWidth) / _win.innerWidth,
 	      wheelRefresh = 0,
 	      wheelRefresh = 0,
 	      resolveMomentumDuration = _isFunction(momentum) ? function () {
 	      resolveMomentumDuration = _isFunction(momentum) ? function () {
 	        return momentum(self);
 	        return momentum(self);
@@ -14583,7 +14583,7 @@
 	      inputObserver.kill();
 	      inputObserver.kill();
 	    };
 	    };
 	    vars.lockAxis = vars.lockAxis !== false;
 	    vars.lockAxis = vars.lockAxis !== false;
-	    self = new Observer(vars);
+	    self = new Observer$1(vars);
 	    self.iOS = _fixIOSBug; // used in the Observer getCachedScroll() function to work around an iOS bug that wreaks havoc with TouchEvent.clientY if we allow scroll to go all the way back to 0.
 	    self.iOS = _fixIOSBug; // used in the Observer getCachedScroll() function to work around an iOS bug that wreaks havoc with TouchEvent.clientY if we allow scroll to go all the way back to 0.
 
 
 	    _fixIOSBug && !scrollFuncY() && scrollFuncY(1); // iOS bug causes event.clientY values to freak out (wildly inaccurate) if the scroll position is exactly 0.
 	    _fixIOSBug && !scrollFuncY() && scrollFuncY(1); // iOS bug causes event.clientY values to freak out (wildly inaccurate) if the scroll position is exactly 0.
@@ -14606,7 +14606,7 @@
 	  });
 	  });
 	};
 	};
 	ScrollTrigger.observe = function (vars) {
 	ScrollTrigger.observe = function (vars) {
-	  return new Observer(vars);
+	  return new Observer$1(vars);
 	};
 	};
 	ScrollTrigger.normalizeScroll = function (vars) {
 	ScrollTrigger.normalizeScroll = function (vars) {
 	  if (typeof vars === "undefined") {
 	  if (typeof vars === "undefined") {
@@ -14618,7 +14618,7 @@
 	  if (vars === false) {
 	  if (vars === false) {
 	    return _normalizer && _normalizer.kill();
 	    return _normalizer && _normalizer.kill();
 	  }
 	  }
-	  var normalizer = vars instanceof Observer ? vars : _getScrollNormalizer(vars);
+	  var normalizer = vars instanceof Observer$1 ? vars : _getScrollNormalizer(vars);
 	  _normalizer && _normalizer.target === normalizer.target && _normalizer.kill();
 	  _normalizer && _normalizer.target === normalizer.target && _normalizer.kill();
 	  _isViewport(normalizer.target) && (_normalizer = normalizer);
 	  _isViewport(normalizer.target) && (_normalizer = normalizer);
 	  return normalizer;
 	  return normalizer;
@@ -14643,26 +14643,2342 @@
 	};
 	};
 	_getGSAP() && gsap.registerPlugin(ScrollTrigger);
 	_getGSAP() && gsap.registerPlugin(ScrollTrigger);
 
 
-	//const grid = document.querySelector(".tiles");
-	//wrapGrid(grid);
+	var DEFAULT_OVERSHOOT_STRENGTH = 1.525;
+	var reversed = function (easing) {
+	  return function (p) {
+	    return 1 - easing(1 - p);
+	  };
+	};
+	var mirrored = function (easing) {
+	  return function (p) {
+	    return p <= 0.5 ? easing(2 * p) / 2 : (2 - easing(2 * (1 - p))) / 2;
+	  };
+	};
+	var createReversedEasing = reversed;
+	var createExpoIn = function (power) {
+	  return function (p) {
+	    return Math.pow(p, power);
+	  };
+	};
+	var createBackIn = function (power) {
+	  return function (p) {
+	    return p * p * ((power + 1) * p - power);
+	  };
+	};
+	var createAnticipateEasing = function (power) {
+	  var backEasing = createBackIn(power);
+	  return function (p) {
+	    return (p *= 2) < 1 ? 0.5 * backEasing(p) : 0.5 * (2 - Math.pow(2, -10 * (p - 1)));
+	  };
+	};
+	var linear = function (p) {
+	  return p;
+	};
+	var easeIn = /*#__PURE__*/createExpoIn(2);
+	var easeOut = /*#__PURE__*/reversed(easeIn);
+	var easeInOut = /*#__PURE__*/mirrored(easeIn);
+	var circIn = function (p) {
+	  return 1 - Math.sin(Math.acos(p));
+	};
+	var circOut = /*#__PURE__*/reversed(circIn);
+	var circInOut = /*#__PURE__*/mirrored(circOut);
+	var backIn = /*#__PURE__*/createBackIn(DEFAULT_OVERSHOOT_STRENGTH);
+	var backOut = /*#__PURE__*/reversed(backIn);
+	var backInOut = /*#__PURE__*/mirrored(backIn);
+	var anticipate = /*#__PURE__*/createAnticipateEasing(DEFAULT_OVERSHOOT_STRENGTH);
+
+	const defaultTimestep = 1 / 60 * 1000;
+	const getCurrentTime = typeof performance !== "undefined" ? () => performance.now() : () => Date.now();
+	const onNextFrame$1 = typeof window !== "undefined" ? callback => window.requestAnimationFrame(callback) : callback => setTimeout(() => callback(getCurrentTime()), defaultTimestep);
+
+	function createRenderStep(runNextFrame) {
+	  let toRun = [];
+	  let toRunNextFrame = [];
+	  let numToRun = 0;
+	  let isProcessing = false;
+	  let flushNextFrame = false;
+	  const toKeepAlive = new WeakSet();
+	  const step = {
+	    schedule: (callback, keepAlive = false, immediate = false) => {
+	      const addToCurrentFrame = immediate && isProcessing;
+	      const buffer = addToCurrentFrame ? toRun : toRunNextFrame;
+	      if (keepAlive) toKeepAlive.add(callback);
+	      if (buffer.indexOf(callback) === -1) {
+	        buffer.push(callback);
+	        if (addToCurrentFrame && isProcessing) numToRun = toRun.length;
+	      }
+	      return callback;
+	    },
+	    cancel: callback => {
+	      const index = toRunNextFrame.indexOf(callback);
+	      if (index !== -1) toRunNextFrame.splice(index, 1);
+	      toKeepAlive.delete(callback);
+	    },
+	    process: frameData => {
+	      if (isProcessing) {
+	        flushNextFrame = true;
+	        return;
+	      }
+	      isProcessing = true;
+	      [toRun, toRunNextFrame] = [toRunNextFrame, toRun];
+	      toRunNextFrame.length = 0;
+	      numToRun = toRun.length;
+	      if (numToRun) {
+	        for (let i = 0; i < numToRun; i++) {
+	          const callback = toRun[i];
+	          callback(frameData);
+	          if (toKeepAlive.has(callback)) {
+	            step.schedule(callback);
+	            runNextFrame();
+	          }
+	        }
+	      }
+	      isProcessing = false;
+	      if (flushNextFrame) {
+	        flushNextFrame = false;
+	        step.process(frameData);
+	      }
+	    }
+	  };
+	  return step;
+	}
 
 
-	//const scroll = new LocomotiveScroll();
+	const maxElapsed$1 = 40;
+	let useDefaultElapsed$1 = true;
+	let runNextFrame = false;
+	let isProcessing$1 = false;
+	const frame$1 = {
+	  delta: 0,
+	  timestamp: 0
+	};
+	const stepsOrder$1 = ["read", "update", "preRender", "render", "postRender"];
+	const steps$1 = stepsOrder$1.reduce((acc, key) => {
+	  acc[key] = createRenderStep(() => runNextFrame = true);
+	  return acc;
+	}, {});
+	const sync$1 = stepsOrder$1.reduce((acc, key) => {
+	  const step = steps$1[key];
+	  acc[key] = (process, keepAlive = false, immediate = false) => {
+	    if (!runNextFrame) startLoop$1();
+	    return step.schedule(process, keepAlive, immediate);
+	  };
+	  return acc;
+	}, {});
+	stepsOrder$1.reduce((acc, key) => {
+	  acc[key] = steps$1[key].cancel;
+	  return acc;
+	}, {});
+	stepsOrder$1.reduce((acc, key) => {
+	  acc[key] = () => steps$1[key].process(frame$1);
+	  return acc;
+	}, {});
+	const processStep$1 = stepId => steps$1[stepId].process(frame$1);
+	const processFrame$1 = timestamp => {
+	  runNextFrame = false;
+	  frame$1.delta = useDefaultElapsed$1 ? defaultTimestep : Math.max(Math.min(timestamp - frame$1.timestamp, maxElapsed$1), 1);
+	  frame$1.timestamp = timestamp;
+	  isProcessing$1 = true;
+	  stepsOrder$1.forEach(processStep$1);
+	  isProcessing$1 = false;
+	  if (runNextFrame) {
+	    useDefaultElapsed$1 = false;
+	    onNextFrame$1(processFrame$1);
+	  }
+	};
+	const startLoop$1 = () => {
+	  runNextFrame = true;
+	  useDefaultElapsed$1 = true;
+	  if (!isProcessing$1) onNextFrame$1(processFrame$1);
+	};
 
 
-	document.addEventListener("DOMContentLoaded", function () {
-	  window.addEventListener('scroll', function () {
-	    if (window.scrollY > 57) {
-	      document.getElementById('main-nav').classList.add('fixed-top');
-	    } else {
-	      document.getElementById('main-nav').classList.remove('fixed-top');
+	/**
+	 * lodash (Custom Build) <https://lodash.com/>
+	 * Build: `lodash modularize exports="npm" -o ./`
+	 * Copyright jQuery Foundation and other contributors <https://jquery.org/>
+	 * Released under MIT license <https://lodash.com/license>
+	 * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+	 * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+	 */
+
+	/** Used as the `TypeError` message for "Functions" methods. */
+	var FUNC_ERROR_TEXT = 'Expected a function';
+
+	/** Used as references for various `Number` constants. */
+	var NAN = 0 / 0;
+
+	/** `Object#toString` result references. */
+	var symbolTag = '[object Symbol]';
+
+	/** Used to match leading and trailing whitespace. */
+	var reTrim = /^\s+|\s+$/g;
+
+	/** Used to detect bad signed hexadecimal string values. */
+	var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
+
+	/** Used to detect binary string values. */
+	var reIsBinary = /^0b[01]+$/i;
+
+	/** Used to detect octal string values. */
+	var reIsOctal = /^0o[0-7]+$/i;
+
+	/** Built-in method references without a dependency on `root`. */
+	var freeParseInt = parseInt;
+
+	/** Detect free variable `global` from Node.js. */
+	var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;
+
+	/** Detect free variable `self`. */
+	var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
+
+	/** Used as a reference to the global object. */
+	var root = freeGlobal || freeSelf || Function('return this')();
+
+	/** Used for built-in method references. */
+	var objectProto = Object.prototype;
+
+	/**
+	 * Used to resolve the
+	 * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
+	 * of values.
+	 */
+	var objectToString = objectProto.toString;
+
+	/* Built-in method references for those with the same name as other `lodash` methods. */
+	var nativeMax = Math.max,
+	  nativeMin = Math.min;
+
+	/**
+	 * Gets the timestamp of the number of milliseconds that have elapsed since
+	 * the Unix epoch (1 January 1970 00:00:00 UTC).
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 2.4.0
+	 * @category Date
+	 * @returns {number} Returns the timestamp.
+	 * @example
+	 *
+	 * _.defer(function(stamp) {
+	 *   console.log(_.now() - stamp);
+	 * }, _.now());
+	 * // => Logs the number of milliseconds it took for the deferred invocation.
+	 */
+	var now = function () {
+	  return root.Date.now();
+	};
+
+	/**
+	 * Creates a debounced function that delays invoking `func` until after `wait`
+	 * milliseconds have elapsed since the last time the debounced function was
+	 * invoked. The debounced function comes with a `cancel` method to cancel
+	 * delayed `func` invocations and a `flush` method to immediately invoke them.
+	 * Provide `options` to indicate whether `func` should be invoked on the
+	 * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
+	 * with the last arguments provided to the debounced function. Subsequent
+	 * calls to the debounced function return the result of the last `func`
+	 * invocation.
+	 *
+	 * **Note:** If `leading` and `trailing` options are `true`, `func` is
+	 * invoked on the trailing edge of the timeout only if the debounced function
+	 * is invoked more than once during the `wait` timeout.
+	 *
+	 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+	 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+	 *
+	 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+	 * for details over the differences between `_.debounce` and `_.throttle`.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Function
+	 * @param {Function} func The function to debounce.
+	 * @param {number} [wait=0] The number of milliseconds to delay.
+	 * @param {Object} [options={}] The options object.
+	 * @param {boolean} [options.leading=false]
+	 *  Specify invoking on the leading edge of the timeout.
+	 * @param {number} [options.maxWait]
+	 *  The maximum time `func` is allowed to be delayed before it's invoked.
+	 * @param {boolean} [options.trailing=true]
+	 *  Specify invoking on the trailing edge of the timeout.
+	 * @returns {Function} Returns the new debounced function.
+	 * @example
+	 *
+	 * // Avoid costly calculations while the window size is in flux.
+	 * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
+	 *
+	 * // Invoke `sendMail` when clicked, debouncing subsequent calls.
+	 * jQuery(element).on('click', _.debounce(sendMail, 300, {
+	 *   'leading': true,
+	 *   'trailing': false
+	 * }));
+	 *
+	 * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
+	 * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
+	 * var source = new EventSource('/stream');
+	 * jQuery(source).on('message', debounced);
+	 *
+	 * // Cancel the trailing debounced invocation.
+	 * jQuery(window).on('popstate', debounced.cancel);
+	 */
+	function debounce(func, wait, options) {
+	  var lastArgs,
+	    lastThis,
+	    maxWait,
+	    result,
+	    timerId,
+	    lastCallTime,
+	    lastInvokeTime = 0,
+	    leading = false,
+	    maxing = false,
+	    trailing = true;
+	  if (typeof func != 'function') {
+	    throw new TypeError(FUNC_ERROR_TEXT);
+	  }
+	  wait = toNumber(wait) || 0;
+	  if (isObject(options)) {
+	    leading = !!options.leading;
+	    maxing = 'maxWait' in options;
+	    maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
+	    trailing = 'trailing' in options ? !!options.trailing : trailing;
+	  }
+	  function invokeFunc(time) {
+	    var args = lastArgs,
+	      thisArg = lastThis;
+	    lastArgs = lastThis = undefined;
+	    lastInvokeTime = time;
+	    result = func.apply(thisArg, args);
+	    return result;
+	  }
+	  function leadingEdge(time) {
+	    // Reset any `maxWait` timer.
+	    lastInvokeTime = time;
+	    // Start the timer for the trailing edge.
+	    timerId = setTimeout(timerExpired, wait);
+	    // Invoke the leading edge.
+	    return leading ? invokeFunc(time) : result;
+	  }
+	  function remainingWait(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	      timeSinceLastInvoke = time - lastInvokeTime,
+	      result = wait - timeSinceLastCall;
+	    return maxing ? nativeMin(result, maxWait - timeSinceLastInvoke) : result;
+	  }
+	  function shouldInvoke(time) {
+	    var timeSinceLastCall = time - lastCallTime,
+	      timeSinceLastInvoke = time - lastInvokeTime;
+
+	    // Either this is the first call, activity has stopped and we're at the
+	    // trailing edge, the system time has gone backwards and we're treating
+	    // it as the trailing edge, or we've hit the `maxWait` limit.
+	    return lastCallTime === undefined || timeSinceLastCall >= wait || timeSinceLastCall < 0 || maxing && timeSinceLastInvoke >= maxWait;
+	  }
+	  function timerExpired() {
+	    var time = now();
+	    if (shouldInvoke(time)) {
+	      return trailingEdge(time);
 	    }
 	    }
+	    // Restart the timer.
+	    timerId = setTimeout(timerExpired, remainingWait(time));
+	  }
+	  function trailingEdge(time) {
+	    timerId = undefined;
+
+	    // Only invoke if we have `lastArgs` which means `func` has been
+	    // debounced at least once.
+	    if (trailing && lastArgs) {
+	      return invokeFunc(time);
+	    }
+	    lastArgs = lastThis = undefined;
+	    return result;
+	  }
+	  function cancel() {
+	    if (timerId !== undefined) {
+	      clearTimeout(timerId);
+	    }
+	    lastInvokeTime = 0;
+	    lastArgs = lastCallTime = lastThis = timerId = undefined;
+	  }
+	  function flush() {
+	    return timerId === undefined ? result : trailingEdge(now());
+	  }
+	  function debounced() {
+	    var time = now(),
+	      isInvoking = shouldInvoke(time);
+	    lastArgs = arguments;
+	    lastThis = this;
+	    lastCallTime = time;
+	    if (isInvoking) {
+	      if (timerId === undefined) {
+	        return leadingEdge(lastCallTime);
+	      }
+	      if (maxing) {
+	        // Handle invocations in a tight loop.
+	        timerId = setTimeout(timerExpired, wait);
+	        return invokeFunc(lastCallTime);
+	      }
+	    }
+	    if (timerId === undefined) {
+	      timerId = setTimeout(timerExpired, wait);
+	    }
+	    return result;
+	  }
+	  debounced.cancel = cancel;
+	  debounced.flush = flush;
+	  return debounced;
+	}
+
+	/**
+	 * Creates a throttled function that only invokes `func` at most once per
+	 * every `wait` milliseconds. The throttled function comes with a `cancel`
+	 * method to cancel delayed `func` invocations and a `flush` method to
+	 * immediately invoke them. Provide `options` to indicate whether `func`
+	 * should be invoked on the leading and/or trailing edge of the `wait`
+	 * timeout. The `func` is invoked with the last arguments provided to the
+	 * throttled function. Subsequent calls to the throttled function return the
+	 * result of the last `func` invocation.
+	 *
+	 * **Note:** If `leading` and `trailing` options are `true`, `func` is
+	 * invoked on the trailing edge of the timeout only if the throttled function
+	 * is invoked more than once during the `wait` timeout.
+	 *
+	 * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
+	 * until to the next tick, similar to `setTimeout` with a timeout of `0`.
+	 *
+	 * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
+	 * for details over the differences between `_.throttle` and `_.debounce`.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Function
+	 * @param {Function} func The function to throttle.
+	 * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
+	 * @param {Object} [options={}] The options object.
+	 * @param {boolean} [options.leading=true]
+	 *  Specify invoking on the leading edge of the timeout.
+	 * @param {boolean} [options.trailing=true]
+	 *  Specify invoking on the trailing edge of the timeout.
+	 * @returns {Function} Returns the new throttled function.
+	 * @example
+	 *
+	 * // Avoid excessively updating the position while scrolling.
+	 * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
+	 *
+	 * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
+	 * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
+	 * jQuery(element).on('click', throttled);
+	 *
+	 * // Cancel the trailing throttled invocation.
+	 * jQuery(window).on('popstate', throttled.cancel);
+	 */
+	function throttle(func, wait, options) {
+	  var leading = true,
+	    trailing = true;
+	  if (typeof func != 'function') {
+	    throw new TypeError(FUNC_ERROR_TEXT);
+	  }
+	  if (isObject(options)) {
+	    leading = 'leading' in options ? !!options.leading : leading;
+	    trailing = 'trailing' in options ? !!options.trailing : trailing;
+	  }
+	  return debounce(func, wait, {
+	    'leading': leading,
+	    'maxWait': wait,
+	    'trailing': trailing
 	  });
 	  });
+	}
+
+	/**
+	 * Checks if `value` is the
+	 * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
+	 * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 0.1.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is an object, else `false`.
+	 * @example
+	 *
+	 * _.isObject({});
+	 * // => true
+	 *
+	 * _.isObject([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObject(_.noop);
+	 * // => true
+	 *
+	 * _.isObject(null);
+	 * // => false
+	 */
+	function isObject(value) {
+	  var type = typeof value;
+	  return !!value && (type == 'object' || type == 'function');
+	}
+
+	/**
+	 * Checks if `value` is object-like. A value is object-like if it's not `null`
+	 * and has a `typeof` result of "object".
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
+	 * @example
+	 *
+	 * _.isObjectLike({});
+	 * // => true
+	 *
+	 * _.isObjectLike([1, 2, 3]);
+	 * // => true
+	 *
+	 * _.isObjectLike(_.noop);
+	 * // => false
+	 *
+	 * _.isObjectLike(null);
+	 * // => false
+	 */
+	function isObjectLike(value) {
+	  return !!value && typeof value == 'object';
+	}
+
+	/**
+	 * Checks if `value` is classified as a `Symbol` primitive or object.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to check.
+	 * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
+	 * @example
+	 *
+	 * _.isSymbol(Symbol.iterator);
+	 * // => true
+	 *
+	 * _.isSymbol('abc');
+	 * // => false
+	 */
+	function isSymbol(value) {
+	  return typeof value == 'symbol' || isObjectLike(value) && objectToString.call(value) == symbolTag;
+	}
+
+	/**
+	 * Converts `value` to a number.
+	 *
+	 * @static
+	 * @memberOf _
+	 * @since 4.0.0
+	 * @category Lang
+	 * @param {*} value The value to process.
+	 * @returns {number} Returns the number.
+	 * @example
+	 *
+	 * _.toNumber(3.2);
+	 * // => 3.2
+	 *
+	 * _.toNumber(Number.MIN_VALUE);
+	 * // => 5e-324
+	 *
+	 * _.toNumber(Infinity);
+	 * // => Infinity
+	 *
+	 * _.toNumber('3.2');
+	 * // => 3.2
+	 */
+	function toNumber(value) {
+	  if (typeof value == 'number') {
+	    return value;
+	  }
+	  if (isSymbol(value)) {
+	    return NAN;
+	  }
+	  if (isObject(value)) {
+	    var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
+	    value = isObject(other) ? other + '' : other;
+	  }
+	  if (typeof value != 'string') {
+	    return value === 0 ? value : +value;
+	  }
+	  value = value.replace(reTrim, '');
+	  var isBinary = reIsBinary.test(value);
+	  return isBinary || reIsOctal.test(value) ? freeParseInt(value.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value) ? NAN : +value;
+	}
+	var lodash_throttle = throttle;
+
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
+
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
+
+	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+	PERFORMANCE OF THIS SOFTWARE.
+	***************************************************************************** */
+	/* global Reflect, Promise */
+
+	var extendStatics = function (d, b) {
+	  extendStatics = Object.setPrototypeOf || {
+	    __proto__: []
+	  } instanceof Array && function (d, b) {
+	    d.__proto__ = b;
+	  } || function (d, b) {
+	    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+	  };
+	  return extendStatics(d, b);
+	};
+	function __extends(d, b) {
+	  extendStatics(d, b);
+	  function __() {
+	    this.constructor = d;
+	  }
+	  d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+	}
+	var __assign$2 = function () {
+	  __assign$2 = Object.assign || function __assign(t) {
+	    for (var s, i = 1, n = arguments.length; i < n; i++) {
+	      s = arguments[i];
+	      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+	    }
+	    return t;
+	  };
+	  return __assign$2.apply(this, arguments);
+	};
+	function __rest(s, e) {
+	  var t = {};
+	  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+	  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+	    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+	  }
+	  return t;
+	}
+	function __spreadArrays() {
+	  for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+	  for (var r = Array(s), k = 0, i = 0; i < il; i++) for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++) r[k] = a[j];
+	  return r;
+	}
+
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation.
+
+	Permission to use, copy, modify, and/or distribute this software for any
+	purpose with or without fee is hereby granted.
+
+	THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+	REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+	AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+	INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+	LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+	OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+	PERFORMANCE OF THIS SOFTWARE.
+	***************************************************************************** */
+	var __assign$1 = function () {
+	  __assign$1 = Object.assign || function __assign(t) {
+	    for (var s, i = 1, n = arguments.length; i < n; i++) {
+	      s = arguments[i];
+	      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+	    }
+	    return t;
+	  };
+	  return __assign$1.apply(this, arguments);
+	};
+
+	var clamp$2 = function (min, max) {
+	  return function (v) {
+	    return Math.max(Math.min(v, max), min);
+	  };
+	};
+	var sanitize = function (v) {
+	  return v % 1 ? Number(v.toFixed(5)) : v;
+	};
+	var floatRegex = /(-)?(\d[\d\.]*)/g;
+	var colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+	var singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+	var number = {
+	  test: function (v) {
+	    return typeof v === 'number';
+	  },
+	  parse: parseFloat,
+	  transform: function (v) {
+	    return v;
+	  }
+	};
+	var alpha = __assign$1(__assign$1({}, number), {
+	  transform: clamp$2(0, 1)
 	});
 	});
-	jQuery(document).ready(function ($) {
-	  $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
-	  $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
-	  window.addEventListener('resize', function () {
-	    $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
-	    $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
+	__assign$1(__assign$1({}, number), {
+	  default: 1
+	});
+	var createUnitType = function (unit) {
+	  return {
+	    test: function (v) {
+	      return typeof v === 'string' && v.endsWith(unit) && v.split(' ').length === 1;
+	    },
+	    parse: parseFloat,
+	    transform: function (v) {
+	      return "" + v + unit;
+	    }
+	  };
+	};
+	var degrees = createUnitType('deg');
+	var percent = createUnitType('%');
+	var px = createUnitType('px');
+	var vh = createUnitType('vh');
+	var vw = createUnitType('vw');
+	__assign$1(__assign$1({}, percent), {
+	  parse: function (v) {
+	    return percent.parse(v) / 100;
+	  },
+	  transform: function (v) {
+	    return percent.transform(v * 100);
+	  }
+	});
+	var getValueFromFunctionString = function (value) {
+	  return value.substring(value.indexOf('(') + 1, value.lastIndexOf(')'));
+	};
+	var clampRgbUnit = clamp$2(0, 255);
+	var isRgba = function (v) {
+	  return v.red !== undefined;
+	};
+	var isHsla = function (v) {
+	  return v.hue !== undefined;
+	};
+	function getValuesAsArray(value) {
+	  return getValueFromFunctionString(value).replace(/(,|\/)/g, ' ').split(/ \s*/);
+	}
+	var splitColorValues = function (terms) {
+	  return function (v) {
+	    if (typeof v !== 'string') return v;
+	    var values = {};
+	    var valuesArray = getValuesAsArray(v);
+	    for (var i = 0; i < 4; i++) {
+	      values[terms[i]] = valuesArray[i] !== undefined ? parseFloat(valuesArray[i]) : 1;
+	    }
+	    return values;
+	  };
+	};
+	var rgbaTemplate = function (_a) {
+	  var red = _a.red,
+	    green = _a.green,
+	    blue = _a.blue,
+	    _b = _a.alpha,
+	    alpha = _b === void 0 ? 1 : _b;
+	  return "rgba(" + red + ", " + green + ", " + blue + ", " + alpha + ")";
+	};
+	var hslaTemplate = function (_a) {
+	  var hue = _a.hue,
+	    saturation = _a.saturation,
+	    lightness = _a.lightness,
+	    _b = _a.alpha,
+	    alpha = _b === void 0 ? 1 : _b;
+	  return "hsla(" + hue + ", " + saturation + ", " + lightness + ", " + alpha + ")";
+	};
+	var rgbUnit = __assign$1(__assign$1({}, number), {
+	  transform: function (v) {
+	    return Math.round(clampRgbUnit(v));
+	  }
+	});
+	function isColorString(color, colorType) {
+	  return color.startsWith(colorType) && singleColorRegex.test(color);
+	}
+	var rgba = {
+	  test: function (v) {
+	    return typeof v === 'string' ? isColorString(v, 'rgb') : isRgba(v);
+	  },
+	  parse: splitColorValues(['red', 'green', 'blue', 'alpha']),
+	  transform: function (_a) {
+	    var red = _a.red,
+	      green = _a.green,
+	      blue = _a.blue,
+	      _b = _a.alpha,
+	      alpha$1 = _b === void 0 ? 1 : _b;
+	    return rgbaTemplate({
+	      red: rgbUnit.transform(red),
+	      green: rgbUnit.transform(green),
+	      blue: rgbUnit.transform(blue),
+	      alpha: sanitize(alpha.transform(alpha$1))
+	    });
+	  }
+	};
+	var hsla = {
+	  test: function (v) {
+	    return typeof v === 'string' ? isColorString(v, 'hsl') : isHsla(v);
+	  },
+	  parse: splitColorValues(['hue', 'saturation', 'lightness', 'alpha']),
+	  transform: function (_a) {
+	    var hue = _a.hue,
+	      saturation = _a.saturation,
+	      lightness = _a.lightness,
+	      _b = _a.alpha,
+	      alpha$1 = _b === void 0 ? 1 : _b;
+	    return hslaTemplate({
+	      hue: Math.round(hue),
+	      saturation: percent.transform(sanitize(saturation)),
+	      lightness: percent.transform(sanitize(lightness)),
+	      alpha: sanitize(alpha.transform(alpha$1))
+	    });
+	  }
+	};
+	var hex = __assign$1(__assign$1({}, rgba), {
+	  test: function (v) {
+	    return typeof v === 'string' && isColorString(v, '#');
+	  },
+	  parse: function (v) {
+	    var r = '';
+	    var g = '';
+	    var b = '';
+	    if (v.length > 4) {
+	      r = v.substr(1, 2);
+	      g = v.substr(3, 2);
+	      b = v.substr(5, 2);
+	    } else {
+	      r = v.substr(1, 1);
+	      g = v.substr(2, 1);
+	      b = v.substr(3, 1);
+	      r += r;
+	      g += g;
+	      b += b;
+	    }
+	    return {
+	      red: parseInt(r, 16),
+	      green: parseInt(g, 16),
+	      blue: parseInt(b, 16),
+	      alpha: 1
+	    };
+	  }
+	});
+	var color = {
+	  test: function (v) {
+	    return typeof v === 'string' && singleColorRegex.test(v) || isRgba(v) || isHsla(v);
+	  },
+	  parse: function (v) {
+	    if (rgba.test(v)) {
+	      return rgba.parse(v);
+	    } else if (hsla.test(v)) {
+	      return hsla.parse(v);
+	    } else if (hex.test(v)) {
+	      return hex.parse(v);
+	    }
+	    return v;
+	  },
+	  transform: function (v) {
+	    if (isRgba(v)) {
+	      return rgba.transform(v);
+	    } else if (isHsla(v)) {
+	      return hsla.transform(v);
+	    }
+	    return v;
+	  }
+	};
+	var COLOR_TOKEN = '${c}';
+	var NUMBER_TOKEN = '${n}';
+	var convertNumbersToZero = function (v) {
+	  return typeof v === 'number' ? 0 : v;
+	};
+	var complex = {
+	  test: function (v) {
+	    if (typeof v !== 'string' || !isNaN(v)) return false;
+	    var numValues = 0;
+	    var foundNumbers = v.match(floatRegex);
+	    var foundColors = v.match(colorRegex);
+	    if (foundNumbers) numValues += foundNumbers.length;
+	    if (foundColors) numValues += foundColors.length;
+	    return numValues > 0;
+	  },
+	  parse: function (v) {
+	    var input = v;
+	    var parsed = [];
+	    var foundColors = input.match(colorRegex);
+	    if (foundColors) {
+	      input = input.replace(colorRegex, COLOR_TOKEN);
+	      parsed.push.apply(parsed, foundColors.map(color.parse));
+	    }
+	    var foundNumbers = input.match(floatRegex);
+	    if (foundNumbers) {
+	      parsed.push.apply(parsed, foundNumbers.map(number.parse));
+	    }
+	    return parsed;
+	  },
+	  createTransformer: function (prop) {
+	    var template = prop;
+	    var token = 0;
+	    var foundColors = prop.match(colorRegex);
+	    var numColors = foundColors ? foundColors.length : 0;
+	    if (foundColors) {
+	      for (var i = 0; i < numColors; i++) {
+	        template = template.replace(foundColors[i], COLOR_TOKEN);
+	        token++;
+	      }
+	    }
+	    var foundNumbers = template.match(floatRegex);
+	    var numNumbers = foundNumbers ? foundNumbers.length : 0;
+	    if (foundNumbers) {
+	      for (var i = 0; i < numNumbers; i++) {
+	        template = template.replace(foundNumbers[i], NUMBER_TOKEN);
+	        token++;
+	      }
+	    }
+	    return function (v) {
+	      var output = template;
+	      for (var i = 0; i < token; i++) {
+	        output = output.replace(i < numColors ? COLOR_TOKEN : NUMBER_TOKEN, i < numColors ? color.transform(v[i]) : sanitize(v[i]));
+	      }
+	      return output;
+	    };
+	  },
+	  getAnimatableNone: function (target) {
+	    var parsedTarget = complex.parse(target);
+	    var targetTransformer = complex.createTransformer(target);
+	    return targetTransformer(parsedTarget.map(convertNumbersToZero));
+	  }
+	};
+
+	var invariant = function () {};
+
+	var isNum = function (v) {
+	  return typeof v === 'number';
+	};
+	var curryRange = function (func) {
+	  return function (min, max, v) {
+	    return v !== undefined ? func(min, max, v) : function (cv) {
+	      return func(min, max, cv);
+	    };
+	  };
+	};
+	var clamp = function (min, max, v) {
+	  return Math.min(Math.max(v, min), max);
+	};
+	var clamp$1 = curryRange(clamp);
+	var progress = function (from, to, value) {
+	  var toFromDifference = to - from;
+	  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+	};
+	var mix = function (from, to, progress) {
+	  return -progress * from + progress * to + from;
+	};
+
+	/*! *****************************************************************************
+	Copyright (c) Microsoft Corporation. All rights reserved.
+	Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+	this file except in compliance with the License. You may obtain a copy of the
+	License at http://www.apache.org/licenses/LICENSE-2.0
+
+	THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+	KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+	WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+	MERCHANTABLITY OR NON-INFRINGEMENT.
+
+	See the Apache Version 2.0 License for specific language governing permissions
+	and limitations under the License.
+	***************************************************************************** */
+
+	var __assign = function () {
+	  __assign = Object.assign || function __assign(t) {
+	    for (var s, i = 1, n = arguments.length; i < n; i++) {
+	      s = arguments[i];
+	      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+	    }
+	    return t;
+	  };
+	  return __assign.apply(this, arguments);
+	};
+	var mixLinearColor = function (from, to, v) {
+	  var fromExpo = from * from;
+	  var toExpo = to * to;
+	  return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
+	};
+	var colorTypes = [hex, rgba, hsla];
+	var getColorType = function (v) {
+	  return colorTypes.find(function (type) {
+	    return type.test(v);
+	  });
+	};
+	var mixColor = function (from, to) {
+	  var fromColorType = getColorType(from);
+	  var toColorType = getColorType(to);
+	  invariant(fromColorType.transform === toColorType.transform);
+	  var fromColor = fromColorType.parse(from);
+	  var toColor = toColorType.parse(to);
+	  var blended = __assign({}, fromColor);
+	  var mixFunc = fromColorType === hsla ? mix : mixLinearColor;
+	  return function (v) {
+	    for (var key in blended) {
+	      if (key !== 'alpha') {
+	        blended[key] = mixFunc(fromColor[key], toColor[key], v);
+	      }
+	    }
+	    blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
+	    return fromColorType.transform(blended);
+	  };
+	};
+	var combineFunctions = function (a, b) {
+	  return function (v) {
+	    return b(a(v));
+	  };
+	};
+	var pipe = function () {
+	  var transformers = [];
+	  for (var _i = 0; _i < arguments.length; _i++) {
+	    transformers[_i] = arguments[_i];
+	  }
+	  return transformers.reduce(combineFunctions);
+	};
+	function getMixer(origin, target) {
+	  if (isNum(origin)) {
+	    return function (v) {
+	      return mix(origin, target, v);
+	    };
+	  } else if (color.test(origin)) {
+	    return mixColor(origin, target);
+	  } else {
+	    return mixComplex(origin, target);
+	  }
+	}
+	var mixArray = function (from, to) {
+	  var output = from.slice();
+	  var numValues = output.length;
+	  var blendValue = from.map(function (fromThis, i) {
+	    return getMixer(fromThis, to[i]);
+	  });
+	  return function (v) {
+	    for (var i = 0; i < numValues; i++) {
+	      output[i] = blendValue[i](v);
+	    }
+	    return output;
+	  };
+	};
+	function analyse(value) {
+	  var parsed = complex.parse(value);
+	  var numValues = parsed.length;
+	  var numNumbers = 0;
+	  var numRGB = 0;
+	  var numHSL = 0;
+	  for (var i = 0; i < numValues; i++) {
+	    if (numNumbers || typeof parsed[i] === 'number') {
+	      numNumbers++;
+	    } else {
+	      if (parsed[i].hue !== undefined) {
+	        numHSL++;
+	      } else {
+	        numRGB++;
+	      }
+	    }
+	  }
+	  return {
+	    parsed: parsed,
+	    numNumbers: numNumbers,
+	    numRGB: numRGB,
+	    numHSL: numHSL
+	  };
+	}
+	var mixComplex = function (origin, target) {
+	  var template = complex.createTransformer(target);
+	  var originStats = analyse(origin);
+	  var targetStats = analyse(target);
+	  return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+	};
+	var velocityPerFrame = function (xps, frameDuration) {
+	  return isNum(xps) ? xps / (1000 / frameDuration) : 0;
+	};
+	var velocityPerSecond = function (velocity, frameDuration) {
+	  return frameDuration ? velocity * (1000 / frameDuration) : 0;
+	};
+	clamp$1(0, 1);
+
+	var prevTime = 0;
+	var onNextFrame = typeof window !== 'undefined' && window.requestAnimationFrame !== undefined ? function (callback) {
+	  return window.requestAnimationFrame(callback);
+	} : function (callback) {
+	  var timestamp = Date.now();
+	  var timeToCall = Math.max(0, 16.7 - (timestamp - prevTime));
+	  prevTime = timestamp + timeToCall;
+	  setTimeout(function () {
+	    return callback(prevTime);
+	  }, timeToCall);
+	};
+	var createStep = function (setRunNextFrame) {
+	  var processToRun = [];
+	  var processToRunNextFrame = [];
+	  var numThisFrame = 0;
+	  var isProcessing = false;
+	  var i = 0;
+	  var cancelled = new WeakSet();
+	  var toKeepAlive = new WeakSet();
+	  var renderStep = {
+	    cancel: function (process) {
+	      var indexOfCallback = processToRunNextFrame.indexOf(process);
+	      cancelled.add(process);
+	      if (indexOfCallback !== -1) {
+	        processToRunNextFrame.splice(indexOfCallback, 1);
+	      }
+	    },
+	    process: function (frame) {
+	      var _a;
+	      isProcessing = true;
+	      _a = [processToRunNextFrame, processToRun], processToRun = _a[0], processToRunNextFrame = _a[1];
+	      processToRunNextFrame.length = 0;
+	      numThisFrame = processToRun.length;
+	      if (numThisFrame) {
+	        var process_1;
+	        for (i = 0; i < numThisFrame; i++) {
+	          process_1 = processToRun[i];
+	          process_1(frame);
+	          if (toKeepAlive.has(process_1) === true && !cancelled.has(process_1)) {
+	            renderStep.schedule(process_1);
+	            setRunNextFrame(true);
+	          }
+	        }
+	      }
+	      isProcessing = false;
+	    },
+	    schedule: function (process, keepAlive, immediate) {
+	      if (keepAlive === void 0) {
+	        keepAlive = false;
+	      }
+	      if (immediate === void 0) {
+	        immediate = false;
+	      }
+	      var addToCurrentBuffer = immediate && isProcessing;
+	      var buffer = addToCurrentBuffer ? processToRun : processToRunNextFrame;
+	      cancelled.delete(process);
+	      if (keepAlive) toKeepAlive.add(process);
+	      if (buffer.indexOf(process) === -1) {
+	        buffer.push(process);
+	        if (addToCurrentBuffer) numThisFrame = processToRun.length;
+	      }
+	    }
+	  };
+	  return renderStep;
+	};
+	var maxElapsed = 40;
+	var defaultElapsed = 1 / 60 * 1000;
+	var useDefaultElapsed = true;
+	var willRunNextFrame = false;
+	var isProcessing = false;
+	var frame = {
+	  delta: 0,
+	  timestamp: 0
+	};
+	var stepsOrder = ["read", "update", "preRender", "render", "postRender"];
+	var setWillRunNextFrame = function (willRun) {
+	  return willRunNextFrame = willRun;
+	};
+	var steps = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+	  acc[key] = createStep(setWillRunNextFrame);
+	  return acc;
+	}, {});
+	var sync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+	  var step = steps[key];
+	  acc[key] = function (process, keepAlive, immediate) {
+	    if (keepAlive === void 0) {
+	      keepAlive = false;
+	    }
+	    if (immediate === void 0) {
+	      immediate = false;
+	    }
+	    if (!willRunNextFrame) startLoop();
+	    step.schedule(process, keepAlive, immediate);
+	    return process;
+	  };
+	  return acc;
+	}, {});
+	var cancelSync = /*#__PURE__*/stepsOrder.reduce(function (acc, key) {
+	  acc[key] = steps[key].cancel;
+	  return acc;
+	}, {});
+	var processStep = function (stepId) {
+	  return steps[stepId].process(frame);
+	};
+	var processFrame = function (timestamp) {
+	  willRunNextFrame = false;
+	  frame.delta = useDefaultElapsed ? defaultElapsed : Math.max(Math.min(timestamp - frame.timestamp, maxElapsed), 1);
+	  if (!useDefaultElapsed) defaultElapsed = frame.delta;
+	  frame.timestamp = timestamp;
+	  isProcessing = true;
+	  stepsOrder.forEach(processStep);
+	  isProcessing = false;
+	  if (willRunNextFrame) {
+	    useDefaultElapsed = false;
+	    onNextFrame(processFrame);
+	  }
+	};
+	var startLoop = function () {
+	  willRunNextFrame = true;
+	  useDefaultElapsed = true;
+	  if (!isProcessing) onNextFrame(processFrame);
+	};
+	var getFrameData = function () {
+	  return frame;
+	};
+
+	var Chainable = /*#__PURE__*/function () {
+	  function Chainable(props) {
+	    if (props === void 0) {
+	      props = {};
+	    }
+	    this.props = props;
+	  }
+	  Chainable.prototype.applyMiddleware = function (middleware) {
+	    return this.create(__assign$2(__assign$2({}, this.props), {
+	      middleware: this.props.middleware ? __spreadArrays([middleware], this.props.middleware) : [middleware]
+	    }));
+	  };
+	  Chainable.prototype.pipe = function () {
+	    var funcs = [];
+	    for (var _i = 0; _i < arguments.length; _i++) {
+	      funcs[_i] = arguments[_i];
+	    }
+	    var pipedUpdate = funcs.length === 1 ? funcs[0] : pipe.apply(void 0, funcs);
+	    return this.applyMiddleware(function (update) {
+	      return function (v) {
+	        return update(pipedUpdate(v));
+	      };
+	    });
+	  };
+	  Chainable.prototype.while = function (predicate) {
+	    return this.applyMiddleware(function (update, complete) {
+	      return function (v) {
+	        return predicate(v) ? update(v) : complete();
+	      };
+	    });
+	  };
+	  Chainable.prototype.filter = function (predicate) {
+	    return this.applyMiddleware(function (update) {
+	      return function (v) {
+	        return predicate(v) && update(v);
+	      };
+	    });
+	  };
+	  return Chainable;
+	}();
+	var Observer = /*#__PURE__*/function () {
+	  function Observer(_a, observer) {
+	    var _this = this;
+	    var middleware = _a.middleware,
+	      onComplete = _a.onComplete;
+	    this.isActive = true;
+	    this.update = function (v) {
+	      if (_this.observer.update) _this.updateObserver(v);
+	    };
+	    this.complete = function () {
+	      if (_this.observer.complete && _this.isActive) _this.observer.complete();
+	      if (_this.onComplete) _this.onComplete();
+	      _this.isActive = false;
+	    };
+	    this.error = function (err) {
+	      if (_this.observer.error && _this.isActive) _this.observer.error(err);
+	      _this.isActive = false;
+	    };
+	    this.observer = observer;
+	    this.updateObserver = function (v) {
+	      return observer.update(v);
+	    };
+	    this.onComplete = onComplete;
+	    if (observer.update && middleware && middleware.length) {
+	      middleware.forEach(function (m) {
+	        return _this.updateObserver = m(_this.updateObserver, _this.complete);
+	      });
+	    }
+	  }
+	  return Observer;
+	}();
+	var createObserver = function (observerCandidate, _a, onComplete) {
+	  var middleware = _a.middleware;
+	  if (typeof observerCandidate === 'function') {
+	    return new Observer({
+	      middleware: middleware,
+	      onComplete: onComplete
+	    }, {
+	      update: observerCandidate
+	    });
+	  } else {
+	    return new Observer({
+	      middleware: middleware,
+	      onComplete: onComplete
+	    }, observerCandidate);
+	  }
+	};
+	var Action = /*#__PURE__*/function (_super) {
+	  __extends(Action, _super);
+	  function Action() {
+	    return _super !== null && _super.apply(this, arguments) || this;
+	  }
+	  Action.prototype.create = function (props) {
+	    return new Action(props);
+	  };
+	  Action.prototype.start = function (observerCandidate) {
+	    if (observerCandidate === void 0) {
+	      observerCandidate = {};
+	    }
+	    var isComplete = false;
+	    var subscription = {
+	      stop: function () {
+	        return undefined;
+	      }
+	    };
+	    var _a = this.props,
+	      init = _a.init,
+	      observerProps = __rest(_a, ["init"]);
+	    var observer = createObserver(observerCandidate, observerProps, function () {
+	      isComplete = true;
+	      subscription.stop();
+	    });
+	    var api = init(observer);
+	    subscription = api ? __assign$2(__assign$2({}, subscription), api) : subscription;
+	    if (observerCandidate.registerParent) {
+	      observerCandidate.registerParent(subscription);
+	    }
+	    if (isComplete) subscription.stop();
+	    return subscription;
+	  };
+	  return Action;
+	}(Chainable);
+	var action = function (init) {
+	  return new Action({
+	    init: init
+	  });
+	};
+	var multi = function (_a) {
+	  var getCount = _a.getCount,
+	    getFirst = _a.getFirst,
+	    getOutput = _a.getOutput,
+	    mapApi = _a.mapApi,
+	    setProp = _a.setProp,
+	    startActions = _a.startActions;
+	  return function (actions) {
+	    return action(function (_a) {
+	      var update = _a.update,
+	        complete = _a.complete,
+	        error = _a.error;
+	      var numActions = getCount(actions);
+	      var output = getOutput();
+	      var updateOutput = function () {
+	        return update(output);
+	      };
+	      var numCompletedActions = 0;
+	      var subs = startActions(actions, function (a, name) {
+	        var hasCompleted = false;
+	        return a.start({
+	          complete: function () {
+	            if (!hasCompleted) {
+	              hasCompleted = true;
+	              numCompletedActions++;
+	              if (numCompletedActions === numActions) sync.update(complete);
+	            }
+	          },
+	          error: error,
+	          update: function (v) {
+	            setProp(output, name, v);
+	            sync.update(updateOutput, false, true);
+	          }
+	        });
+	      });
+	      return Object.keys(getFirst(subs)).reduce(function (api, methodName) {
+	        api[methodName] = mapApi(subs, methodName);
+	        return api;
+	      }, {});
+	    });
+	  };
+	};
+	var composite = /*#__PURE__*/multi({
+	  getOutput: function () {
+	    return {};
+	  },
+	  getCount: function (subs) {
+	    return Object.keys(subs).length;
+	  },
+	  getFirst: function (subs) {
+	    return subs[Object.keys(subs)[0]];
+	  },
+	  mapApi: function (subs, methodName) {
+	    return function () {
+	      var args = [];
+	      for (var _i = 0; _i < arguments.length; _i++) {
+	        args[_i] = arguments[_i];
+	      }
+	      return Object.keys(subs).reduce(function (output, propKey) {
+	        var _a;
+	        if (subs[propKey][methodName]) {
+	          args[0] && args[0][propKey] !== undefined ? output[propKey] = subs[propKey][methodName](args[0][propKey]) : output[propKey] = (_a = subs[propKey])[methodName].apply(_a, args);
+	        }
+	        return output;
+	      }, {});
+	    };
+	  },
+	  setProp: function (output, name, v) {
+	    return output[name] = v;
+	  },
+	  startActions: function (actions, starter) {
+	    return Object.keys(actions).reduce(function (subs, key) {
+	      subs[key] = starter(actions[key], key);
+	      return subs;
+	    }, {});
+	  }
+	});
+	var parallel = /*#__PURE__*/multi({
+	  getOutput: function () {
+	    return [];
+	  },
+	  getCount: function (subs) {
+	    return subs.length;
+	  },
+	  getFirst: function (subs) {
+	    return subs[0];
+	  },
+	  mapApi: function (subs, methodName) {
+	    return function () {
+	      var args = [];
+	      for (var _i = 0; _i < arguments.length; _i++) {
+	        args[_i] = arguments[_i];
+	      }
+	      return subs.map(function (sub, i) {
+	        if (sub[methodName]) {
+	          return Array.isArray(args[0]) ? sub[methodName](args[0][i]) : sub[methodName].apply(sub, args);
+	        }
+	      });
+	    };
+	  },
+	  setProp: function (output, name, v) {
+	    return output[name] = v;
+	  },
+	  startActions: function (actions, starter) {
+	    return actions.map(function (action, i) {
+	      return starter(action, i);
+	    });
+	  }
+	});
+	var parallel$1 = function () {
+	  var actions = [];
+	  for (var _i = 0; _i < arguments.length; _i++) {
+	    actions[_i] = arguments[_i];
+	  }
+	  return parallel(actions);
+	};
+	var createVectorTests = function (typeTests) {
+	  var testNames = Object.keys(typeTests);
+	  var isVectorProp = function (prop, key) {
+	    return prop !== undefined && !typeTests[key](prop);
+	  };
+	  var getVectorKeys = function (props) {
+	    return testNames.reduce(function (vectorKeys, key) {
+	      if (isVectorProp(props[key], key)) vectorKeys.push(key);
+	      return vectorKeys;
+	    }, []);
+	  };
+	  var testVectorProps = function (props) {
+	    return props && testNames.some(function (key) {
+	      return isVectorProp(props[key], key);
+	    });
+	  };
+	  return {
+	    getVectorKeys: getVectorKeys,
+	    testVectorProps: testVectorProps
+	  };
+	};
+	var unitTypes = [px, percent, degrees, vh, vw];
+	var findUnitType = function (prop) {
+	  return unitTypes.find(function (type) {
+	    return type.test(prop);
+	  });
+	};
+	var isUnitProp = function (prop) {
+	  return Boolean(findUnitType(prop));
+	};
+	var createAction = function (action, props) {
+	  return action(props);
+	};
+	var reduceArrayValue = function (i) {
+	  return function (props, key) {
+	    props[key] = props[key][i];
+	    return props;
+	  };
+	};
+	var createArrayAction = function (action, props, vectorKeys) {
+	  var firstVectorKey = vectorKeys[0];
+	  var actionList = props[firstVectorKey].map(function (v, i) {
+	    var childActionProps = vectorKeys.reduce(reduceArrayValue(i), __assign$2({}, props));
+	    return getActionCreator(v)(action, childActionProps);
+	  });
+	  return parallel$1.apply(void 0, actionList);
+	};
+	var reduceObjectValue = function (key) {
+	  return function (props, propKey) {
+	    props[propKey] = props[propKey][key];
+	    return props;
+	  };
+	};
+	var createObjectAction = function (action, props, vectorKeys) {
+	  var firstVectorKey = vectorKeys[0];
+	  var actionMap = Object.keys(props[firstVectorKey]).reduce(function (map, key) {
+	    var childActionProps = vectorKeys.reduce(reduceObjectValue(key), __assign$2({}, props));
+	    map[key] = getActionCreator(props[firstVectorKey][key])(action, childActionProps);
+	    return map;
+	  }, {});
+	  return composite(actionMap);
+	};
+	var createUnitAction = function (action, _a) {
+	  var from = _a.from,
+	    to = _a.to,
+	    props = __rest(_a, ["from", "to"]);
+	  var unitType = findUnitType(from) || findUnitType(to);
+	  var transform = unitType.transform,
+	    parse = unitType.parse;
+	  return action(__assign$2(__assign$2({}, props), {
+	    from: typeof from === 'string' ? parse(from) : from,
+	    to: typeof to === 'string' ? parse(to) : to
+	  })).pipe(transform);
+	};
+	var createMixerAction = function (mixer) {
+	  return function (action, _a) {
+	    var from = _a.from,
+	      to = _a.to,
+	      props = __rest(_a, ["from", "to"]);
+	    return action(__assign$2(__assign$2({}, props), {
+	      from: 0,
+	      to: 1
+	    })).pipe(mixer(from, to));
+	  };
+	};
+	var createColorAction = /*#__PURE__*/createMixerAction(mixColor);
+	var createComplexAction = /*#__PURE__*/createMixerAction(mixComplex);
+	var createVectorAction = function (action, typeTests) {
+	  var _a = createVectorTests(typeTests),
+	    testVectorProps = _a.testVectorProps,
+	    getVectorKeys = _a.getVectorKeys;
+	  var vectorAction = function (props) {
+	    var isVector = testVectorProps(props);
+	    if (!isVector) return action(props);
+	    var vectorKeys = getVectorKeys(props);
+	    var testKey = vectorKeys[0];
+	    var testProp = props[testKey];
+	    return getActionCreator(testProp)(action, props, vectorKeys);
+	  };
+	  return vectorAction;
+	};
+	var getActionCreator = function (prop) {
+	  if (typeof prop === 'number') {
+	    return createAction;
+	  } else if (Array.isArray(prop)) {
+	    return createArrayAction;
+	  } else if (isUnitProp(prop)) {
+	    return createUnitAction;
+	  } else if (color.test(prop)) {
+	    return createColorAction;
+	  } else if (complex.test(prop)) {
+	    return createComplexAction;
+	  } else if (typeof prop === 'object') {
+	    return createObjectAction;
+	  } else {
+	    return createAction;
+	  }
+	};
+	var decay = function (props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+	  return action(function (_a) {
+	    var complete = _a.complete,
+	      update = _a.update;
+	    var _b = props.velocity,
+	      velocity = _b === void 0 ? 0 : _b,
+	      _c = props.from,
+	      from = _c === void 0 ? 0 : _c,
+	      _d = props.power,
+	      power = _d === void 0 ? 0.8 : _d,
+	      _e = props.timeConstant,
+	      timeConstant = _e === void 0 ? 350 : _e,
+	      _f = props.restDelta,
+	      restDelta = _f === void 0 ? 0.5 : _f,
+	      modifyTarget = props.modifyTarget;
+	    var elapsed = 0;
+	    var amplitude = power * velocity;
+	    var idealTarget = from + amplitude;
+	    var target = typeof modifyTarget === 'undefined' ? idealTarget : modifyTarget(idealTarget);
+	    if (target !== idealTarget) amplitude = target - from;
+	    var process = sync.update(function (_a) {
+	      var frameDelta = _a.delta;
+	      elapsed += frameDelta;
+	      var delta = -amplitude * Math.exp(-elapsed / timeConstant);
+	      var isMoving = delta > restDelta || delta < -restDelta;
+	      var current = isMoving ? target + delta : target;
+	      update(current);
+	      if (!isMoving) {
+	        cancelSync.update(process);
+	        complete();
+	      }
+	    }, true);
+	    return {
+	      stop: function () {
+	        return cancelSync.update(process);
+	      }
+	    };
+	  });
+	};
+	/*#__PURE__*/createVectorAction(decay, {
+	  from: number.test,
+	  modifyTarget: function (func) {
+	    return typeof func === 'function';
+	  },
+	  velocity: number.test
+	});
+	var spring = function (props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+	  return action(function (_a) {
+	    var update = _a.update,
+	      complete = _a.complete;
+	    var _b = props.velocity,
+	      velocity = _b === void 0 ? 0.0 : _b;
+	    var _c = props.from,
+	      from = _c === void 0 ? 0.0 : _c,
+	      _d = props.to,
+	      to = _d === void 0 ? 0.0 : _d,
+	      _e = props.stiffness,
+	      stiffness = _e === void 0 ? 100 : _e,
+	      _f = props.damping,
+	      damping = _f === void 0 ? 10 : _f,
+	      _g = props.mass,
+	      mass = _g === void 0 ? 1.0 : _g,
+	      _h = props.restSpeed,
+	      restSpeed = _h === void 0 ? 0.01 : _h,
+	      _j = props.restDelta,
+	      restDelta = _j === void 0 ? 0.01 : _j;
+	    var initialVelocity = velocity ? -(velocity / 1000) : 0.0;
+	    var t = 0;
+	    var delta = to - from;
+	    var position = from;
+	    var prevPosition = position;
+	    var process = sync.update(function (_a) {
+	      var timeDelta = _a.delta;
+	      t += timeDelta;
+	      var dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
+	      var angularFreq = Math.sqrt(stiffness / mass) / 1000;
+	      prevPosition = position;
+	      if (dampingRatio < 1) {
+	        var envelope = Math.exp(-dampingRatio * angularFreq * t);
+	        var expoDecay = angularFreq * Math.sqrt(1.0 - dampingRatio * dampingRatio);
+	        position = to - envelope * ((initialVelocity + dampingRatio * angularFreq * delta) / expoDecay * Math.sin(expoDecay * t) + delta * Math.cos(expoDecay * t));
+	      } else {
+	        var envelope = Math.exp(-angularFreq * t);
+	        position = to - envelope * (delta + (initialVelocity + angularFreq * delta) * t);
+	      }
+	      velocity = velocityPerSecond(position - prevPosition, timeDelta);
+	      var isBelowVelocityThreshold = Math.abs(velocity) <= restSpeed;
+	      var isBelowDisplacementThreshold = Math.abs(to - position) <= restDelta;
+	      if (isBelowVelocityThreshold && isBelowDisplacementThreshold) {
+	        position = to;
+	        update(position);
+	        cancelSync.update(process);
+	        complete();
+	      } else {
+	        update(position);
+	      }
+	    }, true);
+	    return {
+	      stop: function () {
+	        return cancelSync.update(process);
+	      }
+	    };
+	  });
+	};
+	/*#__PURE__*/createVectorAction(spring, {
+	  from: number.test,
+	  to: number.test,
+	  stiffness: number.test,
+	  damping: number.test,
+	  mass: number.test,
+	  velocity: number.test
+	});
+	var inertia = function (_a) {
+	  var _b = _a.from,
+	    from = _b === void 0 ? 0 : _b,
+	    _c = _a.velocity,
+	    velocity = _c === void 0 ? 0 : _c,
+	    min = _a.min,
+	    max = _a.max,
+	    _d = _a.power,
+	    power = _d === void 0 ? 0.8 : _d,
+	    _e = _a.timeConstant,
+	    timeConstant = _e === void 0 ? 700 : _e,
+	    _f = _a.bounceStiffness,
+	    bounceStiffness = _f === void 0 ? 500 : _f,
+	    _g = _a.bounceDamping,
+	    bounceDamping = _g === void 0 ? 10 : _g,
+	    _h = _a.restDelta,
+	    restDelta = _h === void 0 ? 1 : _h,
+	    modifyTarget = _a.modifyTarget;
+	  return action(function (_a) {
+	    var update = _a.update,
+	      complete = _a.complete;
+	    var prev = from;
+	    var current = from;
+	    var activeAnimation;
+	    var isOutOfBounds = function (v) {
+	      return min !== undefined && v < min || max !== undefined && v > max;
+	    };
+	    var boundaryNearest = function (v) {
+	      return Math.abs(min - v) < Math.abs(max - v) ? min : max;
+	    };
+	    var startAnimation = function (animation, next) {
+	      activeAnimation && activeAnimation.stop();
+	      activeAnimation = animation.start({
+	        update: update,
+	        complete: function () {
+	          if (next) {
+	            next();
+	            return;
+	          }
+	          complete();
+	        }
+	      });
+	    };
+	    var startSpring = function (props) {
+	      startAnimation(spring(__assign$2(__assign$2({}, props), {
+	        stiffness: bounceStiffness,
+	        damping: bounceDamping,
+	        restDelta: restDelta
+	      })));
+	    };
+	    if (isOutOfBounds(from)) {
+	      startSpring({
+	        from: from,
+	        velocity: velocity,
+	        to: boundaryNearest(from)
+	      });
+	    } else {
+	      var to = power * velocity + from;
+	      if (typeof modifyTarget !== 'undefined') {
+	        to = modifyTarget(to);
+	        modifyTarget = void 0;
+	        velocity = (to - from) / power;
+	      }
+	      var animation = decay({
+	        from: from,
+	        velocity: velocity,
+	        timeConstant: timeConstant,
+	        power: power,
+	        restDelta: restDelta,
+	        modifyTarget: modifyTarget
+	      });
+	      var next = void 0;
+	      if (isOutOfBounds(to)) {
+	        var boundary_1 = boundaryNearest(to);
+	        var heading_1 = boundary_1 == min ? -1 : 1;
+	        animation = animation.while(function (v) {
+	          prev = current;
+	          velocity = velocityPerSecond(v - prev, getFrameData().delta);
+	          current = v;
+	          return boundary_1 - v * heading_1 > 0;
+	        });
+	        next = function () {
+	          return startSpring({
+	            from: current,
+	            to: boundary_1,
+	            velocity: velocity
+	          });
+	        };
+	      }
+	      startAnimation(animation, next);
+	    }
+	    return {
+	      stop: function () {
+	        return activeAnimation && activeAnimation.stop();
+	      }
+	    };
+	  });
+	};
+	/*#__PURE__*/createVectorAction(inertia, {
+	  from: number.test,
+	  velocity: number.test,
+	  min: number.test,
+	  max: number.test,
+	  damping: number.test,
+	  stiffness: number.test,
+	  modifyTarget: function (func) {
+	    return typeof func === 'function';
+	  }
+	});
+	var scrubber = function (_a) {
+	  var _b = _a.from,
+	    from = _b === void 0 ? 0 : _b,
+	    _c = _a.to,
+	    to = _c === void 0 ? 1 : _c,
+	    _d = _a.ease,
+	    ease = _d === void 0 ? linear : _d,
+	    _e = _a.reverseEase,
+	    reverseEase = _e === void 0 ? false : _e;
+	  if (reverseEase) {
+	    ease = createReversedEasing(ease);
+	  }
+	  return action(function (_a) {
+	    var update = _a.update;
+	    return {
+	      seek: function (progress) {
+	        return update(progress);
+	      }
+	    };
+	  }).pipe(ease, function (v) {
+	    return mix(from, to, v);
+	  });
+	};
+	var vectorScrubber = /*#__PURE__*/createVectorAction(scrubber, {
+	  ease: function (func) {
+	    return typeof func === 'function';
+	  },
+	  from: number.test,
+	  to: number.test
+	});
+	var clampProgress = /*#__PURE__*/clamp$1(0, 1);
+	var tween = function (props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+	  return action(function (_a) {
+	    var update = _a.update,
+	      complete = _a.complete;
+	    var _b = props.duration,
+	      duration = _b === void 0 ? 300 : _b,
+	      _c = props.ease,
+	      ease = _c === void 0 ? easeOut : _c,
+	      _d = props.flip,
+	      flip = _d === void 0 ? 0 : _d,
+	      _e = props.loop,
+	      loop = _e === void 0 ? 0 : _e,
+	      _f = props.yoyo,
+	      yoyo = _f === void 0 ? 0 : _f,
+	      _g = props.repeatDelay,
+	      repeatDelay = _g === void 0 ? 0 : _g;
+	    var _h = props.from,
+	      from = _h === void 0 ? 0 : _h,
+	      _j = props.to,
+	      to = _j === void 0 ? 1 : _j,
+	      _k = props.elapsed,
+	      elapsed = _k === void 0 ? 0 : _k,
+	      _l = props.flipCount,
+	      flipCount = _l === void 0 ? 0 : _l,
+	      _m = props.yoyoCount,
+	      yoyoCount = _m === void 0 ? 0 : _m,
+	      _o = props.loopCount,
+	      loopCount = _o === void 0 ? 0 : _o;
+	    var playhead = vectorScrubber({
+	      from: from,
+	      to: to,
+	      ease: ease
+	    }).start(update);
+	    var currentProgress = 0;
+	    var process;
+	    var isActive = false;
+	    var reverseAnimation = function (reverseEase) {
+	      var _a;
+	      if (reverseEase === void 0) {
+	        reverseEase = false;
+	      }
+	      _a = [to, from], from = _a[0], to = _a[1];
+	      playhead = vectorScrubber({
+	        from: from,
+	        to: to,
+	        ease: ease,
+	        reverseEase: reverseEase
+	      }).start(update);
+	    };
+	    var isTweenComplete = function () {
+	      var isComplete = isActive && elapsed > duration + repeatDelay;
+	      if (!isComplete) return false;
+	      if (isComplete && !loop && !flip && !yoyo) return true;
+	      elapsed = duration - (elapsed - repeatDelay);
+	      if (loop && loopCount < loop) {
+	        loopCount++;
+	        return false;
+	      } else if (flip && flipCount < flip) {
+	        flipCount++;
+	        reverseAnimation();
+	        return false;
+	      } else if (yoyo && yoyoCount < yoyo) {
+	        yoyoCount++;
+	        reverseAnimation(yoyoCount % 2 !== 0);
+	        return false;
+	      }
+	      return true;
+	    };
+	    var updateTween = function () {
+	      currentProgress = clampProgress(progress(0, duration, elapsed));
+	      playhead.seek(currentProgress);
+	    };
+	    var startTimer = function () {
+	      isActive = true;
+	      process = sync.update(function (_a) {
+	        var delta = _a.delta;
+	        elapsed += delta;
+	        updateTween();
+	        if (isTweenComplete()) {
+	          cancelSync.update(process);
+	          complete && sync.update(complete, false, true);
+	        }
+	      }, true);
+	    };
+	    var stopTimer = function () {
+	      isActive = false;
+	      if (process) cancelSync.update(process);
+	    };
+	    startTimer();
+	    return {
+	      isActive: function () {
+	        return isActive;
+	      },
+	      getElapsed: function () {
+	        return clamp$1(0, duration, elapsed);
+	      },
+	      getProgress: function () {
+	        return currentProgress;
+	      },
+	      stop: function () {
+	        stopTimer();
+	      },
+	      pause: function () {
+	        stopTimer();
+	        return this;
+	      },
+	      resume: function () {
+	        if (!isActive) startTimer();
+	        return this;
+	      },
+	      seek: function (newProgress) {
+	        elapsed = mix(0, duration, newProgress);
+	        sync.update(updateTween, false, true);
+	        return this;
+	      },
+	      reverse: function () {
+	        reverseAnimation();
+	        return this;
+	      }
+	    };
+	  });
+	};
+	var physics = function (props) {
+	  if (props === void 0) {
+	    props = {};
+	  }
+	  return action(function (_a) {
+	    var complete = _a.complete,
+	      update = _a.update;
+	    var _b = props.acceleration,
+	      acceleration = _b === void 0 ? 0 : _b,
+	      _c = props.friction,
+	      friction = _c === void 0 ? 0 : _c,
+	      _d = props.velocity,
+	      velocity = _d === void 0 ? 0 : _d,
+	      springStrength = props.springStrength,
+	      to = props.to;
+	    var _e = props.restSpeed,
+	      restSpeed = _e === void 0 ? 0.001 : _e,
+	      _f = props.from,
+	      from = _f === void 0 ? 0 : _f;
+	    var current = from;
+	    var process = sync.update(function (_a) {
+	      var delta = _a.delta;
+	      var elapsed = Math.max(delta, 16);
+	      if (acceleration) velocity += velocityPerFrame(acceleration, elapsed);
+	      if (friction) velocity *= Math.pow(1 - friction, elapsed / 100);
+	      if (springStrength !== undefined && to !== undefined) {
+	        var distanceToTarget = to - current;
+	        velocity += distanceToTarget * velocityPerFrame(springStrength, elapsed);
+	      }
+	      current += velocityPerFrame(velocity, elapsed);
+	      update(current);
+	      var isComplete = restSpeed !== false && (!velocity || Math.abs(velocity) <= restSpeed);
+	      if (isComplete) {
+	        cancelSync.update(process);
+	        complete();
+	      }
+	    }, true);
+	    return {
+	      set: function (v) {
+	        current = v;
+	        return this;
+	      },
+	      setAcceleration: function (v) {
+	        acceleration = v;
+	        return this;
+	      },
+	      setFriction: function (v) {
+	        friction = v;
+	        return this;
+	      },
+	      setSpringStrength: function (v) {
+	        springStrength = v;
+	        return this;
+	      },
+	      setSpringTarget: function (v) {
+	        to = v;
+	        return this;
+	      },
+	      setVelocity: function (v) {
+	        velocity = v;
+	        return this;
+	      },
+	      stop: function () {
+	        return cancelSync.update(process);
+	      }
+	    };
+	  });
+	};
+	/*#__PURE__*/createVectorAction(physics, {
+	  acceleration: number.test,
+	  friction: number.test,
+	  velocity: number.test,
+	  from: number.test,
+	  to: number.test,
+	  springStrength: number.test
+	});
+	var listen = function (element, events, options) {
+	  return action(function (_a) {
+	    var update = _a.update;
+	    var eventNames = events.split(' ').map(function (eventName) {
+	      element.addEventListener(eventName, update, options);
+	      return eventName;
+	    });
+	    return {
+	      stop: function () {
+	        return eventNames.forEach(function (eventName) {
+	          return element.removeEventListener(eventName, update, options);
+	        });
+	      }
+	    };
+	  });
+	};
+	var defaultPointerPos = function () {
+	  return {
+	    clientX: 0,
+	    clientY: 0,
+	    pageX: 0,
+	    pageY: 0,
+	    x: 0,
+	    y: 0
+	  };
+	};
+	var eventToPoint = function (e, point) {
+	  if (point === void 0) {
+	    point = defaultPointerPos();
+	  }
+	  point.clientX = point.x = e.clientX;
+	  point.clientY = point.y = e.clientY;
+	  point.pageX = e.pageX;
+	  point.pageY = e.pageY;
+	  return point;
+	};
+	var points = [/*#__PURE__*/defaultPointerPos()];
+	if (typeof document !== 'undefined') {
+	  var updatePointsLocation = function (_a) {
+	    var touches = _a.touches;
+	    var numTouches = touches.length;
+	    points.length = 0;
+	    for (var i = 0; i < numTouches; i++) {
+	      var thisTouch = touches[i];
+	      points.push(eventToPoint(thisTouch));
+	    }
+	  };
+	  listen(document, 'touchstart touchmove', {
+	    passive: true,
+	    capture: true
+	  }).start(updatePointsLocation);
+	}
+	var point = /*#__PURE__*/defaultPointerPos();
+	if (typeof document !== 'undefined') {
+	  var updatePointLocation = function (e) {
+	    eventToPoint(e, point);
+	  };
+	  listen(document, 'mousedown mousemove', true).start(updatePointLocation);
+	}
+
+	/* eslint-disable @typescript-eslint/no-empty-function */
+
+	const $149c1bd638913645$var$popmotionEasing = {
+	  anticipate: anticipate,
+	  backIn: backIn,
+	  backInOut: backInOut,
+	  backOut: backOut,
+	  circIn: circIn,
+	  circInOut: circInOut,
+	  circOut: circOut,
+	  easeIn: easeIn,
+	  easeInOut: easeInOut,
+	  easeOut: easeOut,
+	  linear: linear
+	};
+	const $149c1bd638913645$var$DATASET_KEY = "animateGridId";
+	// in order to account for scroll, (which we're not listening for)
+	// always cache the item's position relative
+	// to the top and left of the grid container
+	const $149c1bd638913645$var$getGridAwareBoundingClientRect = (gridBoundingClientRect, el) => {
+	  const {
+	    top: top,
+	    left: left,
+	    width: width,
+	    height: height
+	  } = el.getBoundingClientRect();
+	  const rect = {
+	    top: top,
+	    left: left,
+	    width: width,
+	    height: height
+	  };
+	  rect.top -= gridBoundingClientRect.top;
+	  rect.left -= gridBoundingClientRect.left;
+	  // if an element is display:none it will return top: 0 and left:0
+	  // rather than saying it's still in the containing element
+	  // so we need to use Math.max to make sure the coordinates stay
+	  // within the container
+	  rect.top = Math.max(rect.top, 0);
+	  rect.left = Math.max(rect.left, 0);
+	  return rect;
+	};
+	// the function used during the tweening
+	const $149c1bd638913645$var$applyCoordTransform = (el, {
+	  translateX: translateX,
+	  translateY: translateY,
+	  scaleX: scaleX,
+	  scaleY: scaleY
+	}, {
+	  immediate: immediate
+	} = {}) => {
+	  const isFinished = translateX === 0 && translateY === 0 && scaleX === 1 && scaleY === 1;
+	  const styleEl = () => {
+	    el.style.transform = isFinished ? "" : `translateX(${translateX}px) translateY(${translateY}px) scaleX(${scaleX}) scaleY(${scaleY})`;
+	  };
+	  if (immediate) styleEl();else (sync$1).render(styleEl);
+	  const firstChild = el.children[0];
+	  if (firstChild) {
+	    const styleChild = () => {
+	      firstChild.style.transform = isFinished ? "" : `scaleX(${1 / scaleX}) scaleY(${1 / scaleY})`;
+	    };
+	    if (immediate) styleChild();else (sync$1).render(styleChild);
+	  }
+	};
+	const $149c1bd638913645$export$cfa74da6327324bf = (container, {
+	  duration = 250,
+	  stagger = 0,
+	  easing = "easeInOut",
+	  onStart = () => {},
+	  onEnd = () => {}
+	} = {}) => {
+	  if (!$149c1bd638913645$var$popmotionEasing[easing]) throw new Error(`${easing} is not a valid easing name`);
+	  let mutationsDisabled = false;
+	  const disableMutationsWhileFunctionRuns = func => {
+	    mutationsDisabled = true;
+	    func();
+	    setTimeout(() => {
+	      mutationsDisabled = false;
+	    }, 0);
+	  };
+	  // all cached position data, and in-progress tween data, is stored here
+	  const cachedPositionData = {};
+	  // initially and after every transition, record element positions
+	  const recordPositions = elements => {
+	    const gridBoundingClientRect = container.getBoundingClientRect();
+	    Array.from(elements).forEach(el => {
+	      if (typeof el.getBoundingClientRect !== "function") return;
+	      if (!el.dataset[$149c1bd638913645$var$DATASET_KEY]) {
+	        const newId = `${Math.random()}`;
+	        el.dataset[$149c1bd638913645$var$DATASET_KEY] = newId;
+	      }
+	      const animateGridId = el.dataset[$149c1bd638913645$var$DATASET_KEY];
+	      if (!cachedPositionData[animateGridId]) cachedPositionData[animateGridId] = {};
+	      const rect = $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, el);
+	      cachedPositionData[animateGridId].rect = rect;
+	      cachedPositionData[animateGridId].gridBoundingClientRect = gridBoundingClientRect;
+	    });
+	  };
+	  recordPositions(container.children);
+	  const throttledResizeListener = (lodash_throttle)(() => {
+	    const bodyElement = document.querySelector("body");
+	    const containerIsNoLongerInPage = bodyElement && !bodyElement.contains(container);
+	    if (!container || containerIsNoLongerInPage) window.removeEventListener("resize", throttledResizeListener);
+	    recordPositions(container.children);
+	  }, 250);
+	  window.addEventListener("resize", throttledResizeListener);
+	  const throttledScrollListener = (lodash_throttle)(() => {
+	    recordPositions(container.children);
+	  }, 20);
+	  container.addEventListener("scroll", throttledScrollListener);
+	  const mutationCallback = mutationsList => {
+	    if (mutationsList !== "forceGridAnimation") {
+	      // check if we care about the mutation
+	      const relevantMutationHappened = mutationsList.filter(m => m.attributeName === "class" || m.addedNodes.length || m.removedNodes.length).length;
+	      if (!relevantMutationHappened) return;
+	      if (mutationsDisabled) return;
+	    }
+	    const gridBoundingClientRect = container.getBoundingClientRect();
+	    const childrenElements = Array.from(container.children);
+	    // stop current transitions and remove transforms on transitioning elements
+	    childrenElements.filter(el => {
+	      const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
+	      if (itemPosition && itemPosition.stopTween) {
+	        itemPosition.stopTween();
+	        delete itemPosition.stopTween;
+	        return true;
+	      }
+	    }).forEach(el => {
+	      el.style.transform = "";
+	      const firstChild = el.children[0];
+	      if (firstChild) firstChild.style.transform = "";
+	    });
+	    const animatedGridChildren = childrenElements.map(el => ({
+	      childCoords: {},
+	      el: el,
+	      boundingClientRect: $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, el)
+	    })).filter(({
+	      el: el,
+	      boundingClientRect: boundingClientRect
+	    }) => {
+	      const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
+	      // don't animate the initial appearance of elements,
+	      // just cache their position so they can be animated later
+	      if (!itemPosition) {
+	        recordPositions([el]);
+	        return false;
+	      } else if (boundingClientRect.top === itemPosition.rect.top && boundingClientRect.left === itemPosition.rect.left && boundingClientRect.width === itemPosition.rect.width && boundingClientRect.height === itemPosition.rect.height)
+	        // if it hasn't moved, dont animate it
+	        return false;
+	      return true;
+	    });
+	    // having more than one child in the animated item is not supported
+	    animatedGridChildren.forEach(({
+	      el: el
+	    }) => {
+	      if (Array.from(el.children).length > 1) throw new Error("Make sure every grid item has a single container element surrounding its children");
+	    });
+	    if (!animatedGridChildren.length) return;
+	    const animatedElements = animatedGridChildren.map(({
+	      el: el
+	    }) => el);
+	    disableMutationsWhileFunctionRuns(() => onStart(animatedElements));
+	    const completionPromises = [];
+	    animatedGridChildren // do this measurement first so as not to cause layout thrashing
+	    .map(data => {
+	      const firstChild = data.el.children[0];
+	      // different transform origins give different effects. "50% 50%" is default
+	      if (firstChild) data.childCoords = $149c1bd638913645$var$getGridAwareBoundingClientRect(gridBoundingClientRect, firstChild);
+	      return data;
+	    }).forEach(({
+	      el: el,
+	      boundingClientRect: {
+	        top: top,
+	        left: left,
+	        width: width,
+	        height: height
+	      },
+	      childCoords: {
+	        top: childTop,
+	        left: childLeft
+	      }
+	    }, i) => {
+	      const firstChild = el.children[0];
+	      const itemPosition = cachedPositionData[el.dataset[$149c1bd638913645$var$DATASET_KEY]];
+	      const coords = {
+	        scaleX: itemPosition.rect.width / width,
+	        scaleY: itemPosition.rect.height / height,
+	        translateX: itemPosition.rect.left - left,
+	        translateY: itemPosition.rect.top - top
+	      };
+	      el.style.transformOrigin = "0 0";
+	      if (firstChild && childLeft === left && childTop === top) firstChild.style.transformOrigin = "0 0";
+	      let cachedResolve;
+	      const completionPromise = new Promise(resolve => {
+	        cachedResolve = resolve;
+	      });
+	      completionPromises.push(completionPromise);
+	      $149c1bd638913645$var$applyCoordTransform(el, coords, {
+	        immediate: true
+	      });
+	      // now start the animation
+	      const startAnimation = () => {
+	        const {
+	          stop: stop
+	        } = (tween)({
+	          from: coords,
+	          to: {
+	            translateX: 0,
+	            translateY: 0,
+	            scaleX: 1,
+	            scaleY: 1
+	          },
+	          duration: duration,
+	          ease: $149c1bd638913645$var$popmotionEasing[easing]
+	        }).start({
+	          update: transforms => {
+	            $149c1bd638913645$var$applyCoordTransform(el, transforms);
+	            // this helps prevent layout thrashing
+	            (sync$1).postRender(() => recordPositions([el]));
+	          },
+	          complete: cachedResolve
+	        });
+	        itemPosition.stopTween = stop;
+	      };
+	      if (typeof stagger !== "number") startAnimation();else {
+	        const timeoutId = setTimeout(() => {
+	          (sync$1).update(startAnimation);
+	        }, stagger * i);
+	        itemPosition.stopTween = () => clearTimeout(timeoutId);
+	      }
+	    });
+	    Promise.all(completionPromises).then(() => {
+	      onEnd(animatedElements);
+	    });
+	  };
+	  const observer = new MutationObserver(mutationCallback);
+	  observer.observe(container, {
+	    childList: true,
+	    attributes: true,
+	    subtree: true,
+	    attributeFilter: ["class"]
+	  });
+	  const unwrapGrid = () => {
+	    window.removeEventListener("resize", throttledResizeListener);
+	    container.removeEventListener("scroll", throttledScrollListener);
+	    observer.disconnect();
+	  };
+	  const forceGridAnimation = () => mutationCallback("forceGridAnimation");
+	  return {
+	    unwrapGrid: unwrapGrid,
+	    forceGridAnimation: forceGridAnimation
+	  };
+	};
+
+	const grid = document.querySelector(".tiles");
+	$149c1bd638913645$export$cfa74da6327324bf(grid);
+
+	//const scroll = new LocomotiveScroll();
+
+	document.addEventListener("DOMContentLoaded", function () {
+	  window.addEventListener('scroll', function () {
+	    if (window.scrollY > 57) {
+	      document.getElementById('main-nav').classList.add('fixed-top');
+	    } else {
+	      document.getElementById('main-nav').classList.remove('fixed-top');
+	    }
+	  });
+	});
+	jQuery(document).ready(function ($) {
+	  if ($(window).width() > 900) {
+	    $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
+	    $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
+	  }
+	  window.addEventListener('resize', function () {
+	    if ($(window).width() > 900) {
+	      $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left', "-" + $('#content').css('margin-left'));
+	      $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right', "-" + $('#content').css('margin-right'));
+	    }
 	  });
 	  });
 	  function expandTiles() {
 	  function expandTiles() {
 	    var tiles = $('.tile');
 	    var tiles = $('.tile');

@@ -6,8 +6,8 @@ import "_count-up";
 
 
 import { wrapGrid } from 'animate-css-grid'
 import { wrapGrid } from 'animate-css-grid'
 
 
-//const grid = document.querySelector(".tiles");
-//wrapGrid(grid);
+const grid = document.querySelector(".tiles");
+wrapGrid(grid);
 
 
 //const scroll = new LocomotiveScroll();
 //const scroll = new LocomotiveScroll();
 
 
@@ -23,12 +23,19 @@ document.addEventListener("DOMContentLoaded", function() {
 
 
 
 
 jQuery(document).ready(function($) {
 jQuery(document).ready(function($) {
-  $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
-  $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 
-  window.addEventListener('resize', function() {
+
+  
+  if ($(window).width() > 900) {
     $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
     $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
     $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 
     $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right')); 
+    }
+  window.addEventListener('resize', function() {
+    if ($(window).width() > 900) {
+    $('.the-numbers .wp-block-columns .wp-block-column:first-of-type').css('margin-left',"-"+$('#content').css('margin-left')); 
+    $('.the-numbers .wp-block-columns .wp-block-column:last-of-type').css('margin-right',"-"+$('#content').css('margin-right'));
+    } 
   });
   });
+  
 
 
   function expandTiles(){
   function expandTiles(){
     var tiles = $('.tile');
     var tiles = $('.tile');

@@ -66,12 +66,12 @@
         overflow: hidden;
         overflow: hidden;
         margin-bottom: 15px;
         margin-bottom: 15px;
        }
        }
-  .large{
-        color: #333333;
-        font-size: 40px;
-        line-height: 48px;
-        
-    }
+    .large{
+          color: #333333;
+          font-size: 40px;
+          line-height: 48px;
+          
+      }
     
     
   }
   }
 
 
@@ -235,14 +235,24 @@
 .the-numbers{
 .the-numbers{
      margin-left: -12px;
      margin-left: -12px;
      margin-right: -12px;
      margin-right: -12px;
+     @media (max-width: 900px) {
+      margin-left: -50px;
+      margin-right: -50px;
+     }
     .wp-block-columns{
     .wp-block-columns{
       gap: 0em;
       gap: 0em;
+      @media (max-width: 900px) {
+        flex-wrap: wrap!important;
+      }
     }
     }
     
     
     .wp-block-column{
     .wp-block-column{
       padding: 50px;
       padding: 50px;
       background-color: #7AA6AD;
       background-color: #7AA6AD;
       color: #fff;
       color: #fff;
+      @media (max-width: 900px) {
+        flex-basis: 50% !important;
+      }
     }
     }
     .wp-block-column:nth-of-type(2){
     .wp-block-column:nth-of-type(2){
       background-color: #C2B59B;
       background-color: #C2B59B;
@@ -283,6 +293,7 @@
   background-color: #333333;
   background-color: #333333;
   margin: 0px -25%;
   margin: 0px -25%;
   padding: 40px 0%;
   padding: 40px 0%;
+  
   h2{
   h2{
     text-transform: uppercase;
     text-transform: uppercase;
     color: #fff;
     color: #fff;
@@ -290,12 +301,15 @@
     line-height: 72px;
     line-height: 72px;
     font-weight: 400;
     font-weight: 400;
     margin-bottom: 20px;
     margin-bottom: 20px;
-    padding: 0px 2%;
+    padding: 0px 25%;
   }
   }
   p.first-of-type{
   p.first-of-type{
     color: #fff;
     color: #fff;
     font-size: 20px;
     font-size: 20px;
     line-height: 24px;
     line-height: 24px;
-    padding: 0px 20%;
+    padding: 0px 25%;
   }
   }
 }
 }
+
+
+

+
+
 .tiles{
 .tiles{
   display: grid;
   display: grid;
-  grid-template-columns: auto auto auto;
-  column-width: 33%;
+  grid-template-columns: 33.3% 33.3% 33.3%;
+  column-width: 33.3%;
   column-gap: 0px;
   column-gap: 0px;
   grid-auto-flow: dense;
   grid-auto-flow: dense;
-  grid-template-rows: masonry;
-  margin-top: 40px;
-  max-width: 100vw;
+  max-width: 1300px;
   margin: auto;
   margin: auto;
+  margin-top: 40px;
   transition: .5s;
   transition: .5s;
   background: #333;
   background: #333;
+  @media (max-width: 1300px) {
+    max-width:100vw;
+  }
+  @media (max-width: 800px) {
+    width: 100vw;
+    display: block;
+    height: auto;
+  }
 }
 }
+
 .tile {
 .tile {
   display:  inline-grid;
   display:  inline-grid;
   margin: 0px;
   margin: 0px;
@@ -20,6 +30,10 @@
   vertical-align: top;
   vertical-align: top;
   grid-column-end: span 1;
   grid-column-end: span 1;
   grid-row-end: span 1;
   grid-row-end: span 1;
+  height: 275px;
+  @media (max-width: 800px) {
+    display: block;
+  }
   .tile_image{    
   .tile_image{    
     background-size: cover;
     background-size: cover;
     background-position: center;
     background-position: center;
@@ -29,9 +43,132 @@
   }
   }
   .hover_content{
   .hover_content{
     opacity: 0;
     opacity: 0;
+    @media (max-width: 800px) {
+      opacity: 1;
+    }
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    padding: 20px;
+    background-color: rgba(0,0,0,0.6);
+    height: 100%;
+    h3{
+      color: #fff;
+      font-size: 20px;
+      line-height: 24px;
+      text-transform: uppercase;
+      font-family: 'TradeGothic';
+      text-align: left;
+    }
+    p{
+      color: #fff;
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 400;
+      font-family: 'TradeGothic';
+      max-width: 70%;
+      text-align: left;
+    }
+   
   }
   }
   .tile_content{
   .tile_content{
     display: none;
     display: none;
+    flex-direction: column;
+    align-items: flex-start;
+    align-content: flex-start;
+    flex-wrap: wrap;
+    padding: 70px;
+    @media (max-width: 1300px) {
+      padding: 40px;
+    }
+    h3{
+      color: #fff;
+      font-size: 30px;
+      line-height: 36px;
+      text-transform: uppercase;
+      font-family: 'TradeGothic';
+      text-align: left;
+      @media (max-width: 800px) {
+        text-align: center;
+        font-size: 20px;
+        line-height: 24px;
+        margin-bottom: 30px;
+      }
+    }
+    p{
+      color: #fff;
+      font-size: 20px;
+      line-height: 24px;
+      font-weight: 400;
+      font-family: 'TradeGothic';
+      text-align: left;
+      @media (max-width: 800px) {
+        text-align: center;
+        font-size: 16px;
+        line-height: 19px;
+      }
+    }
+    .image{
+      height: 100%;
+      width: 40%;
+      display: inline-block;
+      margin-right: 30px;
+      @media (max-width: 800px) {
+        width: 80%;
+        height: auto;
+        margin: auto;
+      }
+    }
+    .tile_content.mobile{
+      display: none;
+    }
+    .title-mobile{
+      display: none;
+      @media (max-width: 800px) {
+        display: block;
+      }
+    }
+    .text{
+      display:flex;
+      flex-direction: column;
+      width: 55%;
+      justify-content: space-between;
+      flex-wrap: wrap;
+      height: 90%;
+      @media (max-width: 800px) {
+        display:block;
+        margin-top: 30px;
+        height: auto;
+        width: 100%;
+      }
+      h3{
+        @media (max-width: 800px) {
+          display: none;
+        }
+      }
+      .whole-story{
+        align-items: flex-end;
+        display: flex;
+        align-content: flex-end;
+        flex-wrap: wrap;
+        font-size: 24px;
+        line-height: 29px;
+        color: #fff;
+        text-decoration: none;
+        font-weight: 400;
+          @media (max-width: 800px) {
+            display: block;
+            text-align: center;
+            margin-top: 100px;
+          }
+        }
+        .whole-story:hover{
+          text-decoration: underline;
+        }
+    }
   }
   }
 }
 }
 
 
@@ -39,8 +176,6 @@
 .tile:hover {
 .tile:hover {
   .hover_content{
   .hover_content{
     opacity: 1;
     opacity: 1;
-    background-color: rgba(0,0,0,0.6);
-    height: 100%;
   }
   }
 }
 }
 
 
@@ -50,39 +185,56 @@
 .tile.expand {
 .tile.expand {
   grid-column-end: span 2;
   grid-column-end: span 2;
   grid-row-end: span 2;
   grid-row-end: span 2;
+  height: 550px;
+  @media (max-width: 800px) {
+    height: auto;
+  }
   .hover_content{
   .hover_content{
     display: none;
     display: none;
   }
   }
   .tile_content{
   .tile_content{
-    margin-top: -16px;
-    display: block;
+    display: flex;
     height: 100%;
     height: 100%;
     background-color: rgba(0,0,0,0.7);
     background-color: rgba(0,0,0,0.7);
+    @media (max-width: 800px) {
+      display: none;
+    }
   }
   }
   .tile_image{  
   .tile_image{  
     height: 550px;
     height: 550px;
+    @media (max-width: 800px) {
+      height: 275px;
+    }
   }
   }
-}
-
-.tile.expand:hover {
-  .hover_content{
+  .tile_content.mobile{
     display: none;
     display: none;
-  }
-   .tile_content{
-    display: block;
-    height: 100%;
-    background-color: rgba(0,0,0,0.7);
+    background-color: #333;
+    @media (max-width: 800px) {
+      display: block;
+    }
   }
   }
 }
 }
 
 
-// .last-expand{
-//   .tile:nth-of-type(4){
-
-//     grid-column-end:2;
+// .tile.expand:hover {
+//   .hover_content{
+//     display: none;
 //   }
 //   }
-
-//   .tile:nth-of-type(5){
-//     grid-row-end:  4;
-//     grid-column-end:2;
+//    .tile_content{
+//     display: flex;
+//     @media (max-width: 800px) {
+//       display: none;
+//     }
 //   }
 //   }
 // }
 // }
+
+.last-expand{
+  .tile:nth-of-type(4){
+    grid-column-end:2;
+  }
+
+  .tile:nth-of-type(5){
+    grid-row-end:  4;
+    grid-column-end:2;
+  }
+}
+