diff --git a/css/animations.css b/css/animations.css
index 38076ad..bfa35cb 100644
--- a/css/animations.css
+++ b/css/animations.css
@@ -184,7 +184,7 @@
   background-size:cover;
   padding:0; 
   position:relative;
-  height:500px;
+  height:300px;
   border-top-left-radius:6px;
   border-top-right-radius:6px;
 }
@@ -209,20 +209,19 @@
 }
 
 #popup-modal .modal-social {
-  position:absolute;
+  /*position:absolute;
   right: 65px;
   top: 130px;
-  width: 215px;
+  width: 215px;*/
 }
 
 #popup-modal .modal-box {
   margin: auto;
   position:absolute;
-  top: 40%; left: 25%; bottom: 50%; right: 25%;
+  top: 40%; left: 15%; bottom: 50%; right: 15%;
   z-index:9999;
 }
 
-
 .overlay {
   position: fixed;
   top: 0;
@@ -412,3 +411,291 @@
     opacity: 0;
   }
 }
+
+/* Anim
+width: 378px;
+  height: 290px;
+ */
+.animation {
+  display: inline-block;
+  position: relative;
+  width: 46em;
+  height: 30em;
+  margin: -2vh auto 0 auto;
+  vertical-align: middle;
+}
+@media (max-width:720px) {
+  .animation {margin-left:-30rem;margin-right:-30rem;}
+}
+@media (max-width:450px) {
+  .animation {width:58rem;height:38rem;}
+}
+@media (max-width:450px) {
+  .animation {width:58rem;height:38rem;}
+}
+@media (max-width:400px) {
+  .animation {width:55rem;height:36rem;}
+}
+@media (max-width:380px) {
+  .animation {width:50rem;height:33rem;}
+}
+@media (max-width:340px) {
+  .animation {width:47rem;height:31rem;}
+}
+@media (max-width:320px) {
+  .animation {width:42rem;height:28rem;}
+}
+@media (max-height:650px) {
+  .animation {margin-top: -7vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:651px) {
+  .animation {margin-top: -8vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:670px) {
+  .animation {margin-top: -6.5vh !important;margin-bottom: 10vh !important;}
+}
+@media (min-height:720px) {
+  .animation {margin-top: -2vh !important;margin-bottom: 10vh !important;overflow-y:visible}
+}
+@media (min-height:800px) {
+  .animation {margin-top: 0 !important;margin-bottom: 10vh !important;overflow-y:visible}
+}
+.animation .device {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 50%;
+  top: 50%;
+  background: #111;
+  -webkit-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -moz-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -ms-transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  -moz-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.animation .device .phone-home-button,
+.animation .device .tablet-home-button {
+  position: absolute;
+  border-radius: 50%;
+  background: #444;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+.animation .device .phone-home-button {
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  right: 11px;
+  top: 50%;
+}
+.animation .device .tablet-home-button {
+  width: 12px;
+  height: 12px;
+  margin-left: -6px;
+  bottom: 7px;
+  left: 50%;
+}
+.animation .device .screen-stand {
+  position: absolute;
+  width: 100%;
+  margin-left: -10px;
+  margin-top: -1px;
+  top: 60%;
+  opacity: 0;
+  z-index: 1;
+  -webkit-transition: all 0.4s ease-out;
+  -moz-transition: all 0.4s ease-out;
+  -ms-transition: all 0.4s ease-out;
+  transition: all 0.4s ease-out;
+}
+.animation .device .screen-stand .leg {
+  position: absolute;
+  width: 12px;
+  height: 16px;
+  left: 50%;
+  top: 0;
+  margin-left: -6px;
+  background: #111;
+}
+.animation .device .screen-stand .foot {
+  position: absolute;
+  width: 120px;
+  height: 4px;
+  left: 50%;
+  top: 15px;
+  margin-left: -60px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  background: #111;
+}
+.animation .device .display {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #34495e;
+  z-index: 3;
+}
+.animation .device .display div {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 100%;
+  white-space: nowrap;
+  -webkit-transition: all 0.4s ease;
+  -moz-transition: all 0.4s ease;
+  -ms-transition: all 0.4s ease;
+  transition: all 0.4s ease;
+}
+.animation .device .display div div {
+  position: absolute;
+  width: 100%;
+  left: 0;
+  top: 50%;
+  margin-top: -14px;
+  font-size: 20px;
+  text-align: center;
+ /* color: #0080ff;*/
+}
+@media (max-width:450px) {
+  .animation .device .display div div {width:100%;max-width:100%;font-size:12px !important;}
+}
+  .animation .device .display .slide1 div {margin-top:0px;}
+.animation .device .display div div em {
+  font-weight: bold;
+}
+.animation .device .display .slide1 {
+  /* background: #000; */
+  background: url("https://i.imgur.com/wCp0xpe.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  text-shadow:  1px 1px 2px #1f1f1f, -1px -1px 2px #1f1f1f, -1px 0 2px #1f1f1f, 0 -1px 2px #1f1f1f, 1px 0 2px #1f1f1f, 0 1px 2px #1f1f1f, 1px -1px 2px #1f1f1f, -1px 1px 2px #1f1f1f,
+                2px 2px 2px #1f1f1f, -2px -2px 2px #1f1f1f, -2px 0 2px #1f1f1f, 0 -2px 2px #1f1f1f, 2px 0 2px #1f1f1f, 0 2px 2px #1f1f1f, 2px -2px 2px #1f1f1f, -2px 2px 2px #1f1f1f,
+                3px 3px 2px #1f1f1f, -3px -3px 2px #1f1f1f, -3px 0 2px #1f1f1f, 0 -3px 2px #1f1f1f, 3px 0 2px #1f1f1f, 0 3px 2px #1f1f1f, 3px -3px 2px #1f1f1f, -3px 3px 2px #1f1f1f,
+                4px 4px 4px #1f1f1f, -4px -4px 4px #1f1f1f, -4px 0 4px #1f1f1f, 0 -4px 4px #1f1f1f, 4px 0 4px #1f1f1f, 0 4px 4px #1f1f1f, 4px -4px 4px #1f1f1f, -4px 4px 4px #1f1f1f;
+    color:white;
+}
+.animation .device .display .slide2 {
+  /* background: #000; */
+  background: url("https://i.imgur.com/KfArkPZ.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  text-shadow:  1px 1px 2px #fff, -1px -1px 2px #fff, -1px 0 2px #fff, 0 -1px 2px #fff, 1px 0 2px #fff, 0 1px 2px #fff, 1px -1px 2px #fff, -1px 1px 2px #fff,
+                2px 2px 2px #fff, -2px -2px 2px #fff, -2px 0 2px #fff, 0 -2px 2px #fff, 2px 0 2px #fff, 0 2px 2px #fff, 2px -2px 2px #fff, -2px 2px 2px #fff,
+                3px 3px 2px #fff, -3px -3px 2px #fff, -3px 0 2px #fff, 0 -3px 2px #fff, 3px 0 2px #fff, 0 3px 2px #fff, 3px -3px 2px #fff, -3px 3px 2px #fff,
+                4px 4px 4px #fff, -4px -4px 4px #fff, -4px 0 4px #fff, 0 -4px 4px #fff, 4px 0 4px #fff, 0 4px 4px #fff, 4px -4px 4px #fff, -4px 4px 4px #fff;
+  color:#0080ff;
+}
+.animation .device .display .slide3 {
+  /* background: #000; */
+  background: url("https://i.imgur.com/c55mey7.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  text-shadow:  1px 1px 2px #000, -1px -1px 2px #000, -1px 0 2px #000, 0 -1px 2px #000, 1px 0 2px #000, 0 1px 2px #000, 1px -1px 2px #000, -1px 1px 2px #000,
+                2px 2px 2px #000, -2px -2px 2px #000, -2px 0 2px #000, 0 -2px 2px #000, 2px 0 2px #000, 0 2px 2px #000, 2px -2px 2px #000, -2px 2px 2px #000,
+                3px 3px 2px #000, -3px -3px 2px #000, -3px 0 2px #000, 0 -3px 2px #000, 3px 0 2px #000, 0 3px 2px #000, 3px -3px 2px #000, -3px 3px 2px #000,
+                4px 4px 4px #000, -4px -4px 4px #000, -4px 0 4px #000, 0 -4px 4px #000, 4px 0 4px #000, 0 4px 4px #000, 4px -4px 4px #000, -4px 4px 4px #000;
+  color:white;
+}
+.animation[data-animation-step="1"] .device {
+  width: 87%;
+  height: 90%;
+  padding: 10px;
+  border-radius: 4px;
+}
+.animation[data-animation-step="1"] .device .slide1 {
+  left: 0%;
+}
+.animation[data-animation-step="1"] .device .screen-stand {
+  opacity: 1;
+  top: 100%;
+}
+.animation[data-animation-step="2"] .device {
+  width: 74%;
+  height: 75%;
+  padding: 16px;
+  border-radius: 10px;
+}
+.animation[data-animation-step="2"] .device .slide1 {
+  left: -100%;
+}
+.animation[data-animation-step="2"] .device .slide2 {
+  left: 0%;
+}
+.animation[data-animation-step="2"] .device .tablet-home-button {
+  opacity: 1;
+}
+.animation[data-animation-step="3"] .device {
+  width: 27%;
+  height: 75%;
+  padding: 16px 4px;
+  border-radius: 6px;
+}
+.animation[data-animation-step="3"] .device .slide1,
+.animation[data-animation-step="3"] .device .slide2 {
+  left: -100%;
+}
+.animation[data-animation-step="3"] .device .slide3 {
+  left: 0%;
+}
+.animation[data-animation-step="3"] .device .phone-home-button {
+  opacity: 1;
+}
+  @media (min-height:800px) {
+    .animation[data-animation-step="1"] .device {width:87%; height:90%;}
+    .animation[data-animation-step="2"] .device {width:80%; height:80%;}
+    .animation[data-animation-step="3"] .device {width:28%; height:80%;}
+  }
+  @media (max-height:720px) {
+    .animation[data-animation-step="1"] .device {width:72%; height:75%;}
+    .animation[data-animation-step="2"] .device {width:59%; height:60%;}
+    .animation[data-animation-step="3"] .device {width:22%; height:63%;}
+    .animation .device .display div div {font-size:16px;}
+  }
+  @media (max-height:650px) {
+    .animation[data-animation-step="1"] .device {width:62%; height:65%;}
+    .animation[data-animation-step="2"] .device {width:54%; height:55%;}
+    .animation[data-animation-step="3"] .device {width:22%; height:63%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+  @media (max-width:560px) {
+    .animation[data-animation-step="1"] .device {margin-top:1%;width:72%; height:75%;}
+    .animation[data-animation-step="2"] .device {margin-top:1%;width:65%; height:66%;}
+    .animation[data-animation-step="3"] .device {margin-top:1%;width:28%; height:80%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+  @media (max-width:520px) {
+    .animation[data-animation-step="1"] .device {margin-top:0%;width:66%; height:69%;}
+    .animation[data-animation-step="2"] .device {margin-top:0%;width:62%; height:63%;}
+    .animation[data-animation-step="3"] .device {margin-top:0%;width:28%; height:80%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+  @media (max-width:460px) {
+    .animation[data-animation-step="1"] .device {margin-top:0%;width:58%; height:61%;}
+    .animation[data-animation-step="2"] .device {margin-top:0%;width:54%; height:55%;}
+    .animation[data-animation-step="3"] .device {margin-top:0%;width:25%; height:72%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+  @media (max-width:350px) {
+    .animation[data-animation-step="1"] .device {margin-top:3%;width:62%; height:65%;}
+    .animation[data-animation-step="2"] .device {margin-top:3%;width:58%; height:60%;}
+    .animation[data-animation-step="3"] .device {margin-top:9%;width:30%; height:80%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+  @media (max-width:320px) {
+    .animation[data-animation-step="1"] .device {margin-top:6%;width:62%; height:65%;}
+    .animation[data-animation-step="2"] .device {margin-top:6%;width:58%; height:60%;}
+    .animation[data-animation-step="3"] .device {margin-top:12%;width:30%; height:80%;}
+    .animation .device .display div div {font-size:15px;}
+  }
+