diff --git a/css/style.css b/css/style.css
index a866575..86d8cd6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -437,8 +437,8 @@
 /* our team section */
 #team, #family {
   background-color: #0080ff;
-  font-weight: 700;
-  font-size: 21px;  
+  /*font-weight: 700;
+  font-size: 21px; */
 }
 .hr.invisible_hr {
     height: 0;
@@ -468,6 +468,7 @@
 .team-name, .family-name {font-size: 21px}
 .team-links, .family-links {
   padding-top: .75em;
+  color: #07374a;
 }
 .team-image img, .family-image img {
   max-width:150px;
@@ -622,3 +623,210 @@
     padding-right: 15px;
   }
 }
+
+/* --- Mock-up Setting --- */
+/* Paste link to your image 310x550px */
+/* Screen Setting */
+/* ---  --- */
+/* --- Animation Setting --- */
+/* ---  --- */
+
+h1 {
+  color: #fff;
+  z-index: 10;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  cursor: default;
+}
+
+h1 span:nth-of-type(1) {
+  font-size: 1em;
+  line-height: 0.5em;
+}
+h1 span:nth-of-type(2) {
+  font-size: .4em;
+  font-weight: 400;
+  line-height: 3.65em;
+  color: #0080ff;
+  background-color: #282828;
+  padding: 3px 10px;
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.6);
+}
+h1 span:nth-of-type(3) {
+  font-size: 1.5em;
+  line-height: .85em;
+}
+
+.space {
+  will-change: transform;
+  position: relative;
+  left:50%;
+  -webkit-transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+          transform: perspective(1000px) rotateX(65deg) rotateY(0deg) rotateZ(-45deg) scale(0.8);
+  -webkit-transition: all 600ms;
+  transition: all 600ms;
+}
+
+.space-hover {
+  -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+          transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.8);
+}
+
+.phone-container {
+  width: 338px;
+  height: 700px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: translateX(-80%);
+          transform: translateX(-80%);
+  border-radius: 60px;
+}
+
+.phone-front {
+  will-change: transform;
+  width: 336px;
+  height: 700px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  background-image: url("https://goo.gl/T50KD8");
+  background-repeat: no-repeat;
+  background-position: -16px 0;
+  background-size: 370px 701px;
+  border-radius: 60px;
+  box-shadow: -20px 27px 13px 10px rgba(0, 0, 0, 0.5);
+  -webkit-transition: -webkit-transform 600ms;
+  transition: -webkit-transform 600ms;
+  transition: transform 600ms;
+  transition: transform 600ms, -webkit-transform 600ms;
+  -webkit-transition: box-shadow 450ms;
+  transition: box-shadow 450ms;
+}
+
+.phone-front-hover {
+  box-shadow: 0 12px 13px 10px rgba(0, 0, 0, 0.5);
+  -webkit-transition: -webkit-transform 600ms;
+  transition: -webkit-transform 600ms;
+  transition: transform 600ms;
+  transition: transform 600ms, -webkit-transform 600ms;
+  -webkit-transition: box-shadow 450ms;
+  transition: box-shadow 450ms;
+}
+
+.phone-screen {
+  width: 310px;
+  height: 550px;
+  position: relative;
+  left: 0;
+  right: 0;
+  top: 68.5px;
+  margin: auto;
+  background-color: #000;
+  overflow: hidden;
+}
+.phone-screen::before {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 13px 0 10px -5px rgba(250, 250, 250, 0.17), inset -13px 0 10px -5px rgba(250, 250, 250, 0.17);
+  background-image: url("../images/bliss_screens.gif");
+  background-repeat: no-repeat;
+  background-position: 50% 0px;
+  background-size: cover;
+  -webkit-transform: scale(1);
+          transform: scale(1);
+}
+.phone-screen::after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(250, 250, 250, 0.1);
+}
+
+.phone-side {
+  will-change: transform;
+  width: 400px;
+  height: 750px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  margin: auto;
+  border-radius: 50px;
+  background-repeat: no-repeat;
+  background-position: 22px 5px;
+  background-size: 400px 742px;
+  -webkit-transform-style: preserve-3d;
+          transform-style: preserve-3d;
+  -webkit-transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+          transform: skew(-1deg) translateX(-15.5%) translateY(1.2%) scaleX(0.95) scaleY(0.96) rotate(-1deg);
+  -webkit-transition: all 350ms;
+  transition: all 350ms;
+}
+
+.phone-side-hover {
+  -webkit-transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+          transform: skew(-1deg) translateX(-13.4%) translateY(1.05%) scaleX(0.83) scaleY(0.83) rotate(-1deg);
+  -webkit-transition: all 350ms;
+  transition: all 350ms;
+}
+
+@-webkit-keyframes figure-anim {
+  from {
+    border-radius: 50%;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  to {
+    border-radius: 30%;
+    -webkit-transform: rotate(360deg) scale(0.5);
+            transform: rotate(360deg) scale(0.5);
+  }
+}
+
+@keyframes figure-anim {
+  from {
+    border-radius: 50%;
+    -webkit-transform: rotate(0deg) scale(1);
+            transform: rotate(0deg) scale(1);
+  }
+  to {
+    border-radius: 30%;
+    -webkit-transform: rotate(360deg) scale(0.5);
+            transform: rotate(360deg) scale(0.5);
+  }
+}
+@-webkit-keyframes figure-container-anim {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}
+@keyframes figure-container-anim {
+  from {
+    -webkit-transform: rotate(0deg);
+            transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+            transform: rotate(360deg);
+  }
+}