From 9fa2c08757b94353c5f8378dee3a0f6dfd622402 Mon Sep 17 00:00:00 2001
From: Anxhelo Lushka <anxhelo1995@gmail.com>
Date: Mon, 6 May 2019 01:01:17 +0200
Subject: [PATCH] Changes to logo boxes and new clients section

---
 _includes/contact.html |  26 +++++-
 _includes/logos.html   | 186 +++++++++++++++++++----------------------
 _sass/_layout.scss     |  48 ++++++-----
 3 files changed, 136 insertions(+), 124 deletions(-)

diff --git a/_includes/contact.html b/_includes/contact.html
index a48b7ed..f35faa6 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -8,7 +8,7 @@
 <hr>
 
 <div class="pt-3 pb-2 align-left">
-        <form action="https://formspree.io/hello@ura.design" method="POST">
+        <form action="https://formspree.io/logobridge@ura.design" method="POST">
                 <label for="name">What’s the <strong>Name</strong> of your project you need a logo for?</label>
           <input class='required' name='name' placeholder='Project Name' type='text'>
            <div class="pt-2">
@@ -28,9 +28,31 @@
         </div>
         </form>
 </div>
+
+<p class="pt-1 pb-2">Every logo gets the fully fledged treatment from us. The higher your<br> bid is, the quicker we can get your logo up to speed.</p>
+
 <hr>
 
