added messages section

src/css/main.css

@@ -2077,6 +2077,24 @@ input.email-form__input--email:disabled {
   top: 0;
   margin: 0 0 0 -407px; }
 
+.slide__bg-area {
+  position: absolute;
+  background-color: white;
+  opacity: 0;
+  left: 50%;
+  top: -88px;
+  margin: 0 0 0 -200px;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+  -ms-transform: scale(0.1);
+  transform: scale(0.1);
+  animation-timing-function: ease;
+  animation-name: pulsateArea;
+  animation-duration: 3.4s;
+  animation-delay: 2.3s;
+  animation-iteration-count: infinite; }
+
 .slide.slide--five .slide__bg-icon {
   position: absolute;
   top: 86px;
@@ -2088,6 +2106,7 @@ input.email-form__input--email:disabled {
   background: #68C0F8;
   box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69);
   position: relative;
+  animation-timing-function: cubic-bezier(0.685, 0, 0.025, 1.185);
   animation-name: pulsate;
   animation-duration: 3.4s;
   animation-iteration-count: infinite; }
@@ -2183,6 +2202,14 @@ input.email-form__input--email:disabled {
     transform: scale(1);
     box-shadow: 0 2px 9px 0 rgba(57, 80, 164, 0.69); } }
 
+@keyframes pulsateArea {
+  0% {
+    transform: scale(0.1);
+    opacity: .1; }
+  100% {
+    transform: scale(1.4);
+    opacity: 0; } }
+
 @media (max-width: 1140px) {
   .slide.slide--five .slide__inner {
     width: 860px;
@@ -2221,6 +2248,279 @@ input.email-form__input--email:disabled {
     width: 100%;
     border-radius: 0; } }
 
+.slide.slide--six {
+  padding: 40px 0 40px 0;
+  margin: 0 0 0 0; }
+
+.slide--shown {
+  -ms-transform: scale(1);
+  transform: scale(1);
+  opacity: 1; }
+
+.slide.slide--six .slide__footer {
+  width: 450px; }
+
+.messages {
+  margin: 50px auto 30px;
+  width: 880px;
+  height: 600px;
+  position: relative;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+  -ms-flex-pack: justify;
+  justify-content: space-between; }
+
+.message {
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-align: start;
+  align-items: flex-start;
+  -ms-flex-line-pack: start;
+  align-content: flex-start;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  position: absolute;
+  opacity: 0;
+  transition: transform .6s ease, opacity .4s ease;
+  transition-delay: .1s; }
+
+.message.message--outcoming {
+  -ms-flex-direction: row-reverse;
+  flex-direction: row-reverse;
+  transform: translate3d(10px, 20px, 0) scale(0.9) rotate(0); }
+
+.message.message--incoming {
+  transform: translate3d(-10px, 20px, 0) scale(0.9) rotate(0); }
+
+.message.message--one {
+  top: 120px;
+  left: 0;
+  transition-delay: .2s; }
+
+.message.message--two {
+  top: 0;
+  left: 200px;
+  transition-delay: .3s; }
+
+.message.message--three {
+  top: 135px;
+  right: 140px;
+  transition-delay: .4s; }
+
+.message.message--four {
+  top: 220px;
+  left: 160px;
+  transition-delay: .5s; }
+
+.message.message--five {
+  top: 355px;
+  left: 0px;
+  transition-delay: .6s; }
+
+.message.message--six {
+  top: 365px;
+  right: 0;
+  transition-delay: .7s; }
+
+.message.message--seven {
+  top: 365px;
+  right: 320px;
+  transition-delay: .8s; }
+
+.slide--shown .message.message--outcoming,
+.slide--shown .message.message--incoming {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
+
+.message__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26);
+  background-color: white;
+  background-size: 36px;
+  margin: 0 8px; }
+
+.message--one .message__avatar {
+  background-image: url(../img/new-site/face1@2x.png); }
+
+.message--two .message__avatar {
+  background-image: url(../img/new-site/face2@2x.png); }
+
+.message--three .message__avatar {
+  background-image: url(../img/new-site/face3@2x.png); }
+
+.message--four .message__avatar {
+  background-image: url(../img/new-site/face4@2x.png); }
+
+.message--five .message__avatar {
+  background-image: url(../img/new-site/face5@2x.png); }
+
+.message--six .message__avatar {
+  background-image: url(../img/new-site/face6@2x.png); }
+
+.message--seven .message__avatar {
+  background-image: url(../img/new-site/face7@2x.png); }
+
+.message__bubble {
+  background-color: white;
+  box-shadow: 0 4px 18px 0 rgba(189, 208, 223, 0.26);
+  border-radius: 8px;
+  max-width: 204px; }
+
+.message__name {
+  font-size: 14px;
+  color: #939BA1;
+  padding: 12px 12px 2px 12px; }
+
+.message__text {
+  padding: 0 12px 8px 12px;
+  font-size: 15px;
+  color: #000; }
+
+.message__location {
+  width: 180px;
+  height: 60px;
+  background-size: cover;
+  background-image: url(../img/new-site/location@2x.png);
+  margin: 0 12px 12px 12px; }
+
+.message__player {
+  width: 162px;
+  height: 52px;
+  background-size: cover;
+  background-image: url(../img/new-site/player@2x.png);
+  margin: 0 12px 12px 12px; }
+
+.message__transaction {
+  width: 180px;
+  padding: 0 12px 12px 12px; }
+
+.message__transaction__amount {
+  font-size: 25px;
+  font-family: "PostGrotesk-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; }
+
+.message__transaction__amount .currency {
+  color: #C2C4CB;
+  letter-spacing: 2px; }
+
+.message__transaction__details {
+  padding: 8px 0 0 0; }
+
+.message__transaction__details .text-gray {
+  display: inline-block;
+  color: #C2C4CB;
+  width: 44px; }
+
+.message__custom {
+  margin: 0 12px 12px 12px;
+  width: 180px;
+  height: 150px;
+  border: 1px dashed #6E97E9;
+  border-radius: 8px;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.message__custom__icon-wrap {
+  width: 46px;
+  height: 46px;
+  background-color: #E0E9F9;
+  border-radius: 50%;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -ms-flex-align: center;
+  align-items: center; }
+
+.message__custom__icon {
+  width: 24px;
+  height: 24px;
+  background-image: url(../img/new-site/icon-plus.svg);
+  background-size: 24px; }
+
+.message__custom__text {
+  text-align: center;
+  color: #95A3AD;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 16px 0; }
+
+.message__bubble-footer {
+  height: 40px;
+  line-height: 40px;
+  text-align: center; }
+
+.message__bubble-footer.message__bubble-footer--button {
+  color: white;
+  background-color: #6E97E9;
+  border-radius: 0px 0px 8px 8px; }
+
+.message__bubble-footer.message__bubble-footer--status {
+  border-top: 1px solid #E8EBEC;
+  color: #6E97E9;
+  border-radius: 0px 0px 8px 8px; }
+
+@media (max-width: 922px) {
+  .messages {
+    margin: 50px auto 30px;
+    width: 748px;
+    height: 620px; }
+  .message.message--three {
+    right: 30px;
+    top: 55px; }
+  .message.message--four {
+    left: 170px;
+    top: 225px; }
+  .message.message--five {
+    left: 0;
+    top: 355px; }
+  .message.message--six {
+    top: 255px; }
+  .message.message--seven {
+    right: 210px;
+    top: 405px; } }
+
+@media (max-width: 767px) {
+  .slide.slide--six {
+    padding: 0; }
+  .messages {
+    margin: 20px auto 10px;
+    width: 375px;
+    padding: 0 10px; }
+  .message.message--one {
+    left: 0;
+    top: 0; }
+  .message.message--two {
+    display: none; }
+  .message.message--three {
+    right: 0;
+    top: 88px; }
+  .message.message--four {
+    display: none; }
+  .message.message--five {
+    left: 0;
+    top: 278px; }
+  .message.message--six {
+    display: none; }
+  .message.message--seven {
+    right: 0px;
+    top: 406px; } }
+
+@media (max-width: 375px) {
+  .messages {
+    width: auto; } }
+
 .footer {
   position: fixed;
   width: 100%;

src/img/new-site/icon_yt.svg

@@ -1 +1 @@
-<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_yt</title><path d="M10.142 14.356l-.001-5.057 4.864 2.537-4.863 2.52zM20.82 8.422s-.176-1.24-.715-1.786c-.685-.717-1.452-.72-1.804-.763-2.519-.182-6.297-.182-6.297-.182h-.008s-3.778 0-6.297.182c-.352.042-1.119.046-1.804.763-.54.546-.715 1.786-.715 1.786S3 9.88 3 11.336V12.7c0 1.457.18 2.913.18 2.913s.176 1.24.715 1.787c.685.717 1.584.694 1.985.77 1.44.138 6.12.18 6.12.18s3.782-.005 6.301-.187c.352-.042 1.12-.046 1.804-.763.54-.546.715-1.787.715-1.787s.18-1.456.18-2.913v-1.365c0-1.457-.18-2.914-.18-2.914z" fill="#FFF" fill-rule="evenodd"/></svg>
+<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>icon_yt</title><path d="M10.142 14.356l-.001-5.057 4.864 2.537-4.863 2.52zM20.82 8.422s-.176-1.24-.715-1.786c-.685-.717-1.452-.72-1.804-.763-2.519-.182-6.297-.182-6.297-.182h-.008s-3.778 0-6.297.182c-.352.042-1.119.046-1.804.763-.54.546-.715 1.786-.715 1.786S3 9.88 3 11.336V12.7c0 1.457.18 2.913.18 2.913s.176 1.24.715 1.787c.685.717 1.584.694 1.985.77 1.44.138 6.12.18 6.12.18s3.782-.005 6.301-.187c.352-.042 1.12-.046 1.804-.763.54-.546.715-1.787.715-1.787S21 14.157 21 12.7v-1.365c0-1.457-.18-2.914-.18-2.914z" fill="#FFF" fill-rule="evenodd"/></svg>

src/index.html

@@ -404,6 +404,95 @@
               </div>
           </div>
 
+          <div class="slide slide--six">
+              <div class="slide__inner">
+                <div class="slide__header">
+                  <h2 class="slide__title">Smarter private messaging</h2>
+                  <p class="slide__description">Status is more than a messenger. Send payments and smart contracts to friends from within chats, and enjoy end-to-end encryption by default using a peer-to-peer protocol that doesn’t rely
+on centralized servers</p>
+                </div>
+
+                <div class="messages">
+
+                  <div class="message message--text message--incoming message--one">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Alex</div>
+                      <div class="message__text">Thanks, guys!</div>
+                    </div>
+                  </div>
+                  <div class="message message--location message--incoming message--two">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Justas</div>
+                      <div class="message__text">17 Washington Street, Noank, MA</div>
+                      <div class="message__location"></div>
+                    </div>
+                  </div>
+                  <div class="message message--transaction message--outcoming message--three">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Andrei</div>
+                      <div class="message__transaction">
+                        <div class="message__transaction__amount">0.2323 <span class="currency">ETH</span></div>
+                        <div class="message__transaction__details">
+                          <div class="message__transaction__details-row"><span class="text-gray">To</span><span>justas777</span></div>
+                          <div class="message__transaction__details-row"><span class="text-gray">From</span><span>andmironov</span></div>
+
+                        </div>
+                      </div>
+                      <div class="message__bubble-footer message__bubble-footer--status">
+                        <span class="status-icon status-icon--ok"></span>
+                        <span class="status-text">Confirmed</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="message message--audio message--incoming message--four">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Lina</div>
+                      <div class="message__player"></div>
+                    </div>
+                  </div>
+                  <div class="message message--request message--incoming message--five">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Daniel</div>
+                      <div class="message__text">Confirm with password</div>
+                      <div class="message__bubble-footer message__bubble-footer--button">
+                        <span class="button-text">Enter password</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="message message--request message--outcoming message--six">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Gene</div>
+                      <div class="message__text">That would be 3.55 ETH</div>
+                      <div class="message__bubble-footer message__bubble-footer--button">
+                        <span class="button-text">Send 3.55 ETH</span>
+                      </div>
+                    </div>
+                  </div>
+                  <div class="message message--custom message--outcoming message--seven">
+                    <div class="message__avatar"></div>
+                    <div class="message__bubble">
+                      <div class="message__name">Felix</div>
+                      <div class="message__custom">
+                        <div class="message__custom__icon-wrap"><div class="message__custom__icon"></div></div>
+                        <div class="message__custom__text">Design custom messages for your DApp</div>
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+                <div class="slide__footer">
+                  With Status, you can use smart contracts in your daily life, converse with chatbots, and help to preserve our collective human right to privacy
+                </div>
+
+              </div>
+          </div>
+
           <div class="slide slide--five">
               <div class="slide__inner">
                 <div class="slide__header slide__header--inversed">
@@ -411,6 +500,7 @@
                   <p class="slide__description">Status is built together with its users. We’re completely open source and anyone is free to contribute. Together we can shape the future of Status, and facilitate the transition to a more open internet.</p>
                 </div>
                 <div class="slide__bg-image">
+                  <div class="slide__bg-area"></div>
                   <div class="slide__bg-icon">
                     <div class="slide__bg-icon-inner"></div>
                   </div>

src/js/app.js

@@ -9959,6 +9959,7 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
         features = document.querySelectorAll(".features-wrap")[0],
         slideTwo = document.querySelectorAll(".slide--two")[0],
         slideThree = document.querySelectorAll(".slide--three")[0],
+        slideSix = document.querySelectorAll(".slide--six")[0],
         cookieButton = document.querySelectorAll(".cookie-popup-button")[0];
 
     setTimeout(function () {
@@ -10034,6 +10035,12 @@ var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol
           when: 1400,
           className: "slide--shown"
         }
+      }, {
+        element: slideSix,
+        reveal: {
+          when: 2200,
+          className: "slide--shown"
+        }
       }]
     }).init();
 

src/js/main.js

@@ -9,6 +9,7 @@ let iphone = document.querySelectorAll(".phone-wrap--iphone")[0],
     features = document.querySelectorAll(".features-wrap")[0],
     slideTwo = document.querySelectorAll(".slide--two")[0],
     slideThree = document.querySelectorAll(".slide--three")[0],
+    slideSix = document.querySelectorAll(".slide--six")[0],
     cookieButton = document.querySelectorAll(".cookie-popup-button")[0]
 
 setTimeout(() => body.classList.add("shown"), 400)
@@ -96,6 +97,14 @@ new ScrollOver({
           when : 1400,
           className: "slide--shown"
         }
+    },
+    {
+      element : slideSix,
+      reveal:
+        {
+          when : 2200,
+          className: "slide--shown"
+        }
     }
   ]
 }).init()

