Updated design

changed a lot of things

.gitignore

@@ -1,3 +1,7 @@
 _site/
 .sass-cache/
 .jekyll-metadata
+
+Gemfile
+
+Gemfile\.lock

Gemfile

@@ -1,25 +0,0 @@
-source "https://rubygems.org"
-ruby RUBY_VERSION
-
-# Hello! This is where you manage which Jekyll version is used to run.
-# When you want to use a different version, change it below, save the
-# file and run `bundle install`. Run Jekyll with `bundle exec`, like so:
-#
-#     bundle exec jekyll serve
-#
-# This will help ensure the proper Jekyll version is running.
-# Happy Jekylling!
-gem "jekyll", "3.3.1"
-
-# This is the default theme for new Jekyll sites. You may change this to anything you like.
-gem "minima", "~> 2.0"
-
-# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
-# uncomment the line below. To upgrade, run `bundle update github-pages`.
-# gem "github-pages", group: :jekyll_plugins
-
-# If you have any plugins, put them here!
-group :jekyll_plugins do
-   gem "jekyll-feed", "~> 0.6"
-   gem "github-pages", "~> 111"
-end

Gemfile.lock

@@ -1,206 +0,0 @@
-GEM
-  remote: https://rubygems.org/
-  specs:
-    activesupport (4.2.7)
-      i18n (~> 0.7)
-      json (~> 1.7, >= 1.7.7)
-      minitest (~> 5.1)
-      thread_safe (~> 0.3, >= 0.3.4)
-      tzinfo (~> 1.1)
-    addressable (2.5.0)
-      public_suffix (~> 2.0, >= 2.0.2)
-    coffee-script (2.4.1)
-      coffee-script-source
-      execjs
-    coffee-script-source (1.12.2)
-    colorator (1.1.0)
-    ethon (0.10.1)
-      ffi (>= 1.3.0)
-    execjs (2.7.0)
-    faraday (0.10.0)
-      multipart-post (>= 1.2, < 3)
-    ffi (1.9.14-x64-mingw32)
-    forwardable-extended (2.6.0)
-    gemoji (2.1.0)
-    github-pages (111)
-      activesupport (= 4.2.7)
-      github-pages-health-check (= 1.3.0)
-      jekyll (= 3.3.1)
-      jekyll-avatar (= 0.4.2)
-      jekyll-coffeescript (= 1.0.1)
-      jekyll-default-layout (= 0.1.4)
-      jekyll-feed (= 0.8.0)
-      jekyll-gist (= 1.4.0)
-      jekyll-github-metadata (= 2.2.0)
-      jekyll-mentions (= 1.2.0)
-      jekyll-optional-front-matter (= 0.1.2)
-      jekyll-paginate (= 1.1.0)
-      jekyll-readme-index (= 0.0.3)
-      jekyll-redirect-from (= 0.11.0)
-      jekyll-relative-links (= 0.2.1)
-      jekyll-sass-converter (= 1.3.0)
-      jekyll-seo-tag (= 2.1.0)
-      jekyll-sitemap (= 0.12.0)
-      jekyll-swiss (= 0.4.0)
-      jekyll-theme-architect (= 0.0.3)
-      jekyll-theme-cayman (= 0.0.3)
-      jekyll-theme-dinky (= 0.0.3)
-      jekyll-theme-hacker (= 0.0.3)
-      jekyll-theme-leap-day (= 0.0.3)
-      jekyll-theme-merlot (= 0.0.3)
-      jekyll-theme-midnight (= 0.0.3)
-      jekyll-theme-minimal (= 0.0.3)
-      jekyll-theme-modernist (= 0.0.3)
-      jekyll-theme-primer (= 0.1.5)
-      jekyll-theme-slate (= 0.0.3)
-      jekyll-theme-tactile (= 0.0.3)
-      jekyll-theme-time-machine (= 0.0.3)
-      jekyll-titles-from-headings (= 0.1.3)
-      jemoji (= 0.7.0)
-      kramdown (= 1.11.1)
-      liquid (= 3.0.6)
-      listen (= 3.0.6)
-      mercenary (~> 0.3)
-      minima (= 2.0.0)
-      rouge (= 1.11.1)
-      terminal-table (~> 1.4)
-    github-pages-health-check (1.3.0)
-      addressable (~> 2.3)
-      net-dns (~> 0.8)
-      octokit (~> 4.0)
-      public_suffix (~> 2.0)
-      typhoeus (~> 0.7)
-    html-pipeline (2.4.2)
-      activesupport (>= 2)
-      nokogiri (>= 1.4)
-    i18n (0.7.0)
-    jekyll (3.3.1)
-      addressable (~> 2.4)
-      colorator (~> 1.0)
-      jekyll-sass-converter (~> 1.0)
-      jekyll-watch (~> 1.1)
-      kramdown (~> 1.3)
-      liquid (~> 3.0)
-      mercenary (~> 0.3.3)
-      pathutil (~> 0.9)
-      rouge (~> 1.7)
-      safe_yaml (~> 1.0)
-    jekyll-avatar (0.4.2)
-      jekyll (~> 3.0)
-    jekyll-coffeescript (1.0.1)
-      coffee-script (~> 2.2)
-    jekyll-default-layout (0.1.4)
-      jekyll (~> 3.0)
-    jekyll-feed (0.8.0)
-      jekyll (~> 3.3)
-    jekyll-gist (1.4.0)
-      octokit (~> 4.2)
-    jekyll-github-metadata (2.2.0)
-      jekyll (~> 3.1)
-      octokit (~> 4.0, != 4.4.0)
-    jekyll-mentions (1.2.0)
-      activesupport (~> 4.0)
-      html-pipeline (~> 2.3)
-      jekyll (~> 3.0)
-    jekyll-optional-front-matter (0.1.2)
-      jekyll (~> 3.0)
-    jekyll-paginate (1.1.0)
-    jekyll-readme-index (0.0.3)
-      jekyll (~> 3.0)
-    jekyll-redirect-from (0.11.0)
-      jekyll (>= 2.0)
-    jekyll-relative-links (0.2.1)
-      jekyll (~> 3.3)
-    jekyll-sass-converter (1.3.0)
-      sass (~> 3.2)
-    jekyll-seo-tag (2.1.0)
-      jekyll (~> 3.3)
-    jekyll-sitemap (0.12.0)
-      jekyll (~> 3.3)
-    jekyll-swiss (0.4.0)
-    jekyll-theme-architect (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-cayman (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-dinky (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-hacker (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-leap-day (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-merlot (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-midnight (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-minimal (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-modernist (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-primer (0.1.5)
-      jekyll (~> 3.3)
-    jekyll-theme-slate (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-tactile (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-theme-time-machine (0.0.3)
-      jekyll (~> 3.3)
-    jekyll-titles-from-headings (0.1.3)
-      jekyll (~> 3.3)
-    jekyll-watch (1.5.0)
-      listen (~> 3.0, < 3.1)
-    jemoji (0.7.0)
-      activesupport (~> 4.0)
-      gemoji (~> 2.0)
-      html-pipeline (~> 2.2)
-      jekyll (>= 3.0)
-    json (1.8.3)
-    kramdown (1.11.1)
-    liquid (3.0.6)
-    listen (3.0.6)
-      rb-fsevent (>= 0.9.3)
-      rb-inotify (>= 0.9.7)
-    mercenary (0.3.6)
-    mini_portile2 (2.1.0)
-    minima (2.0.0)
-    minitest (5.10.1)
-    multipart-post (2.0.0)
-    net-dns (0.8.0)
-    nokogiri (1.7.0-x64-mingw32)
-      mini_portile2 (~> 2.1.0)
-    octokit (4.6.2)
-      sawyer (~> 0.8.0, >= 0.5.3)
-    pathutil (0.14.0)
-      forwardable-extended (~> 2.6)
-    public_suffix (2.0.4)
-    rb-fsevent (0.9.8)
-    rb-inotify (0.9.7)
-      ffi (>= 0.5.0)
-    rouge (1.11.1)
-    safe_yaml (1.0.4)
-    sass (3.4.23)
-    sawyer (0.8.1)
-      addressable (>= 2.3.5, < 2.6)
-      faraday (~> 0.8, < 1.0)
-    terminal-table (1.7.3)
-      unicode-display_width (~> 1.1.1)
-    thread_safe (0.3.5)
-    typhoeus (0.8.0)
-      ethon (>= 0.8.0)
-    tzinfo (1.2.2)
-      thread_safe (~> 0.1)
-    unicode-display_width (1.1.2)
-
-PLATFORMS
-  x64-mingw32
-
-DEPENDENCIES
-  github-pages (~> 111)
-  jekyll (= 3.3.1)
-  jekyll-feed (~> 0.6)
-  minima (~> 2.0)
-
-RUBY VERSION
-   ruby 2.2.3p173
-
-BUNDLED WITH
-   1.13.6

_config.yml

@@ -3,7 +3,7 @@
 
 # NB! Set your site's url, otherwise stuff will break :)
 
-url: "https://vocaluxe.github.io"
+url: "https://hendrikbl.github.io"
 
 # If you're hosting your site at a Project repository on GitHub pages
 # (https://yourusername.github.io/repository-name)
@@ -75,7 +75,7 @@ pages_list:
   Home: 'hero-area'
   News: 'news'
   Download: 'download'
-  About: 'about'  
+  About: 'about'
   Help: 'help'
   Contribute: 'contribute'
   Songs: 'songs'

_includes/download.html

@@ -15,56 +15,53 @@
         <div class="container">
             <div class="row">
                 <h1 class="title">{{ page.title }}</h1>
-                <p>We provide portable versions of Vocaluxe for every release. If you want to try our stable release, you could also use our installer. If you're on Linux, you need to <a href="https://github.com/Vocaluxe/Vocaluxe/blob/develop/HowToBuildLinux.md">compile Vocaluxe yourself</a> (for advanced users). If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.</p>
+                <p>
+                  We provide portable versions of Vocaluxe for every release. If you want to try our stable release, you could also use our installer. If you're on Linux, you need to <a href="https://github.com/Vocaluxe/Vocaluxe/blob/develop/HowToBuildLinux.md">compile Vocaluxe yourself</a> (for advanced users).
+                  <br />
+                  If you're looking for some older versions, check out our releases on <a href="https://github.com/Vocaluxe/Vocaluxe/releases">GitHub</a> and <a href="https://sourceforge.net/projects/vocaluxe/files/?source=directory">Sourceforge</a>.
+                </p>
                 <div class="release-section">
-                    <div class="col-md-4 flex-box-col">
+                    <div class="col-md-4 flex-box-col card nightly">
                         <h2 class="flex00a">Nightly</h2>
                         <p class="flex11a">A version with all the newest development changes. Likely to contain bugs, so use with caution.</p>
                         {% if release_nightly != nil %}
                         <span class="release-details flex00a">
-                            <p>Latest update: {{ release_nightly.created_at | date: "%Y-%m-%d" }}
-                            <br/>
-                            Read our release notes on <a href="{{ release_nightly.html_url }}">GitHub</a>.</p>
                             {% for asset in release_nightly.assets %}
                                 {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
-                                {% assign currentReleaseTitle = 'Vocaluxe ' | append: currentReleaseData[1] %}
+                                {% assign currentReleaseTitle = release_nightly.created_at | date: "%b %d, %Y"" %}
                                 {% assign currentReleaseOs = currentReleaseData[2] %}
                                 {% assign currentReleaseArch = currentReleaseData[3] %}
                                 {% include downloadButton.html title=currentReleaseTitle os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
                             {% endfor %}
                         </span>
+                        <p class="release-date">{{ release_nightly.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_nightly.html_url }}">GitHub</a></p>
                         {% else %}
                             <p class="flex11100 no-release-text ">There isn't any nightly release yet.</p>
                         {% endif %}
                     </div>
-                    <div class="col-md-4 flex-box-col">
+                    <div class="col-md-4 flex-box-col card pre-release">
                         <h2 class="flex00a">Pre Release</h2>
                         <p class="flex11a">Should be almost stable, but you might experience some bugs here.</p>
                         {% if release_pre != nil %}
                         <span class="release-details flex00a">
-                            <p>Latest version: {{release_pre.name}} ({{ release_pre.created_at | date: "%Y-%m-%d" }})
-                            <br/>
-                            Read our release notes on <a href="{{ release_pre.html_url }}">GitHub</a>.</p>
                             {% for asset in release_pre.assets %}
                                 {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
-                                {% assign currentReleaseTitle = 'Vocaluxe ' | append: release_pre.name %}
+                                {% assign currentReleaseTitle = release_pre.name %}
                                 {% assign currentReleaseOs = currentReleaseData[2] %}
                                 {% assign currentReleaseArch = currentReleaseData[3] %}
                                 {% include downloadButton.html title=currentReleaseTitle os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
                             {% endfor %}
                         </span>
+                        <p class="release-date">{{ release_pre.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_pre.html_url }}">GitHub</a></p>
                         {% else %}
                             <p class="flex11100 no-release-text">There isn't any pre release yet.</p>
                         {% endif %}
                     </div>
-                    <div class="col-md-4 flex-box-col">
+                    <div class="col-md-4 flex-box-col card stable">
                         <h2 class="flex00a">Stable Release</h2>
                         <p class="flex11a">The latest release.</p>
                         {% if release_stable != nil %}
                         <span class="release-details flex00a">
-                            <p>Latest version: {{release_stable.name}} ({{ release_stable.created_at | date: "%Y-%m-%d" }})
-                            <br/>
-                            Read our release notes on <a href="{{ release_stable.html_url }}">GitHub</a>.</p>
                             {% for asset in release_stable.assets %}
                                 {% assign currentReleaseData = asset.name | split:".zip" | first | split:"_" %}
                                 {% assign currentReleaseTitle = 'Vocaluxe ' | append: release_stable.name %}
@@ -72,7 +69,8 @@
                                 {% assign currentReleaseArch = currentReleaseData[3] %}
                                 {% include downloadButton.html title=currentReleaseTitle os=currentReleaseOs arch=currentReleaseArch url=asset.browser_download_url %}
                             {% endfor %}
-                        </span>    
+                        </span>
+                        <p class="release-date">{{ release_stable.created_at | date: "%Y-%m-%d" }} | <a href="{{ release_stable.html_url }}">GitHub</a></p>
                         {% else %}
                             <p class="flex11100 no-release-text">There isn't any stable release yet.</p>
                         {% endif %}

_includes/downloadButton.html

@@ -5,8 +5,9 @@
         <span class="fa fa-windows btnDownloadIcon" aria-hidden="true"></span>
     {% endif %}
     {% if include.arch == "x86" %}
-        <span>{{include.title}} <i class="arch-x86" aria-hidden="true"></i> </span>
+        <span>{{include.title}} (x32)</span>
     {% else %}
-        <span>{{include.title}} <i class="arch-x64" aria-hidden="true"></i> </span>
+        <span>{{include.title}} (x64)</span>
-    {% endif %}    
+    {% endif %}
-</a>    
+</a>
+</br>

_includes/hero_area.html

@@ -4,16 +4,16 @@
     <div class="container">
         <div class="row">
             <div class="col-md-12">
-                <h1 class="title">{{site.title}}</h1>
-                <h2 class="subtitle">{{site.subtitle}}</h2>
 
-                <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
+                <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInLeft delay-0-5 hero-text">
-
+                  <h1 class="title">{{site.title}}</h1>
-                <div class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight delay-0-5">
+                  <h2 class="subtitle">{{site.subtitle}}</h2>
-                <p>{{ site.description }}</p>
+                  <p>{{ site.description }}</p>
-                <a href="#download" class="btn btn-common btn-lg">Download Now!</a>
+                  <a href="#download" class="btn btn-primary btn-lg">Download Now!</a>
-                <a href="#about" class="btn btn-primary btn-lg">Learn More</a>
+                  <a href="#about" class="btn btn-common btn-lg">Learn More</a>
                 </div>
+
+                <img class="col-md-6 col-sm-6 col-xs-12 animated fadeInRight" src="{{site.baseurl}}/img/screenshot_sing.png" alt="">
             </div>
         </div>
     </div>

_includes/navigation.html

@@ -25,7 +25,7 @@
         </div>
 
         <div class="collapse navbar-collapse" id="navbar">
-          <ul class="nav navbar-nav">
+          <ul class="nav navbar-nav navbar-right">
             {% if page.section-type == "index" %}
 
               <!-- Scroll to section for each page in index -->

css/main.css

@@ -1,13 +1,13 @@
 @import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
 body {
-  font-family: 'Montserrat', sans-serif;
+  font-family: 'Lato', sans-serif;
   font-size: 14px;
   font-weight: 400;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
   -webkit-font-smoothing: subpixel-antialiased;
-  -webkit-backface-visibility: hidden; 
+  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 a {
@@ -21,47 +21,51 @@ a:hover {
   color: #e76c3c;
 }
 .row {
-  padding: 80px 0px;
+  padding: 50px 0px;
 }
 .btn {
-  border: none;
   -webkit-transition: all 0.2s linear;
   -moz-transition: all 0.2s linear;
   -o-transition: all 0.2s linear;
   transition: all 0.2s linear;
-  text-transform: uppercase;
+}
-  border-radius: 0;
+.btn-lg{
+  border-radius: 25px;
 }
 .btn-common {
-  background: #3d566e;
+  background: transparent;
   color: #fff;
+  border: 1px solid white;
 }
 .btn-common:hover {
-  background: #2576E5;
+  border-color: #428bca;
-  color: #fff;
+  color: #428bca;
 }
 
 .title {
   text-align: center;
   font-size: 50px;
+  margin-bottom: 35px;
+  margin-top: 0px;
 }
+
 .subtitle {
   text-align: center;
   font-weight: 100;
-  padding-bottom: 30px;
+  padding-bottom: 25px;
   position: relative;
-  color: #bdc3c7;
+  color: white;
 }
 .navbar {
   margin-bottom: 0;
 }
 .navbar li {
-  color: #d1d1d1;
+  color: white;
 }
 .navbar-default {
   border: none;
   border-radius: 0;
-  background: rgba(0, 0, 0, 0.2);
+  background: #2C3E50;
 }
 .navbar-default .navbar-nav > .active > a,
 .navbar-default .navbar-nav > .active > a:hover,
@@ -75,14 +79,12 @@ a:hover {
 }
 .navbar-default .navbar-nav > .active,
 .navbar-default .navbar-nav li:hover {
-  background: #2576E5;
+  border-bottom: 3px solid #428bca;
-  padding-bottom: 5px;
   color: #fff;
 }
 .navbar-default .navbar-brand {
   font-size: 25px;
   color: #fff;
-  font-weight: 100;
 }
 .navbar-default .navbar-brand:hover {
   color: #eee;
@@ -92,41 +94,63 @@ a:hover {
 }
 .navbar-default .navbar-toggle:hover,
 .navbar-default .navbar-toggle:focus {
-  background: #333;
+  background: transparent;
 }
 .affix.navbar-default {
-  background: rgba(0, 0, 0, 0.8);
+  background: #2C3E50;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
 }
+
+/**Hero area**/
 #hero-area {
-  background: #013543;
+  background: #2C3E50;
-  background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -moz-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -o-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -ms-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
   color: #fff;
+  padding-top: 50px;
+  padding-bottom: 25px;
 }
+
+#hero-area img {
+  max-width: 100%;
+  margin-top: 25px;
+}
+
+#hero-area .row {
+  padding-top: 100px;
+  padding-bottom: 50px;
+}
+
 #hero-area .btn {
   margin-right: 20px;
 }
-#hero-area img {
+#hero-area .title {
-  max-width: 100%;
+  font-size: 60pt;
+  text-align: left;
+  margin-bottom: 5px;
+}
+#hero-area .subtitle {
+  font-size: 32pt;
+  font-weight: 100;
+  text-align: left;
+  margin-top: 5px;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
 }
 #hero-area p {
-  padding: 50px 0;
+  font-size: 14pt;
+  font-weight: 100;
+  padding: 25px 0;
 }
+
+
 #services h3 {
   margin-top: 0;
   font-size: 28px;
   color: #2576E5;
 }
 
-#download, #help {
-  background: #f1f1f1;
-}
 /*Portfolio*/
 #portfolio {
-  background: #f1f1f1;
+  background: #EEEEEE;
 }
 /*Portfolio Overlay */
 .portfolio-item {
@@ -173,12 +197,7 @@ a:hover {
   background: #fff;
 }
 #about {
-  background: #013543;
+  background: #2C3E50;
-  background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -moz-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -o-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: -ms-radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
-  background-image: radial-gradient(50% 50%, ellipse cover, #02647e 0%, #000508 100%);
   color: #fff;
 }
 
@@ -338,38 +357,99 @@ a:hover {
 	text-align:center;
 }
 
+/*Download Section*/
+#download, #help {
+  background: #EEEEEE;
+}
+
+#download p {
+  font-size: 16pt;
+}
+
+.card {
+  padding: 25px;
+  margin: 25px;
+  border-radius: 10px;
+  color: white;
+}
+
+.card h2 {
+  margin-top: 0px;
+  margin-bottom: 20px;
+}
+
+.card p {
+  font-size: 13pt;
+  margin-bottom: 10px;
+  font-weight: 400;
+}
+
+.nightly {
+  background-color: #2C3E50;
+}
+
+.nightly .release-date a {
+  color: #428bca;
+}
+
+.pre-release {
+  background-color: #E74C3C;
+}
+
+.pre-release .release-date a {
+  color: #2C3E50;
+}
+
+.stable {
+  background-color: #428bca;
+}
+
+.stable .release-date a {
+  color: #E74C3C;
+}
+
 .release-details {
-	text-align:left;
+	text-align: center;
+}
+
+.card .release-date {
+  font-size: 11pt;
+  margin-top: 10px;
+  margin-bottom: 0px;
 }
 
 .btnDownload {
-    display:flex;
+    margin: 5px;
-    flex: 1 0 auto;
+    background: rgba(255, 255, 255, 0.2);
-    justify-content: center;
+    border: none;
-    align-items: center;
+}
-    margin-top: 5px;    
+
+.btnDownload:hover {
+  background: rgba(0, 0, 0, 0.2);
 }
 
 .btnDownloadIcon {
-    flex: 0 0 auto;
+    /*flex: 0 0 auto;*/
-    padding-right:10px;
+    padding-right: 5px;
-    font-size:2em;
+    /*font-size: 1em;*/
-}
-
-.btnDownloadText {
-    flex: 0 1 auto;
 }
 
 .release-section {
     display:flex;
     flex-direction: column;
     align-items: stretch;
+    justify-content: space-around;
 }
 
 @media (min-width: 992px){
     .release-section {
         flex-direction: row;
     }
+
+    .card {
+      max-width: 27%;
+      min-width: 27%;
+    }
 }
 
 .flex-box-col {
@@ -421,4 +501,4 @@ a:hover {
     height: 100%;
     background-image: url("../img/stamp.jpg");
     mix-blend-mode: lighten;
-}
+}