-<p class="pt-2">Every logo gets the fully fledged treatment from us. The higher your<br> bid is, the quicker we can get your logo up to speed.</p>
+<div class="pt-2">
+  <p class="bold">Clients we worked with:</p>
+  <div class="row grayscale">
+
+<div class="col-sm">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52.917 31.75" height="120" width="200"><path d="M4.047 9.47H48.87V22.28H4.047z"/><path d="M46.853 18.67c-.087.025-.162.037-.237.037-.26 0-.386-.112-.386-.436v-2.428c0-1.282-1.02-1.905-2.23-1.905-.92 0-1.42.112-2.403.5l-.2 1.295 1.282.137.187-.635c.26-.137.523-.162.86-.162.91 0 .92.685.92 1.258v.187a7.35 7.35 0 0 0-.921-.05c-1.282 0-2.615.324-2.615 1.706 0 1.17.92 1.606 1.73 1.606.91 0 1.482-.548 1.805-1.12.075.685.486 1.12 1.233 1.12a2.17 2.17 0 0 0 1.009-.261zm-3.436-.037c-.486 0-.66-.286-.66-.647 0-.6.498-.772 1.07-.772.26 0 .548.037.81.075-.037.934-.647 1.345-1.22 1.345zM41.262 11.1l-2.428 8.554h-1.58L39.68 11.1zM38 11.1l-2.428 8.554h-1.58L36.42 11.1zm-6.723 2.95h1.68v2.017h-1.68zm0 3.598h1.68v2.017h-1.68zm-2.453-.075l1.27.125-.35 1.967h-4.893l-.162-.847 3.088-3.548h-1.756l-.25.872-1.158-.125.2-1.967h4.918l.125.847-3.113 3.548h1.818zm-8.03-3.636c-2.017 0-3.013 1.357-3.013 3 0 1.793 1.195 2.85 2.926 2.85 1.793 0 3.088-1.133 3.088-2.926 0-1.57-.984-2.926-3-2.926zm-.037 4.607c-.872 0-1.32-.747-1.32-1.718 0-1.058.5-1.668 1.332-1.668.76 0 1.37.5 1.37 1.644 0 1.083-.548 1.743-1.382 1.743zm-4.42-.112h.747v1.22h-2.34v-3.15c0-.97-.324-1.345-.96-1.345-.772 0-1.083.548-1.083 1.332v1.955h.747v1.22h-2.353v-3.163c0-.97-.324-1.345-.96-1.345-.772 0-1.083.548-1.083 1.332v1.955h1.07v1.22H6.71v-1.22h.747V15.27H6.71v-1.22h2.353v.847c.336-.598.92-.96 1.706-.96.81 0 1.556.386 1.83 1.208.31-.747.946-1.208 1.83-1.208 1.01 0 1.93.6 1.93 1.942v2.552z" fill="#fff"/></svg>
+</div>
+
+<div class="col-sm">
+  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 52.917 31.75"><g transform="matrix(.165566 0 0 .165566 13.991153 8.3417)"><path d="M84.9 6.8l-2.4 9.6C85.9 9.6 91.4 4.5 97.7 0c-4.6 5.3-8.8 10.6-11.3 16C90.7 9.9 96.5 6.6 103 4.3 94.3 12 87.4 20.4 82.2 28.7L78 26.9c.7-6.7 3.2-13.5 6.9-20.1z" fill="#68b044"/><path d="M73.8 25.1l7.9 3.3c0 2-.2 8.2 1.1 10 13.2 17 11 51.2-2.7 52-20.8 0-28.8-14.1-28.8-27.1 0-11.9 14.2-19.7 22.7-26.7 2.3-1.9 1.9-6.1-.2-11.5z" fill="#f5f8de"/><path d="M81.7 28.3l2.9 1.5c-.3 1.9.1 6.1 2 7.1 8.4 5.2 16.2 10.8 19.3 16.5 11 19.9-7.7 38.4-24 36.6 8.8-6.5 11.4-19.9 8.1-34.6-1.3-5.7-3.4-10.9-7.1-16.8-1.6-2.7-1-6.3-1.2-10.3z" fill="#7e4798"/><g fill="#010101"><path d="M78.5 37.8c-.6 3.1-1.3 8.7-4 10.8-1.1.8-2.3 1.6-3.5 2.4-4.9 3.3-9.7 6.4-11.9 14.3-.5 1.7-.1 3.5.3 5.2 1.2 4.9 4.6 10.1 7.3 13.2 0 .1.5.5.5.6 2.2 2.6 2.9 3.4 11.3 5.3l-.2.9c-5.1-1.3-9.2-2.6-11.9-5.6 0-.1-.5-.5-.5-.5-2.8-3.2-6.3-8.6-7.5-13.7-.5-2-.9-3.6-.3-5.7 2.3-8.2 7.3-11.5 12.3-14.9 1.1-.7 2.5-1.4 3.6-2.3 2.3-1.5 3.4-6.2 4.5-10z"/><path d="M80.7 50.8c.1 3.5-.3 5.3.6 7.8.5 1.5 2.4 3.5 2.9 5.5.7 2.6 1.5 5.5 1.5 7.3 0 2-.1 5.8-1 9.8-.7 3.3-2.2 6.2-4.8 7.8-2.7-.5-5.8-1.5-7.6-3.1-3.6-3.1-6.7-8.3-7.1-12.8-.3-3.7 3.1-9.2 7.9-11.9 4-2.4 5-5 5.9-9.4-1.2 3.8-2.4 6.9-6.3 9-5.7 3-8.6 7.9-8.3 12.7.4 6.1 2.8 10.2 7.6 13.5 2 1.4 5.8 2.9 8.2 3.3V90c1.8-.3 4.1-3.3 5.3-7.2 1-3.6 1.4-8.1 1.3-11-.1-1.7-.8-5.3-2.2-8.6-.7-1.8-1.9-3.6-2.6-4.9-.9-1.5-.9-4.3-1.3-7.5z"/><path d="M80.1 64.5c.1 2.4 1 5.4 1.4 8.5.3 2.3.2 4.6.1 6.6-.1 2.3-.8 6.5-1.9 8.6-1-.5-1.4-1-2.1-1.8-.8-1.1-1.4-2.3-1.9-3.6-.4-1-.9-2.2-1.1-3.5-.3-2-.2-5.2 2.1-8.4 1.8-2.6 2.2-2.8 2.8-5.7-.8 2.6-1.4 2.9-3.3 5.1-2.1 2.4-2.4 6-2.4 8.9 0 1.2.5 2.6 1 3.8.5 1.3 1 2.7 1.7 3.7 1.1 1.6 2.5 2.6 3.2 2.7v-.1c1.3-1.5 2.1-2.9 2.4-4.4.3-1.8.4-3.5.6-5.6.2-1.8.1-4.1-.4-6.5-.6-3-1.7-6.1-2.2-8.3zm.4-29.5c.1 3.5.3 10 1.3 12.6.3.9 2.8 4.7 4.5 9.4 1.2 3.2 1.5 6.2 1.7 7.1.8 3.8-.2 10.3-1.5 16.4-.7 3.3-3 7.4-5.6 9l-.5.9c1.5-.1 5.1-3.6 6.4-8.1 2.2-7.5 3-11 2-19.4-.1-.8-.5-3.6-1.8-6.5-1.9-4.5-4.6-8.8-4.9-9.7-.7-1.4-1.5-7.6-1.6-11.7z"/><path d="M81.7 28.6c-.2 3.6-.2 6.4.4 9.1.7 2.9 4.5 7.1 6.1 11.9 3 9.2 2.2 21.2.1 30.5-.8 3.3-4.6 8.1-8.5 9.6l2.8.7c1.5-.1 5.5-3.8 7.1-8 2.5-6.7 3-14.6 2-23-.1-.8-1.4-8-2.7-11-1.8-4.5-4.7-7.7-5.7-10.5-.8-2.1-1.1-7.7-.6-8.8z"/></g><path d="M3.8 8.8h54.1c2 0 3.8 1.7 3.8 3.8v16c0 2.1-1.8 3.8-3.8 3.8H46.8c-2.5 0-3.6 1.4-3.6 3v52.3a3.05 3.05 0 0 1-3.1 3.1H21.7c-1.7 0-3-1.3-3-3.1V34.9c0-1.6-1.5-2.6-2.6-2.6H3.8A3.8 3.8 0 0 1 0 28.5v-16c0-2 1.7-3.7 3.8-3.7zM142.6 30h4.8c1.8 0 3.2 1.4 3.2 3.1v17.1c0 2.2.1 3.1-2.6 3.1-5.3 0-7.7 2.8-7.7 5.9v28.9c0 1.3-1.3 2.5-2.8 2.5h-17.2c-1.5 0-2.8-1.1-2.8-2.5V55.2c0-.6 0-1.4.1-1.9.9-12.2 10.5-21.9 22.6-23.2.3 0 1.7-.1 2.4-.1z" fill="#7e4798"/><path d="M101.7 46.3c-2.9-2.6-6.5-4.8-10.3-6.9-1.7-.9-6.9-5-5.1-10.8l-13.1-5.4-.9.7c4.4 7.9 2.1 12.1-.1 13.5-4.4 3-10.8 6.8-13.9 10.1-6.1 6.3-7.9 12.3-7.3 20.1.6 10.1 7.9 18.5 17.8 21.8 4.3 1.4 8.3 1.6 12.7 1.6 7.1 0 14.5-1.9 19.8-6.3a24.9 24.9 0 0 0 9-19.1c0-7.3-3.1-14.3-8.6-19.3zm-1.9 36.9c-4.9 4-13.7 6.8-18.4 6.6-5.2-.3-10.3-1.1-14.8-3.3-7.9-3.8-13.1-12.1-13.5-18.8-.7-13.7 5.9-17.6 12-22.6 3.4-2.8 8.2-4.2 10.9-9.2.5-1.1.8-3.5.2-6-.3-.9-1.5-3.9-2-4.6l9.8 4.3c-1.2 4.5 2.5 9.2 5.5 10.9s7.7 4.9 10.6 7.5c5.1 4.5 7.7 10.9 7.7 17.6s-2.8 13.3-8 17.6z" fill="#010101"/></g><script/></svg>
+</div>
+
+<div class="col-sm">
+  <svg xmlns="http://www.w3.org/2000/svg" width="200" height="120" viewBox="0 0 52.917 31.75"><path d="M21.7 18.56v-5.517h1.7v4.105h2.442v1.412zm5.255-5.517h1.7v5.517h-1.7zm2.967 5.517v-5.517h1.74l1.606 2.953h.017v-2.953h1.606v5.517h-1.654l-1.692-3.012h-.017v3.012zm11.25-2.13c0 1.538-.812 2.264-2.513 2.264s-2.52-.726-2.52-2.264v-3.386h1.7v3.007c0 .556 0 1.268.828 1.268s.804-.7.804-1.268v-3.007h1.7v3.386zm.712 2.13l1.992-2.936-1.815-2.58h1.995l.833 1.5.82-1.5h1.886l-1.77 2.598 1.968 2.92h-2.047l-.944-1.644-.972 1.644z" fill="#003764"/><path d="M13.6 20.115H7.952v-5.65h-2.83v8.475H13.6z" fill="#009bde"/><path d="M7.947 13.048v-1.4h8.477v8.468h-1.4v2.825h4.235V8.8H5.124v4.237z" fill="#003764"/></svg>
+</div>
+
+  </div>
+  </div>
+
+
 <div class="pt-2">
 <svg xmlns="http://www.w3.org/2000/svg" width="46" height="44"><path d="M40.763 7.46L24.56.7a4.063 4.063 0 0 0-3.114 0L5.245 7.46c-1.5.624-2.498 2.1-2.498 3.738 0 16.75 9.662 28.328 18.69 32.092.996.413 2.118.413 3.114 0 7.232-3.013 18.7-13.417 18.7-32.092a4.05 4.05 0 0 0-2.489-3.738zM23.008 38.058L23 5.908l14.843 6.185c-.278 12.776-6.928 22.033-14.835 25.965z"/></svg>
 <p class="bold">Not satisfied? We offer a 100% Money Back Guarantee.</p>