src/scss/main.scss

@@ -13,5 +13,6 @@
 @import "slide--three";
 @import "slide--four";
 @import "slide--five";
+@import "slide--six";
 
 @import "footer";

src/scss/slide--five.scss

@@ -27,6 +27,25 @@
   margin: 0 0 0 -407px;
 }
 
+.slide__bg-area {
+  position: absolute;
+  background-color: $colorWhite;
+  opacity: 0;
+  left: 50%;
+  top: -88px;
+  margin: 0 0 0 -200px;
+  width: 400px;
+  height: 400px;
+  border-radius: 50%;
+
+  transform: scale(.1);
+  animation-timing-function: ease;
+  animation-name: pulsateArea;
+  animation-duration: 3.4s;
+  animation-delay: 2.3s;
+  animation-iteration-count: infinite;
+}
+
 .slide.slide--five .slide__bg-icon {
   position: absolute;
   top: 86px;
@@ -39,7 +58,7 @@
 
   box-shadow: 0 2px 9px 0 rgba(57,80,164,0.69);
   position: relative;
-
+  animation-timing-function: cubic-bezier(0.685, 0.000, 0.025, 1.185);
   animation-name: pulsate;
   animation-duration: 3.4s;
   animation-iteration-count: infinite;
@@ -129,6 +148,17 @@
   }
 }
 
