diff --git a/INTERACTIVE_blackextras2022 copy.html b/INTERACTIVE_blackextras2022 copy.html
new file mode 100644
index 0000000..b463855
--- /dev/null
+++ b/INTERACTIVE_blackextras2022 copy.html	
@@ -0,0 +1,994 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+		<title>Missourian Infographics</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+
+		<!-- THESE ARE THE CSS FILES I ADDED -->
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Domine:400,700"/>
+
+        <!-- THESE ARE THE JAVASCRIPT FILES I ADDED -->
+
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery-1.9.1.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery-ui-1.10.2.custom.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery.ui.tooltip.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery.cycle.all.js"></script>
+
+
+		<!-- THE CSS STYLES START HERE -->
+		<style>
+			/*! jQuery UI - v1.10.2 - 2013-03-17
+			* http://jqueryui.com
+			* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
+			* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */
+
+			h1 {
+				font-size: 3em;
+			    line-height: 1.4em;
+			}
+
+			p.body, a {
+				color: white;
+			    font-size: 16px;
+			    line-height: 27px;
+			    margin-bottom: 24px;
+			}
+
+			.domine, h3 {
+				 font-family:  'Domine', serif;
+			}
+
+			.base {
+				background-attachment: fixed;
+				height: 400px;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: cover;
+
+
+			}
+
+			.clear {clear: both;}
+
+						/* INTRO SECTION */
+
+			.coveropener {
+				position: relative;
+				background-repeat: no-repeat;
+  				background-position: center;
+				background-size: cover;
+  				height: 100vh;
+
+			}
+
+			.centered {
+				  margin: 0;
+				  position: absolute;
+				  top: 50%;
+				  left: 50%;
+				  -ms-transform: translate(-50%, -50%);
+				  transform: translate(-50%, -50%);
+				max-width: 684px;
+				max-height: 400px;
+				width: 90%;
+				height: 90%;
+			    text-align: center;
+			    font-family: inerit;
+			    line-height: 1.5em;
+			    padding: 5%;
+
+			}
+
+			.move {
+			  opacity: 0;
+			  transform: translate(0, 10vh);
+			  transition: all 3s;
+			}
+
+			.move.visible {
+			  opacity: 1;
+			  transform: translate(0, 0);
+			}
+
+
+			.start.fade-in {
+			animation: fadeIn ease 2s;
+			-webkit-animation: fadeIn ease 2s;
+			-moz-animation: fadeIn ease 2s;
+			-o-animation: fadeIn ease 2s;
+			-ms-animation: fadeIn ease 2s;
+			}
+			@keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-moz-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-webkit-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-o-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-ms-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			.start.fade-out {
+			animation: fadeOut ease 3s forwards;
+			-webkit-animation: fadeOut ease 3s forwards;
+			-moz-animation: fadeOut ease 3s forwards;
+			-o-animation: fadeOut ease 3s forwards;
+			-ms-animation: fadeOut ease 3s forwards;
+			}
+			@keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+
+			}
+
+			@-moz-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-webkit-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-o-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-ms-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			/* ALL ABOUT THE GRAPHIC DIV */
+
+			.graphic{
+				width: 100%;
+			    max-width: 630px;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+			.graphicmedium{
+			    max-width: 960px;
+			    width: 100%;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+			.graphicwide{
+			    max-width: 1200px;
+			    width: 100%;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+
+
+			.graphic h4, .graphicwide h4, .graphicmedium h4  {
+			    padding: 0;
+			    margin: 50px 0 4px 0;
+			    font-family:  'Domine', serif;
+			    font-weight: bold;
+			    font-size: 1.5em;
+			    line-height: 1.5em;
+			    z-index: 2000;
+			    }
+
+			.graphic p, p {
+			    width: 100%;
+			    padding: 5px 0;
+			    margin: 0 0 8px 0;
+			    font-family:  'Domine', serif;
+			    font-size: 1em;
+			    line-height: 1.5em;
+			    z-index: 2000;
+			    }
+
+			.graphic img, .graphicmedium img, .graphicwide img{
+			    width: 100%;
+			    height: auto;
+			    z-index: 1000;
+			    }
+
+			.graphic div{
+			    /*width: 100%;*/
+			    height: auto;
+			    z-index: 1000;
+			}
+
+			.graphicwide video{
+					width: 100% !important;
+					margin: auto;
+			}
+
+			/*Tableau style */
+			.tableauPlaceholder iframe {
+				margin: auto !important;
+			}
+
+			/* 1-2-3 PANEL STYLES */
+
+			.tab-nav a {
+			    background: none repeat scroll 0 0 none;
+			    border: 1px solid white;
+			    color: white;
+			    display: inline-block;
+			    font-size: 12px;
+			    font-weight: bold;
+			    margin: 0 4px 0 0;
+			    border-radius: 100%;
+			    padding: 4px 4px;
+			    width: 14px;
+			    text-align: center;
+			    text-decoration: none;
+			    font-family: sans-serif;
+			    line-height: 14px;
+			}
+
+			#next_panel {
+				width: 70px;
+				border-radius: 15px;
+			}
+
+			.tab-nav a.activeSlide {
+			    background: none repeat scroll 0 0 none;
+			    color: white;
+			}
+
+			.tab-nav {
+			    width: auto !important;
+			    float: left;
+			    margin: 10px 10px 0 0;
+			    height: 44px;
+			}
+
+			.tab-wrapper {
+			    margin: 0 auto -1px auto;
+			    height: 20px;
+			}
+
+			#panel_graphic {
+			    margin: 10px 0 0 0;
+			    position: relative;
+			    width: 100% !important;
+			}
+
+			.panel {
+			    position: relative;
+			    display: block;
+			    left: 0;
+			    opacity: 1;
+			    padding: 10px;
+			    z-index: 4;
+			    background-color: none;
+					width: 100%;
+			}
+
+			.title{
+				font-family: 'Open Sans', sans-serif;
+				font-size: 1em;
+				width: 450px;
+				margin-left: 40px;
+			}
+
+			/* TABBED PANEL GRAPHIC */
+
+			#slideshow-wrapper {margin: 20px 0 10px 0; color: white;}
+			#slideshow-nav  {height: auto;float: left;z-index: 1000;}
+			#slideshow-nav li {
+			    border: 1px solid #999999;
+			    border-bottom: 1px solid white;
+			    border-radius: 10px 10px 0 0;
+			    padding: 10px 10px 5px 10px;
+			    display: block;
+			    float: left;
+			    zoom: 1;
+			    filter: alpha(opacity=50);
+			    opacity: 0.5;
+			    margin: 0 0 0 5px;
+			    width: 15%;
+			    font-family: arial, sans-serif;
+			    font-size: 12px;
+			    line-height: 14px;
+			    text-align: center;
+			    height: auto;
+			    vertical-align: top;
+			    background-color: none;
+					color: white;
+			}
+
+			#slideshow-nav li img {width: 100%;}
+			.nav-container {z-index: 2000;}
+			#slideshow-nav li.first {margin-left: 6px;}
+			#slideshow-nav li:hover {zoom: 1;filter: alpha(opacity=100);opacity: 1; background-color: none;}
+			#slideshow-nav li.activeSlide  {filter:alpha(opacity=100);opacity:1; background-color: none;font-weight: bold;border-bottom:2px solid black;z-index: 1000;}
+			#slidescontainer {position: relative;overflow: hidden;}
+			#slideshow {position: relative;width: 100% !important;}
+			.slide {width: 100% !important; position: absolute;text-align: left;padding: 10px 20px 0 20px; display: none;background-color: none;z-index: 1;}
+
+			.horiz-line1 {margin-top: -1px;border-top: 1px solid #999999;z-index:100;}
+			#prev-btn, #next-btn {display: inline;float: left;margin-top: 10px;padding: 0px 0px 0 10px;width: 31px;text-align: left;vertical-align: middle;z-index: 20;}
+			#next-btn {text-align: right;}
+			#arrowfull {zoom: 1;filter: alpha(opacity=100);opacity: 1;}
+			#arrowfaint {zoom: 1;filter: alpha(opacity=20);opacity: 0.4;}
+
+			/* TABBED PANEL WITH IMAGES */
+
+			#slideshow-wrapper2 {margin: 20px 0 10px 0; color: white;}
+			#slideshow-nav2  {height: auto;float: left;z-index: 1000;}
+			#slideshow-nav2 li {
+			    border: 1px solid #999999;
+			    border-bottom: 1px solid white;
+			    border-radius: 10px 10px 0 0;
+			    padding: 10px 10px 5px 10px;
+			    display: block;
+			    float: left;
+			    zoom: 1;
+			    filter: alpha(opacity=50);
+			    opacity: 0.5;
+			    margin: 0 0 0 5px;
+			    width: 15%;
+			    font-family: arial, sans-serif;
+			    font-size: 12px;
+			    line-height: 14px;
+			    text-align: center;
+			    height: auto;
+			    vertical-align: top;
+			    background-color: none;
+			    color: white;
+			}
+
+			#slideshow-nav2 li img {width: 100%; color: white; padding-top: 10px;}
+			.nav-container2 {z-index: 2000;}
+			#slideshow-nav2 li.first {margin-left: 6px;}
+			#slideshow-nav2 li:hover {zoom: 1;filter: alpha(opacity=100);opacity: 1; background-color: none;}
+			#slideshow-nav2 li.activeSlide  {filter:alpha(opacity=100);opacity:1; background-color: none;font-weight: bold;border-bottom:2px solid black ;z-index: 1000;}
+			#slidescontainer2 {position: relative; overflow: hidden;}
+			#slidewithimages { position: relative; width: 100% !important;}
+			.slidewithimage {position: absolute;text-align: left;padding: 0 20px; display: none;background-color: none;z-index: 1;}
+
+			.horiz-line1 {margin-top: -1px;border-top: 1px solid #999999;z-index:100;}
+			#prev-btn, #next-btn {display: inline;float: left;margin-top: 10px;padding: 0px 0px 0 10px;width: 31px;text-align: left;vertical-align: middle;z-index: 20;}
+			#next-btn {text-align: right;}
+			#arrowfull {zoom: 1;filter: alpha(opacity=100);opacity: 1;}
+			#arrowfaint {zoom: 1;filter: alpha(opacity=20);opacity: 0.4;}
+
+			/* NUMBERED DOTS */
+
+				.dots{
+				    position: relative;
+				}
+
+				.dot {
+				    background-color: #DF7527;
+				    color: white;
+				    text-align: center;
+				    vertical-align: middle;
+				    padding: 0;
+				    line-height: 20px;
+				    font-family: sans-serif;
+				    font-size: 14px;
+				    width: 20px !important;
+				    height: 20px !important;
+				    border-radius: 20px;
+				    border: 1px solid #ffffff;
+				    box-shadow: 1px 1px 1px #000000;
+				    cursor: pointer;
+				    z-index: 999;
+				}
+
+				.dots #parent {
+				  position: absolute;
+				  width: auto;
+				}
+
+				#parent a {
+					text-decoration: none;
+				}
+
+				#popup {
+					position: absolute;
+					background-origin: bottom left;
+					left: -75px;
+					bottom: 45px;
+
+				  border: solid 1px #666666;
+				  background-color: white;
+				  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
+				  padding: 10px;
+				  font-family: 'Open Sans', sans-serif;
+				  font-size: 0.9em;
+				  line-height: 1.2em;
+				  width: 160px;
+				  color: black;
+				}
+
+				#parent #popup::after {
+				  content: "";
+				  position: absolute;
+				  top: 100%;
+				  left: 45%;
+				  margin-left: -5px;
+				  border-width: 10px;
+				  border-style: solid;
+				  border-color: black transparent transparent transparent;
+				}
+
+				#popup div {
+					width: 100%;
+					margin: auto;
+				}
+
+				#parent #popup {
+				  display: none;
+				  min-width: 250px;
+				}
+
+				#parent:hover #popup {
+				  display: block;
+				}
+
+				#parent:hover {
+				  z-index: 5000;
+				}
+
+				/* RESPONSIVE STYLE BREAKPOINT REFERENCE
+					big desktops: 1400px;
+					most laptops: 1100px;
+					iPad portrait: 768px;
+					phones: 480px;
+					smaller phones: 300px;*/
+
+				@media screen and (max-width: 1400px){
+					/*use these classes to switch out three levels of images with hard-to-read text*/
+					.hide-desktop {display:block;}
+					.hide-desktop {display:none;}
+					.hide-tablet {display:none;}
+				}
+
+				@media screen and  (max-width: 1100px){
+				}
+
+				@media screen and  (max-width: 768px){
+					.hide-desktop {display:none;}
+					.hide-tablet {display:block;}
+				}
+
+				@media screen and  (max-width: 480px){
+					.hide-desktop {display:none;}
+					.hide-tablet {display:none;}
+					.hide-mobile {display:block;}
+
+					/*making fonts a bit smaller*/
+					.graphic h4 {font-size:1.5em;}
+					.graphic p {font-size:0.9em; line-height: 1.4em;}
+					.graphic {width: 100%; max-width: 1200px;}
+					.centered {max-height: none;}
+				}
+
+				@media screen and  (max-width: 300px){
+					.graphic h4 {font-size:1.5em;}
+					.graphic p {font-size:0.9em; line-height: 1.4em;}
+					.graphic {width: 100%; max-width: 1200px;}
+					.centered {max-height: none;}
+				}
+		</style>
+</head>
+
+<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
+
+<!-- THE PAGE YOU SEE STARTS HERE!!!!!!!!!  -->
+		<!-- OPTIONS-YOU DON'T HAVE TO DO THESE:
+				1. If you want a fixed background image behind the whole graphic, add URL between parenthesis below.
+				2. If you would prefer a white template, change the background color to white, and the color to black (that's the color of the text) / -->
+
+<body id="site" class="base" style="background-image: url(); background-color: black; color: white;">
+
+
+
+
+<!-- BEGIN SINGLE LAYER - SIMPLE IMAGE WITH ROLLOVER/// -->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+<!-- ////change regular to wide for a featured image///-->
+			<div class="graphicwide move">
+
+					<div class="dots">
+
+							<div id="parent" style="left: 20%; top: 55%;">
+								<div class="dot" style="background-color: #DF7527;" title="" >1</div>
+								<div id="popup">
+									This is a dow chart.
+									<div style="padding-top: 3%">
+									<img src="images/placeholderimage.jpg">
+									</div>
+								</div>
+							</div>
+
+							<div id="parent" style="left: 42%; top: 52%;">
+								<div class="dot" style="background-color: #DF7527;" title="" >2</div>
+								<div id="popup">
+									Text goes here and here for this block. ext goes here and here for this block. Text goes here and here and here for this block.
+									<div style="padding-top: 3%">
+										<!--  <img src="images/sampleimage.jpg"> -->
+									</div>
+								</div>
+							</div>
+
+							<div id="parent" style="left: 50%; top: 29%;">
+								<div class="dot" style="background-color: #DF7527;" title="" >3</div>
+								<div id="popup">
+									Text goes here and here for this block. ext goes here and here for this block. Text goes here and here for this block.d here for this block.
+									<div style="padding-top: 3%">
+										<img src="images/placeholderimage.jpg">
+									</div>
+								</div>
+							</div>
+
+							<div id="parent" style="left: 60%; top: 30%;">
+								<div class="dot" style="background-color: #DF7527;" title="" >4</div>
+								<div id="popup">
+									Text goes here and here for this block. ext goes here and here for this block. Text goes here and here for this block. ext goes here and here for this block.
+									<div style="padding-top: 3%">
+										<img src="images/placeholderimage.jpg">
+									</div>
+								</div>
+							</div>
+
+							<div><img src="images/brainblack.png"></div> <!--  Important: background needs to be inside of div.-->
+						</div>
+
+			</div>
+
+
+<!-- END SINGLE LAYER - SIMPLE IMAGE WITH ROLLOVER -->
+
+<!-- BEGIN SINGLE LAYER - BEFORE/AFTER IMAGE -->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+					<!-- Go to https://juxtapose.knightlab.com/, upload your photos, and then get the embed code to put below. You may have to change your height once you place it in your document and see how it fits. -->
+					<iframe frameborder="0" class="juxtapose" width="100%" height="360" src="https://cdn.knightlab.com/libs/juxtapose/latest/embed/index.html?uid=bf56f562-1ed1-11eb-83c8-ebb5d6f907df"></iframe>
+
+
+			</div>
+
+
+<!-- END SINGLE LAYER - BEFORE/AFTER IMAGE -->
+
+<!-- BEGIN SINGLE LAYER - TIMELINE EXAMPLE -->
+
+				<div class="graphic">
+					<h4>Headline for map below</h4>
+					<p class="body">Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+					<!-- NOTE: YOU NEED TO ADD HTTP: TO THE FRONT OF THE // IN THE URL OF THE IFRAME -->
+					<div><iframe src='http://cdn.knightlab.com/libs/timeline3/latest/embed/index.html?source=1xbNU5FegafIe6RhL1QlhSrcgikjYFezffRktjtcbDeo&font=Default&lang=en&initial_zoom=2&height=650' width='100%' height='650px' frameborder='0'></iframe></div>
+				</div>
+
+<!-- END SINGLE LAYER - TIMELINE EXAMPLE -->
+
+<!-- BEGIN SINGLE LAYER - DATAWRAPPER EXAMPLE -->
+
+				<div class="graphic">
+						<h4>Subhead goes here and here</h4>
+						<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+				</div>
+
+				<div class="graphic move">
+						<div>
+								<!-- Sub out the embded code below for your embed code -->
+								<iframe title="Anti-Black hate crimes drive statewide hate crime total" aria-label="Interactive line chart" id="datawrapper-chart-tPkGW" src="https://datawrapper.dwcdn.net/tPkGW/2/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="400" data-external="1"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r=0;r<e.length;r++)if(e[r].contentWindow===a.source){var i=a.data["datawrapper-height"][t]+"px";e[r].style.height=i}}}))}();
+								</script>
+								<!-- Sub out the embed code above for your embed code -->
+
+						</div>
+				</div>
+
+<!-- END SINGLE LAYER - DATAWRAPPER EXAMPLE -->
+
+<!-- BEGIN SINGLE LAYER - TABLEAU EXAMPLE -->
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphicwide move">
+					<div style="max-height:550px; margin: auto !important;">
+
+						<!-- REPLACE THE CODE BELOW WITH THE EMBED CODE -->
+						<div class='tableauPlaceholder' id='viz1617843584104' style='position: relative;'><noscript><a href='#'><img alt='Dashboard 1 (2) ' src='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;Testdashboard_16034971927710&#47;Dashboard12&#47;1_rss.png' style='border: none' /></a></noscript><object class='tableauViz'  style='display:none;'><param name='host_url' value='https%3A%2F%2Fpublic.tableau.com%2F' /> <param name='embed_code_version' value='3' /> <param name='site_root' value='' /><param name='name' value='Testdashboard_16034971927710&#47;Dashboard12' /><param name='tabs' value='no' /><param name='toolbar' value='yes' /><param name='static_image' value='https:&#47;&#47;public.tableau.com&#47;static&#47;images&#47;Te&#47;Testdashboard_16034971927710&#47;Dashboard12&#47;1.png' /> <param name='animate_transition' value='yes' /><param name='display_static_image' value='yes' /><param name='display_spinner' value='yes' /><param name='display_overlay' value='yes' /><param name='display_count' value='yes' /><param name='language' value='en' /><param name='filter' value='publish=yes' /></object></div>                <script type='text/javascript'>                    var divElement = document.getElementById('viz1617843584104');                    var vizElement = divElement.getElementsByTagName('object')[0];                    if ( divElement.offsetWidth > 800 ) { vizElement.style.width='100%';vizElement.style.maxWidth='1124px';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';vizElement.style.maxHeight='527px';} else if ( divElement.offsetWidth > 500 ) { vizElement.style.width='100%';vizElement.style.maxWidth='1124px';vizElement.style.height=(divElement.offsetWidth*0.75)+'px';vizElement.style.maxHeight='527px';} else { vizElement.style.width='100%';vizElement.style.height=(divElement.offsetWidth*1.77)+'px';}                     var scriptElement = document.createElement('script');                    scriptElement.src = 'https://public.tableau.com/javascripts/api/viz_v1.js';                    vizElement.parentNode.insertBefore(scriptElement, vizElement);                </script>
+
+						<!-- REPLACE THE CODE ABOVE WITH THE EMBED CODE -->
+
+					</div>
+			</div>
+
+<!-- END SINGLE LAYER - TABLEAU EXAMPLE -->
+
+<!-- BEGIN SINGLE LAYER - 1-2-3 SEQUENCE-->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+					<!-- Change image name below, or replace the entire line with embed code. -->
+					<div class="tab-wrapper">
+			    <div id="panel_tabs" class="tab-nav"></div>
+			    <div class="tab-nav">
+			       <a id="next_panel" href="#">Next&nbsp;&raquo;</a>
+			    </div>
+			    <div class="clear"></div>
+			</div>
+
+			<div class="panel-line"></div>
+
+			<!-- PUT YOUR INFORMATION IN THIS SECTION. COPY THE WHOLE PANEL DIV IF YOU NEED TO ADD ANOTHER PANEL AND PASTE IT BELOW THE LAST PANEL IN THIS GROUP -->
+			<div id="panel_graphic">
+
+					<div class="panel">
+						<img src="images/plane1.jpg" alt=""/>
+						<p class="body">Text here to explain the slide. And a little more just for fun.</p>
+					</div>
+
+					<div class="panel">
+						<img src="images/plane2.jpg" alt=""/>
+						<p class="body">And then tell how this slide is different from the last.</p>
+					</div>
+
+					<div class="panel">
+						<img src="images/plane3.jpg" alt=""/>
+						<p class="body">Tell us more here about what is going on in this slide.</p>
+					</div>
+
+					<div class="panel">
+						<img src="images/plane4.jpg" alt=""/>
+						<p class="body">Tell us more here about what is going on in this slide.</p>
+					</div>
+
+			</div>
+			</div>
+			<script>
+
+			                if ($('.graphic').find('#panel_graphic').length > 0){
+                            $('.graphic').find('#panel_graphic').cycle({
+                                fx:     'fade',
+                                speed:  250,
+                                timeout:0,
+                                nowrap: true,
+                                next:   '#next_panel',
+                                pager:  '#panel_tabs'
+                            });
+                            $('#next_panel').click(function() {
+                                var num_panels = $(this).parent().siblings('#panel_tabs').find('a').length,
+                                    curr_idx = $(this).parent().siblings('#panel_tabs').find('.activeSlide').index();
+
+                                if (num_panels-1 == curr_idx) {
+                                    if ($(this).hasClass('last')) {
+                                        $(this).parent().siblings('#panel_tabs').find('a').first().click();
+                                        $(this).removeClass('last').html('Next&nbsp;&raquo;');
+                                    } else {
+                                        $(this).addClass('last').html('Start over');
+                                    }
+                                } else {
+                                    $(this).removeClass('last').html('Next&nbsp;&raquo;');
+                                }
+                            });
+
+                            $('#panel_tabs').children('a').click(function() {
+                                if ($(this).index() == $(this).parent().children('a').length-1) {
+                                    $('#next_panel').addClass('last').html('Start over');
+                                } else {
+                                    $('#next_panel').removeClass('last').html('Next&nbsp;&raquo;');
+                                }
+                            });
+                        	}
+            </script>
+
+
+<!-- END SINGLE LAYER - 1-2-3 SEQUENCE-->
+
+<!-- //////BEGIN SINGLE LAYER - TAB PANEL WITH IMAGES GRAPHIC ///////////-->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+				<div id="slideshow-wrapper">
+
+                    <div class="nav-container">
+                        <div id="slideshow-nav" style="width: 100%;">
+                            <li>Monday<br><a href=""></a></li>
+                            <li>Tuesday<br><a href=""></a></li>
+                            <li>Wednesday<br><a href=""></a></li>
+                            <div class="clear"></div>
+                        </div>
+						<div class="clear"></div>
+                    </div>
+
+		    		<div class="horiz-line1" style="width: 100%;"></div>
+                    <div id="slidescontainer">
+
+			            <div id="slideshow">
+			                <div class="slide">
+								<div><img src="images/chart1.png" alt=""/></div>
+								<p>Text goes here and here about this</p>
+			                </div>
+			                <div class="slide">
+								<div><img src="images/chart2.png" alt=""/></div>
+								<p>Text goes here and here about this</p>
+			                </div>
+			                <div class="slide">
+								<div><img src="images/chart3.png" alt=""/></div>
+								<p>Text goes here and here about this</p>
+			                </div>
+
+			            </div>
+
+                	</div>
+           		</div>
+
+			</div>
+
+			<script>
+
+
+			var currentSlide = 0;
+
+			        // panel stepper graphic initialize
+			        if ($('#site').find('#slideshow').length > 0){
+			            $('#site').find('#slideshow').cycle({
+			            	fx:     'fade',
+			                speed:  250,
+			                timeout:0,
+					startingSlide: currentSlide,
+			                nowrap: false,
+			                next:   '#next-btn',
+			                prev:   '#prev-btn',
+			                pager:  '#slideshow-nav',
+					after:   onAfter,
+			                pagerAnchorBuilder: function(idx, slide) {
+			                    // return selector string for existing anchor
+			                    return '#slideshow-nav li:eq(' + idx + ')';
+			                }
+			            });
+			            $('#next-panel').mouseenter(function() {
+			                $(this).addClass('hover')
+			            }).mouseout(function() {
+			                $(this).removeClass('hover')
+			            });
+			        }
+
+				function onAfter(curr, next, opts) {
+				    currentSlide = opts.currSlide;
+
+				    $('#next-btn').removeClass('arrowfaint');
+
+				    if (currentSlide == 4) {
+					$('#next-btn').addClass('arrowfaint');
+				    }
+
+			        }
+
+
+			        // left/right key press
+			        $(document).keydown(function(e) {
+			           //console.log(e.which);
+			            if (e.which == 37) { // left key
+			                $('#slideshow').cycle('prev');
+
+			            } else if (e.which == 39) { // right key
+			                $('#slideshow').cycle('next');
+
+			            }
+			        });
+        </script>
+
+
+<!-- //////END SINGLE LAYER - TAB PANEL ///////////-->
+
+
+<!-- BEGIN SINGLE LAYER -  TAB PANEL WITH NAV IMAGES	 ////////////////-->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+					<div id="slideshow-wrapper2">
+
+		            <div class="nav-container2">
+		                <div id="slideshow-nav2" style="width: 100%;">
+		                            <li>Lastname<br><a href=""><img src="images/mug1.png" alt="Name" /></a></li>
+		                            <li>Lastname<br><a href=""><img src="images/mug2.png" alt="Name" /></a></li>
+		                            <li>Lastname<br><a href=""><img src="images/mug3.png" alt="Name" /></a></li>
+								    <li>Lastname<br><a href=""><img src="images/mug4.png" alt="Name" /></a></li>
+		                            <div class="clear"></div>
+		                </div>
+						<div class="clear"></div>
+		            </div>
+
+				    <div class="horiz-line1" style="width: 100%;"></div>
+		            <div id="slidescontainer2">
+
+					        <div id="slideswithimages">
+					                <div class="slidewithimage">
+										<h3>Subhead</h3>
+										<div><img src="images/map1black.png" alt=""/></div>
+										<p>Text xgoes here and here about this</p>
+					                </div>
+					                <div class="slidewithimage">
+										<h3>Subhead</h3>
+										<div><img src="images/map2black.png" alt=""/></div>
+										<p>Text xgoes here and here about this</p>
+					                </div>
+					                <div class="slidewithimage">
+										<h3>Subhead</h3>
+										<div><img src="images/map3black.png" alt=""/></div>
+										<p>Text xgoes here and here about this</p>
+					                </div>
+					                <div class="slidewithimage">
+										<h3>Subhead</h3>
+										<div><img src="images/map4black.png" alt=""/></div>
+										<p>Text xgoes here and here about this</p>
+					                </div>
+					        </div>
+
+		            </div>
+		           	</div>
+           	</div>
+
+
+			</div>
+
+			<script>
+
+
+			var currentSlide = 0;
+
+			        // panel stepper graphic initialize
+			        if ($('#site').find('#slideswithimages').length > 0){
+			            $('#site').find('#slideswithimages').cycle({
+			            	fx:     'fade',
+			                speed:  250,
+			                timeout:0,
+					startingSlide: currentSlide,
+			                nowrap: false,
+			                next:   '#next-btn',
+			                prev:   '#prev-btn',
+			                pager:  '#slideshow-nav2',
+					after:   onAfter,
+			                pagerAnchorBuilder: function(idx, slide) {
+			                    // return selector string for existing anchor
+			                    return '#slideshow-nav2 li:eq(' + idx + ')';
+			                }
+			            });
+			            $('#next-panel').mouseenter(function() {
+			                $(this).addClass('hover')
+			            }).mouseout(function() {
+			                $(this).removeClass('hover')
+			            });
+			        }
+
+				function onAfter(curr, next, opts) {
+				    currentSlide = opts.currSlide;
+
+				    $('#next-btn').removeClass('arrowfaint');
+
+				    if (currentSlide == 4) {
+					$('#next-btn').addClass('arrowfaint');
+				    }
+
+			        }
+
+
+
+			        // left/right key press
+			        $(document).keydown(function(e) {
+			           //console.log(e.which);
+			            if (e.which == 37) { // left key
+			                $('#slideswithimages').cycle('prev');
+
+			            } else if (e.which == 39) { // right key
+			                $('#slideswithimages').cycle('next');
+
+			            }
+			        });
+    </script>
+
+
+<!-- END SINGLE LAYER -  TAB PANEL WITH NAV IMAGES	////////////////-->
+
+
+
+
+<!-- BEGIN SINGLE LAYER - ANIMATED GIF ////////////////-->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+					<!-- Change image name below -->
+					<img src="images/circlenewblack.gif">
+
+
+			</div>
+
+
+<!-- END SINGLE LAYER - ANIMATED GIF ////////////////-->
+
+<!-- BEGIN SINGLE LAYER - VIDEO WRAPPER -->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphicwide move">
+					<!-- Change image name below, or replace the entire line with embed code. -->
+					<video width="852" height="480" controls><source src="images/virusanimation.mp4" type="video/mp4"></video>
+			</div>
+
+<!-- END SINGLE LAYER - VIDEO WRAPPER -->
+
+
+<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
+<!-- END OF GRAPHIC TEMPLATE ELEMENTS  -->
+<!-- DO NOT MODIFY OR DELETE ANYTHING BELOW HERE. -->
+
+				<script>
+					$(document).on("scroll", function() {
+					  var pageTop = $(document).scrollTop();
+					  var pageBottom = pageTop + $(window).height();
+					  var moves = $(".move");
+
+					  for (var i = 0; i < moves.length; i++) {
+					    var move = moves[i];
+
+						if ($(move).position().top < pageBottom) {
+						      $(move).addClass("visible");
+						    } else {
+						      $(move).removeClass("visible");
+						    }
+						}
+
+					});
+				</script>
+
+
+	</body>
+</html>
diff --git a/INTERACTIVE_template_Blank_Black_2022 copy.html b/INTERACTIVE_template_Blank_Black_2022 copy.html
new file mode 100644
index 0000000..18e89dc
--- /dev/null
+++ b/INTERACTIVE_template_Blank_Black_2022 copy.html	
@@ -0,0 +1,625 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+		<title>Missourian Infographics</title>
+		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" / >
+		<meta content="width=device-width, initial-scale=1" name="viewport" />
+
+		<!-- THESE ARE THE CSS FILES I ADDED -->
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Domine:400,700"/>
+
+        <!-- THESE ARE THE JAVASCRIPT FILES I ADDED -->
+
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery-1.9.1.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery-ui-1.10.2.custom.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery.ui.tooltip.js"></script>
+		<script type="text/javascript" src="http://www.columbiamissourian.com/app/projects/Project_files/js/jquery.cycle.all.js"></script>
+
+
+		<!-- THE CSS STYLES START HERE -->
+		<style>
+			/*! jQuery UI - v1.10.2 - 2013-03-17
+			* http://jqueryui.com
+			* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css
+			* Copyright 2013 jQuery Foundation and other contributors Licensed MIT */
+
+			h1 {
+				font-size: 3em;
+			    line-height: 1.4em;
+			}
+
+			p.body, a {
+				color: white;
+			    font-size: 16px;
+			    line-height: 27px;
+			    margin-bottom: 24px;
+			}
+
+			.domine, h3 {
+				 font-family:  'Domine', serif;
+			}
+
+			.base {
+				background-attachment: fixed;
+				height: 400px;
+				background-position: center;
+				background-repeat: no-repeat;
+				background-size: cover;
+
+
+			}
+
+			.clear {clear: both;}
+
+						/* INTRO SECTION */
+
+			.coveropener {
+				position: relative;
+				background-repeat: no-repeat;
+  				background-position: center;
+				background-size: cover;
+  				height: 100vh;
+
+			}
+
+			.centered {
+				  margin: 0;
+				  position: absolute;
+				  top: 50%;
+				  left: 50%;
+				  -ms-transform: translate(-50%, -50%);
+				  transform: translate(-50%, -50%);
+				max-width: 684px;
+				max-height: 400px;
+				width: 90%;
+				height: 90%;
+			    text-align: center;
+			    font-family: inerit;
+			    line-height: 1.5em;
+			    padding: 5%;
+
+			}
+
+			.move {
+			  opacity: 0;
+			  transform: translate(0, 10vh);
+			  transition: all 3s;
+			}
+
+			.move.visible {
+			  opacity: 1;
+			  transform: translate(0, 0);
+			}
+
+			.start.fade-in {
+			animation: fadeIn ease 2s;
+			-webkit-animation: fadeIn ease 2s;
+			-moz-animation: fadeIn ease 2s;
+			-o-animation: fadeIn ease 2s;
+			-ms-animation: fadeIn ease 2s;
+			}
+			@keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-moz-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-webkit-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-o-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			@-ms-keyframes fadeIn {
+			0% {opacity:0;}
+			100% {opacity:1;}
+			}
+
+			.start.fade-out {
+			animation: fadeOut ease 3s forwards;
+			-webkit-animation: fadeOut ease 3s forwards;
+			-moz-animation: fadeOut ease 3s forwards;
+			-o-animation: fadeOut ease 3s forwards;
+			-ms-animation: fadeOut ease 3s forwards;
+			}
+			@keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-moz-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-webkit-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-o-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			@-ms-keyframes fadeOut {
+			0% {opacity:1;}
+			100% {opacity:0;}
+			}
+
+			/* ALL ABOUT THE GRAPHIC DIV */
+
+			.graphic{
+				width: 100%;
+			    max-width: 630px;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+			.graphicmedium{
+			    max-width: 960px;
+			    width: 100%;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+			.graphicwide{
+			    max-width: 1200px;
+			    width: 100%;
+			    height: auto;
+			    margin: 0 auto 0 auto ;
+			}
+
+			.graphic h4, .graphicwide h4, .graphicmedium h4  {
+			    padding: 0;
+			    margin: 50px 0 4px 0;
+			    font-family:  'Domine', serif;
+			    font-weight: bold;
+			    font-size: 1.5em;
+			    line-height: 1.5em;
+			    z-index: 2000;
+			    }
+
+			.graphic p, p {
+			    width: 100%;
+			    padding: 5px 0;
+			    margin: 0 0 8px 0;
+			    font-family:  'Domine', serif;
+			    font-size: 1em;
+			    line-height: 1.5em;
+			    z-index: 2000;
+			    }
+
+			.graphic img, .graphicmedium img, .graphicwide img{
+			    width: 100%;
+			    height: auto;
+			    z-index: 1000;
+			    }
+
+			.graphic div{
+			    /*width: 100%;*/
+			    height: auto;
+			    z-index: 1000;
+			}
+
+			.graphicwide video{
+					width: 100% !important;
+					margin: auto;
+			}
+
+			/*Tableau style */
+			.tableauPlaceholder iframe {
+				margin: auto !important;
+			}
+
+			/* 1-2-3 PANEL STYLES */
+
+			.tab-nav a {
+			    background: none repeat scroll 0 0 none;
+			    border: 1px solid white;
+			    color: white;
+			    display: inline-block;
+			    font-size: 12px;
+			    font-weight: bold;
+			    margin: 0 4px 0 0;
+			    border-radius: 100%;
+			    padding: 4px 4px;
+			    width: 14px;
+			    text-align: center;
+			    text-decoration: none;
+			    font-family: sans-serif;
+			    line-height: 14px;
+			}
+
+			#next_panel {
+				width: 70px;
+				border-radius: 15px;
+			}
+
+			.tab-nav a.activeSlide {
+			    background: none repeat scroll 0 0 none;
+			    color: white;
+			}
+
+			.tab-nav {
+			    width: auto !important;
+			    float: left;
+			    margin: 10px 10px 0 0;
+			    height: 44px;
+			}
+
+			.tab-wrapper {
+			    margin: 0 auto -1px auto;
+			    height: 20px;
+			}
+
+			#panel_graphic {
+			    margin: 10px 0 0 0;
+			    position: relative;
+			    width: 100% !important;
+			}
+
+
+			.panel {
+			    position: relative;
+			    display: block;
+			    left: 0;
+			    opacity: 1;
+			    padding: 10px;
+			    z-index: 4;
+			    background-color: none;
+					width: 100%;
+			}
+
+			.title{
+				font-family: 'Open Sans', sans-serif;
+				font-size: 1em;
+				width: 450px;
+				margin-left: 40px;
+			}
+
+			/* TABBED PANEL GRAPHIC */
+
+			#slideshow-wrapper {margin: 20px 0 10px 0; color: white;}
+			#slideshow-nav  {height: auto;float: left;z-index: 1000;}
+			#slideshow-nav li {
+			    border: 1px solid #999999;
+			    border-bottom: 1px solid white;
+			    border-radius: 10px 10px 0 0;
+			    padding: 10px 10px 5px 10px;
+			    display: block;
+			    float: left;
+			    zoom: 1;
+			    filter: alpha(opacity=50);
+			    opacity: 0.5;
+			    margin: 0 0 0 5px;
+			    width: 15%;
+			    font-family: arial, sans-serif;
+			    font-size: 12px;
+			    line-height: 14px;
+			    text-align: center;
+			    height: auto;
+			    vertical-align: top;
+			    background-color: none;
+					color: white;
+			}
+
+			#slideshow-nav li img {width: 100%;}
+			.nav-container {z-index: 2000;}
+			#slideshow-nav li.first {margin-left: 6px;}
+			#slideshow-nav li:hover {zoom: 1;filter: alpha(opacity=100);opacity: 1; background-color: none;}
+			#slideshow-nav li.activeSlide  {filter:alpha(opacity=100);opacity:1; background-color: none;font-weight: bold;border-bottom:2px solid black;z-index: 1000;}
+			#slidescontainer {position: relative;overflow: hidden;}
+			#slideshow {position: relative;width: 100% !important;}
+			.slide {width: 100% !important; position: absolute;text-align: left;padding: 10px 20px 0 20px; display: none;background-color: none;z-index: 1;}
+
+			.horiz-line1 {margin-top: -1px;border-top: 1px solid #999999;z-index:100;}
+			#prev-btn, #next-btn {display: inline;float: left;margin-top: 10px;padding: 0px 0px 0 10px;width: 31px;text-align: left;vertical-align: middle;z-index: 20;}
+			#next-btn {text-align: right;}
+			#arrowfull {zoom: 1;filter: alpha(opacity=100);opacity: 1;}
+			#arrowfaint {zoom: 1;filter: alpha(opacity=20);opacity: 0.4;}
+
+			/* TABBED PANEL WITH IMAGES */
+
+			#slideshow-wrapper2 {margin: 20px 0 10px 0; color: white;}
+			#slideshow-nav2  {height: auto;float: left;z-index: 1000;}
+			#slideshow-nav2 li {
+			    border: 1px solid #999999;
+			    border-bottom: 1px solid white;
+			    border-radius: 10px 10px 0 0;
+			    padding: 10px 10px 5px 10px;
+			    display: block;
+			    float: left;
+			    zoom: 1;
+			    filter: alpha(opacity=50);
+			    opacity: 0.5;
+			    margin: 0 0 0 5px;
+			    width: 15%;
+			    font-family: arial, sans-serif;
+			    font-size: 12px;
+			    line-height: 14px;
+			    text-align: center;
+			    height: auto;
+			    vertical-align: top;
+			    background-color: none;
+			    color: white;
+			}
+
+			#slideshow-nav2 li img {width: 100%; color: white; padding-top: 10px;}
+			.nav-container2 {z-index: 2000;}
+			#slideshow-nav2 li.first {margin-left: 6px;}
+			#slideshow-nav2 li:hover {zoom: 1;filter: alpha(opacity=100);opacity: 1; background-color: none;}
+			#slideshow-nav2 li.activeSlide  {filter:alpha(opacity=100);opacity:1; background-color: none;font-weight: bold;border-bottom:2px solid black ;z-index: 1000;}
+			#slidescontainer2 {position: relative; overflow: hidden;}
+			#slidewithimages { position: relative; width: 100% !important;}
+			.slidewithimage {position: absolute;text-align: left;padding: 0 20px; display: none;background-color: none;z-index: 1;}
+
+			.horiz-line1 {margin-top: -1px;border-top: 1px solid #999999;z-index:100;}
+			#prev-btn, #next-btn {display: inline;float: left;margin-top: 10px;padding: 0px 0px 0 10px;width: 31px;text-align: left;vertical-align: middle;z-index: 20;}
+			#next-btn {text-align: right;}
+			#arrowfull {zoom: 1;filter: alpha(opacity=100);opacity: 1;}
+			#arrowfaint {zoom: 1;filter: alpha(opacity=20);opacity: 0.4;}
+
+			/* NUMBERED DOTS */
+
+				.dots{
+				    position: relative;
+				}
+
+				.dot {
+				    background-color: #DF7527;
+				    color: white;
+				    text-align: center;
+				    vertical-align: middle;
+				    padding: 0;
+				    line-height: 20px;
+				    font-family: sans-serif;
+				    font-size: 14px;
+				    width: 20px !important;
+				    height: 20px !important;
+				    border-radius: 20px;
+				    border: 1px solid #ffffff;
+				    box-shadow: 1px 1px 1px #000000;
+				    cursor: pointer;
+				    z-index: 999;
+				}
+
+				.dots #parent {
+				  position: absolute;
+				  width: auto;
+				}
+
+				#parent a {
+					text-decoration: none;
+				}
+
+				#popup {
+					position: absolute;
+					background-origin: bottom left;
+					left: -75px;
+					bottom: 45px;
+
+				  border: solid 1px #666666;
+				  background-color: white;
+				  box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
+				  padding: 10px;
+				  font-family: 'Open Sans', sans-serif;
+				  font-size: 0.9em;
+				  line-height: 1.2em;
+				  width: 160px;
+				  color: black;
+				}
+
+				#parent #popup::after {
+				  content: "";
+				  position: absolute;
+				  top: 100%;
+				  left: 45%;
+				  margin-left: -5px;
+				  border-width: 10px;
+				  border-style: solid;
+				  border-color: black transparent transparent transparent;
+				}
+
+				#popup div {
+					width: 100%;
+					margin: auto;
+				}
+
+				#parent #popup {
+				  display: none;
+				  min-width: 250px;
+				}
+
+				#parent:hover #popup {
+				  display: block;
+				}
+
+				#parent:hover {
+				  z-index: 5000;
+				}
+
+				/* RESPONSIVE STYLE BREAKPOINT REFERENCE
+					big desktops: 1400px;
+					most laptops: 1100px;
+					iPad portrait: 768px;
+					phones: 480px;
+					smaller phones: 300px;*/
+
+				@media screen and (max-width: 1400px){
+					/*use these classes to switch out three levels of images with hard-to-read text*/
+					.hide-desktop {display:block;}
+					.hide-desktop {display:none;}
+					.hide-tablet {display:none;}
+				}
+
+				@media screen and  (max-width: 1100px){
+				}
+
+				@media screen and  (max-width: 768px){
+					.hide-desktop {display:none;}
+					.hide-tablet {display:block;}
+				}
+
+				@media screen and  (max-width: 480px){
+					.hide-desktop {display:none;}
+					.hide-tablet {display:none;}
+					.hide-mobile {display:block;}
+
+					/*making fonts a bit smaller*/
+					.graphic h4 {font-size:1.5em;}
+					.graphic p {font-size:0.9em; line-height: 1.4em;}
+					.graphic {width: 100%; max-width: 1200px;}
+					.centered {max-height: none;}
+				}
+
+				@media screen and  (max-width: 300px){
+					.graphic h4 {font-size:1.5em;}
+					.graphic p {font-size:0.9em; line-height: 1.4em;}
+					.graphic {width: 100%; max-width: 1200px;}
+					.centered {max-height: none;}
+				}
+		</style>
+
+</head>
+
+<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
+
+<!-- THE PAGE YOU SEE STARTS HERE!!!!!!!!!  -->
+		<!-- OPTIONS-YOU DON'T HAVE TO DO THESE:
+				1. If you want a fixed background image behind the whole graphic, add URL between parenthesis below.
+				2. If you would prefer a white template, change the background color to white, and the color to black (that's the color of the text) / -->
+
+<body id="site" class="base" style="background-image: url(); background-color: black; color: white;">
+
+
+<!-- INTRO SECTION//////////////////////// -->
+		<!-- OPTIONS:
+				1. Add the link to your opening image between the parenthesis below. Do not do this AND a fixed background image behind the whole graphic. -->
+
+				<div class="coveropener start fade-in" style="background-image: url(images/test.png);">
+
+		<!-- MANDATORY CHANGES:
+				1. Fill in the headline (H1)
+				2. Put your name in the XXXXsw
+				3. Change the date
+				4. Play with the opacity of the rectangle box by changing the decimal. 0 is completely transparent, 1 is completely black. You can also change the color by messing with the RGB values (0,0,0) -->
+					<div class="centered" style="background-color: rgb(0, 0, 0, 0.5);">
+						<h1>Headline herey about this graphic</h1>
+						<p>By <a href="/accounts/profiles/xxxxx/">xxxxxxxx</a> | December 08, 2020</p>
+						<p>Text here to explain the image below. Text here to explain the image below.Text here to explain the image below.Text here to explaText here to explain the image below. Text here to explain the image below.Text here to explain the image below.Text here to explaiin the image below.Text here to explain the image below.</p>
+					</div>
+				</div>
+
+<!-- END OF INTRO SECTION ////////////////////// -->
+
+
+
+
+
+<!-- BEGIN SINGLE LAYER - SIMPLE IMAGE -->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+					<!-- Change image name below, or replace the entire line with embed code. -->
+					<img src="images/placeholderimage.jpg">
+
+
+			</div>
+
+
+<!-- END SINGLE LAYER - SIMPLE IMAGE -->
+
+<!-- BEGIN SINGLE LAYER - SIMPLE FULL-WIDTH IMAGE -->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphicwide move">
+
+					<!-- Change image name below, or replace the entire line with embed code. -->
+					<img src="images/placeholderimage.jpg">
+
+			</div>
+
+
+<!-- END SINGLE LAYER - SIMPLE FULL-WIDTH IMAGE -->
+
+<!-- BEGIN SINGLE LAYER - SIMPLE IMAGE WITH TEXT BETWEEN IMAGES /-->
+
+			<div class="graphic">
+					<h4>Subhead goes here and here</h4>
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+			</div>
+
+			<div class="graphic move">
+
+				<!-- Change image name below, or replace the entire line with embed code. -->
+
+					<img src="images/placeholderimage.jpg">
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+					<img src="images/placeholderimage.jpg">
+					<p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+
+			</div>
+
+
+<!-- END SINGLE LAYER - SIMPLE IMAGE WITH TEXT BETWEEN IMAGES -->
+
+
+
+<!-- BEGIN SOURCES/PHOTO CREDITS -->
+
+<div class="graphic" style="color: #666666;"><p>Sources: Here and here and here for this. Add photo credit here if you have one</p></div>
+
+<!-- END SOURCES/PHOTO CREDITS -->
+
+
+
+<!-- ////////////////////////////////////////////////////////////////////////////////////////// -->
+<!-- END OF GRAPHIC TEMPLATE ELEMENTS  -->
+<!-- DO NOT MODIFY OR DELETE ANYTHING BELOW HERE. -->
+
+				<script>
+					$(document).on("scroll", function() {
+					  var pageTop = $(document).scrollTop();
+					  var pageBottom = pageTop + $(window).height();
+					  var moves = $(".move");
+					  var start = $(".start");
+
+					  for (var i = 0; i < moves.length; i++) {
+					    var move = moves[i];
+
+						if ($(move).position().top < pageBottom) {
+						      $(move).addClass("visible");
+						    } else {
+						      $(move).removeClass("visible");
+						    }
+						}
+						if ($(start).position().top = pageTop)  {
+						      $(start).addClass("fade-out");
+						      $(start).removeClass("fade-in");
+						    } else {
+						      $(start).addClass("fade-in");
+						      $(start).removeClass("fade-out");
+						    }
+					});
+				</script>
+
+
+	</body>
+</html>
diff --git a/final-project.html b/final-project.html
index cda7cd2..467c08b 100644
--- a/final-project.html
+++ b/final-project.html
@@ -27,24 +27,8 @@ <h1>Hate crimes in Missouri</h1>
     </div>
 
     <div class="graphic">
-        <h4>Subhead goes here and here</h4>
-        <p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
+        <p>Missouri is one of the only states that has no laws about hate crime collection or police training. It protects all classes as defined by the ADL – race/religion/ethnicity, sexual orientation, disability, gender and gender identity – but does not mandate data collection or police training.</p>
     </div>
 
-    <div class="graphic move">
-        <div style="min-height:400px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/tPkGW/embed.js?v=2" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/tPkGW/full.png" alt="" /></noscript></div>
-    </div>
-        <p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
-    </div>
-
-    <div class="graphic move">
-        <iframe title="Anti-Black hate crimes drive statewide hate crime total" aria-label="Interactive line chart" id="datawrapper-chart-tPkGW" src="https://datawrapper.dwcdn.net/tPkGW/1/" scrolling="no" frameborder="0" style="width: 0; min-width: 100% !important; border: none;" height="400" data-external="1"></iframe><script type="text/javascript">!function(){"use strict";window.addEventListener("message",(function(a){if(void 0!==a.data["datawrapper-height"]){var e=document.querySelectorAll("iframe");for(var t in a.data["datawrapper-height"])for(var r=0;r<e.length;r++)if(e[r].contentWindow===a.source){var i=a.data["datawrapper-height"][t]+"px";e[r].style.height=i}}}))}();
-        </script>
-    </div>
-
-    <div class="graphic">
-        <h4>Subhead goes here and here</h4>
-        <p>Text here to explain the image below.Text here to explain the image below.Text here to explain the image below.</p>
-    </div>
 </body>
 </html>
\ No newline at end of file