diff --git a/_includes/logos.html b/_includes/logos.html
index f174c61..e21de44 100644
--- a/_includes/logos.html
+++ b/_includes/logos.html
@@ -3,30 +3,30 @@
     <div id="free" class="row">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/42.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/42.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/42.png" alt="Logo 42">
                 </div>
+                <button class="button-download hover-box">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/42.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/41.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/41.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/41.png" alt="Logo 41">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/41.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/40.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/40.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/40.png" alt="Logo 40">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/40.zip" download>Download</a>
         </div>
 
     </div>
@@ -34,358 +34,340 @@
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/39.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/39.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/39.png" alt="Logo 39">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/39.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/38.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/38.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/38.png" alt="Logo 38">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/38.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/37.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/37.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/37.png" alt="Logo 37">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/37.zip" download>Download</a>
         </div>
 
     </div>
 
-
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/36.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/36.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/36.png" alt="Logo 36">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/36.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/35.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/35.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/35.png" alt="Logo 35">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/35.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/34.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/34.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/34.png" alt="Logo 34">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/34.zip" download>Download</a>
         </div>
 
     </div>
 
-
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/33.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/33.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/33.png" alt="Logo 33">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/33.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/32.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/32.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/32.png" alt="Logo 32">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/32.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/31.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/31.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/31.png" alt="Logo 31">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/31.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/30.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/30.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/30.png" alt="Logo 30">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/30.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/29.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/29.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/29.png" alt="Logo 29">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/29.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/28.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/28.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/28.png" alt="Logo 28">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/28.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/27.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/27.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/27.png" alt="Logo 27">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/27.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/26.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/26.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/26.png" alt="Logo 26">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/26.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/25.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/25.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/25.png" alt="Logo 25">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/25.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/24.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/24.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/24.png" alt="Logo 24">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/24.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/23.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/23.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/23.png" alt="Logo 23">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/23.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/22.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/22.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/22.png" alt="Logo 22">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/22.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/21.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/21.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/21.png" alt="Logo 21">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/21.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/20.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/20.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/20.png" alt="Logo 20">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/20.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/19.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/19.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/19.png" alt="Logo 19">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/19.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/18.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/18.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/18.png" alt="Logo 18">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/18.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/17.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/17.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/17.png" alt="Logo 17">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/17.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/16.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/16.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/16.png" alt="Logo 16">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/16.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/15.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/15.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/15.png" alt="Logo 15">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/15.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/14.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/14.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/14.png" alt="Logo 14">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/14.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/13.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/13.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/13.png" alt="Logo 13">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/13.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/12.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/12.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/12.png" alt="Logo 12">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/12.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/11.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/11.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/11.png" alt="Logo 11">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/11.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/10.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/10.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/10.png" alt="Logo 10">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/10.zip" download>Download</a>
         </div>
 