+@keyframes pulsateArea {
+  0% {
+    transform: scale(.1);
+    opacity: .1
+  }
+  100% {
+    transform: scale(1.4);
+    opacity: 0
+  }
+}
+
 @media (max-width: 1140px) {
 
   .slide.slide--five .slide__inner {
@@ -197,7 +227,3 @@
   }
 
 }
-
-@media (max-width: 860px) {
-
-}

src/scss/slide--six.scss

@@ -0,0 +1,234 @@
+.slide.slide--six {
+  padding: 40px 0 40px 0;
+  margin: 0 0 0 0;
+}
+
+.slide--shown {
+  transform: scale(1);
+  opacity:1
+}
+
+.slide.slide--six .slide__footer {
+      width: 450px;
+}
+
+.messages {
+  margin: 50px auto 30px;
+  width: 880px;
+  height: 600px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-content:flex-start;
+  justify-content: space-between;
+}
+
+.message {
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  flex-direction: row;
+  position: absolute;
+  opacity: 0;
+  transition: transform .6s ease, opacity .4s ease;
+  transition-delay: .1s;
+}
+
+.message.message--outcoming {
+  flex-direction: row-reverse;
+  transform: translate3d(10px, 20px, 0) scale(.9) rotate(0);
+}
+.message.message--incoming {
+  transform: translate3d(-10px, 20px, 0) scale(.9) rotate(0);
+}
+
+.message.message--one { top: 120px; left: 0; transition-delay: .2s;}
+.message.message--two { top: 0; left: 200px; transition-delay: .3s;}
+.message.message--three { top: 135px; right: 140px; transition-delay: .4s;}
+.message.message--four { top: 220px; left: 160px; transition-delay: .5s;}
+.message.message--five { top: 355px; left: 0px; transition-delay: .6s;}
+.message.message--six { top: 365px; right: 0; transition-delay: .7s;}
+.message.message--seven { top: 365px; right: 320px; transition-delay: .8s;}
+
+.slide--shown .message.message--outcoming,
+.slide--shown .message.message--incoming  {
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
+}
+
+
+
+.message__avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26);
+  background-color: $colorWhite;
+  background-size: 36px;
+  margin: 0 8px;
+}
+
+.message--one .message__avatar { background-image: url(../img/new-site/face1@2x.png) }
+.message--two .message__avatar { background-image: url(../img/new-site/face2@2x.png) }
+.message--three .message__avatar { background-image: url(../img/new-site/face3@2x.png) }
+.message--four .message__avatar { background-image: url(../img/new-site/face4@2x.png) }
+.message--five .message__avatar { background-image: url(../img/new-site/face5@2x.png) }
+.message--six .message__avatar { background-image: url(../img/new-site/face6@2x.png) }
+.message--seven .message__avatar { background-image: url(../img/new-site/face7@2x.png) }
+
+.message__bubble {
+  background-color: $colorWhite;
+  box-shadow: 0 4px 18px 0 rgba(189,208,223,0.26);
+  border-radius: 8px;
+  max-width: 204px;
+}
+
+.message__name {
+  font-size: 14px;
+  color: #939BA1;
+  padding: 12px 12px 2px 12px;
+}
+
+.message__text {
+  padding: 0 12px 8px 12px;
+  font-size: 15px;
+  color: #000;
+}
+
+.message__location {
+  width: 180px;
+  height: 60px;
+  background-size: cover;
+  background-image: url(../img/new-site/location@2x.png);
+  margin: 0 12px 12px 12px;
+}
+
+.message__player {
+  width: 162px;
+  height: 52px;
+  background-size: cover;
+  background-image: url(../img/new-site/player@2x.png);
+  margin: 0 12px 12px 12px;
+}
+
+.message__transaction {
+  width: 180px;
+  padding: 0 12px 12px 12px;
+}
+
+.message__transaction__amount {
+  font-size: 25px;
+  font-family:$PostGroteskMedium;
+}
+
+.message__transaction__amount .currency {
+  color: #C2C4CB;
+  letter-spacing: 2px;
+}
+
+.message__transaction__details {
+  padding: 8px 0 0 0;
+}
+
+.message__transaction__details .text-gray {
+  display: inline-block;
+  color: #C2C4CB;
+  width: 44px;
+}
+
+.message__custom {
+  margin: 0 12px 12px 12px;
+  width: 180px;
+  height: 150px;
+  border: 1px dashed #6E97E9;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.message__custom__icon-wrap {
+  width: 46px;
+  height: 46px;
+  background-color: #E0E9F9;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.message__custom__icon {
+  width: 24px;
+  height: 24px;
+  background-image: url(../img/new-site/icon-plus.svg);
+  background-size: 24px;
+}
+
+.message__custom__text {
+  text-align: center;
+  color: #95A3AD;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 16px 0;
+}
+
+.message__bubble-footer {
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+}
+
+.message__bubble-footer.message__bubble-footer--button {
+  color: $colorWhite;
+  background-color: #6E97E9;
+  border-radius: 0px 0px 8px 8px;
+}
+
+.message__bubble-footer.message__bubble-footer--status {
+  border-top: 1px solid #E8EBEC;
+  color: #6E97E9;
+  border-radius: 0px 0px 8px 8px;
+}
+
+@media (max-width: 922px) {
+
+  .messages {
+    margin: 50px auto 30px;
+    width: 748px;
+    height: 620px;
+  }
+  .message.message--three {right: 30px; top: 55px; }
+  .message.message--four { left:170px; top: 225px; }
+  .message.message--five { left:0; top: 355px; }
+  .message.message--six {top: 255px; }
+  .message.message--seven { right:210px; top: 405px;}
+
+}
+
+@media (max-width: 767px) {
+
+  .slide.slide--six {
+    padding: 0;
+  }
+
+  .messages {
+    margin: 20px auto 10px;
+    width: 375px;
+    padding: 0 10px;
+  }
+
+  .message.message--one {left: 0; top: 0;}
+  .message.message--two {display: none;}
+  .message.message--three {right: 0; top: 88px;}
+  .message.message--four { display: none; }
+  .message.message--five { left:0; top: 278px;}
+  .message.message--six {display: none; }
+  .message.message--seven { right:0px; top: 406px;}
+}
+
+@media (max-width: 375px) {
+  .messages {
+    width: auto;
+  }
+}