-
-
     </div>
 
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/9.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/9.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/9.png" alt="Logo 9">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/9.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/8.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/8.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/8.png" alt="Logo 8">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/8.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/7.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/7.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/7.png" alt="Logo 7">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/7.zip" download>Download</a>
         </div>
 
     </div>
@@ -393,30 +375,30 @@
     <div class="row pt-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/6.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/6.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/6.png" alt="Logo 6">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/6.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/5.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/5.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/5.png" alt="Logo 5">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/5.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/4.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/4.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/4.png" alt="Logo 4">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/4.zip" download>Download</a>
         </div>
 
     </div>
@@ -424,30 +406,30 @@
     <div class="row pt-2 pb-2">
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/3.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/3.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/3.png" alt="Logo 3">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/3.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/2.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/2.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/2.png" alt="Logo 2">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/2.zip" download>Download</a>
         </div>
 
         <div class="col-sm center">
-            <a href="{{ site.url }}/assets/logos/1.zip" download>
+            <a class="hover-box" href="{{ site.url }}/assets/logos/1.zip" download>
                 <div class="box">
                     <img src="{{ site.url }}/assets/img/1.png" alt="Logo 1">
                 </div>
+                <button class="button-download">Download</button>
             </a>
-            <a class="button-download" href="{{ site.url }}/assets/logos/1.zip" download>Download</a>
         </div>
 
     </div>
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
index 67f15a6..fb1bb6d 100644
--- a/_sass/_layout.scss
+++ b/_sass/_layout.scss
@@ -23,6 +23,8 @@
 
 .button-download {
     background: #E2E2E2;
+    color: #000;
+    border: #E2E2E2;
     border-radius: 10px;
     text-decoration: none !important;
     font-size: 16px !important;
@@ -30,18 +32,7 @@
     text-transform: uppercase;
     padding: 12px 24px;
     box-sizing: border-box;
-
-    &:hover {
-    background-color: #444;
-    color: #fff;
-    -webkit-transition: all 0.3s ease-in-out;
-    -moz-transition: all 0.3s ease-in-out;
-    transition: all 0.3s ease-in-out;
-    }
-
-    &:active {
-    background-color: #000;
-    }
+    cursor: pointer;
 }
 
     .button-free {
@@ -310,6 +301,14 @@
 
     .align-left {
     text-align: left;
+    }
+
+     .align-right {
+    text-align: right;
+    }
+
+    .center {
+    text-align: center;
     }
 
     .bg-mute {
@@ -328,8 +327,10 @@
     margin: 0 auto;
     }
 
-    .center {
-    text-align: center;
+    .grayscale {
+    opacity: 0.65;
+    -webkit-filter: grayscale(1);
+    filter: grayscale(1);
     }
 
     .box {
@@ -338,16 +339,24 @@
     border: 1px solid #E2E2E2;
     box-sizing: border-box;
     text-align: center;
-    margin-bottom: 25px;
+    margin-bottom: -22.5px;
     margin-top: 25px;
+    }
 
-    &:hover {
-        border: 2px solid #000;
+.hover-box:hover .button-download {
+     background-color: #000;
+     color: #fff;
+    -webkit-transition: all 0.3s ease-in-out;
+    -moz-transition: all 0.3s ease-in-out;
+     transition: all 0.3s ease-in-out;
+}
+
+.hover-box:hover .box {
+        border: 1px solid #000;
         -webkit-transition: all 0.3s ease-in-out;
         -moz-transition: all 0.3s ease-in-out;
         transition: all 0.3s ease-in-out;
-    }
-    }
+}
 
 .row {
     display: -webkit-box;
@@ -382,4 +391,3 @@
          flex-basis: auto;
     }
 }
-