diff --git a/_includes/contact.html b/_includes/contact.html
index c486fc90..b8a85c2e 100644
--- a/_includes/contact.html
+++ b/_includes/contact.html
@@ -13,9 +13,8 @@
           collaborate as a team to distribute, study, change and improve OSEMs source code.
         </p>
         <p>
-          <a href="https://github.com/openSUSE/osem" class="btn btn-xl">
-            Why don't you join us?
-          </a>
+          <a href="https://github.com/openSUSE/osem" class="btn btn-xl hidden-xs">Why don't you join us?</a>
+          <a href="https://github.com/openSUSE/osem" class="btn btn-xl visible-xs">Join us!</a>
         </p>
         <div class="btn-group" role="group" aria-label="contact">
           <a href="mailto:info@osem.io" class="btn btn-link">
diff --git a/_includes/head.html b/_includes/head.html
index 360077e8..016ce3d7 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -16,17 +16,17 @@
 
     <!-- Custom Fonts -->
     <link rel="stylesheet" href="{{ "/css/font-awesome/css/font-awesome.min.css" | prepend: site.baseurl }}">
-    <link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
-    <link href='http://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
-    <link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
-    <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
-    <link href='http://fonts.googleapis.com/css?family=Lora:400,100,300,700' rel='stylesheet' type='text/css'>
+    <link href="//fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
+    <link href='//fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
+    <link href="//fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
+    <link href='//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
+    <link href='//fonts.googleapis.com/css?family=Lora:400,100,300,700' rel='stylesheet' type='text/css'>
 
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
-        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
-        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
+        <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
+        <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
     <![endif]-->
 </head>
diff --git a/_includes/js.html b/_includes/js.html
index e4fb43c8..73cdb275 100644
--- a/_includes/js.html
+++ b/_includes/js.html
@@ -15,4 +15,11 @@
         $(function () {
             $('[data-toggle="tooltip"]').tooltip()
         })
+    </script>
+    <script>
+        $('.portfolio-modal').on('show.bs.modal', function (e) {
+            var imgtarget = $( '#' + $( this ).data( 'imgtarget' ));
+            var imgsrc = imgtarget.data('imgsrc');
+            imgtarget.attr("src", imgsrc);
+        })
     </script>
\ No newline at end of file
diff --git a/_includes/modals.html b/_includes/modals.html
index 3be8f26f..7337a11c 100644
--- a/_includes/modals.html
+++ b/_includes/modals.html
@@ -1,4 +1,4 @@
-<div class="portfolio-modal modal fade" id="splashModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="splashModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='splashImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -15,7 +15,7 @@
                             Build a splash page for your event. Let visitors know what will happen when, how and where!
                         </p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/splash.jpg" class="img-responsive img-centered" alt="An event splash page">
+                        <img id='splashImage' class="img-responsive img-centered" alt="An event splash page" data-imgsrc="img/portfolio/splash.jpg">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
@@ -24,7 +24,7 @@
     </div>
 </div>
 
-<div class="portfolio-modal modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="scheduleModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='scheduleImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -41,7 +41,7 @@
                             Provide an event schedule with detailed information about your program.
                         </p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/schedule.jpg" class="img-responsive img-centered" alt="Schedule of a typical event in OSEM">
+                        <img id="scheduleImage" data-imgsrc="img/portfolio/schedule.jpg" class="img-responsive img-centered" alt="Schedule of a typical event in OSEM">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
@@ -50,7 +50,7 @@
     </div>
 </div>
 
-<div class="portfolio-modal modal fade" id="sessionModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="sessionModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='sessionImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -65,7 +65,7 @@
                         <h2>Sesssion Pages</h2>
                         <p>Show visitors all the details of your sessions.</p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/events.jpg" class="img-responsive img-centered" alt="A detailed session page">
+                        <img id='sessionImage' data-imgsrc="img/portfolio/events.jpg" class="img-responsive img-centered" alt="A detailed session page">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
@@ -74,7 +74,7 @@
     </div>
 </div>
 
-<div class="portfolio-modal modal fade" id="cfpModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="cfpModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='cfpImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -89,7 +89,7 @@
                         <h2>Paper Submission</h2>
                         <p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/cfp.jpg" class="img-responsive img-centered" alt="Screenshots of the paper submission workflow">
+                        <img id='cfpImage' data-imgsrc="img/portfolio/cfp.jpg" class="img-responsive img-centered" alt="Screenshots of the paper submission workflow">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
@@ -98,7 +98,7 @@
     </div>
 </div>
 
-<div class="portfolio-modal modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='registrationImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -113,7 +113,7 @@
                         <h2>Visitor Registration</h2>
                         <p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/registration.jpg" class="img-responsive img-centered" alt="Screenshots of the registration workflow">
+                        <img id='registrationImage' data-imgsrc="img/portfolio/registration.jpg" class="img-responsive img-centered" alt="Screenshots of the registration workflow">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
@@ -122,7 +122,7 @@
     </div>
 </div>
 
-<div class="portfolio-modal modal fade" id="adminModal" tabindex="-1" role="dialog" aria-hidden="true">
+<div class="portfolio-modal modal fade" id="adminModal" tabindex="-1" role="dialog" aria-hidden="true" data-imgtarget='adminImage'>
     <div class="modal-content">
         <div class="close-modal" data-dismiss="modal">
             <div class="lr">
@@ -137,7 +137,7 @@
                         <h2>Administration</h2>
                         <p>Lorem ipsum dolor sit amet, usu cu alterum nominavi lobortis. At duo novum diceret.</p>
                         <hr class="star-primary">
-                        <img src="img/portfolio/dashboard.png" class="img-responsive img-centered" alt="An administration dashboard">
+                        <img id='adminImage' data-imgsrc="img/portfolio/dashboard.png" class="img-responsive img-centered" alt="An administration dashboard">
                         <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                     </div>
                 </div>
diff --git a/_includes/navigation.html b/_includes/navigation.html
index 5538a55d..75a6e2c6 100644
--- a/_includes/navigation.html
+++ b/_includes/navigation.html
@@ -9,7 +9,8 @@
                 <span class="icon-bar"></span>
                 <span class="icon-bar"></span>
             </button>
-            <a class="navbar-brand page-scroll" href="#page-top">{{site.title}}</a>
+            <a class="navbar-brand page-scroll hidden-xs hidden-sm" href="#page-top">{{site.title}}</a>
+            <a class="navbar-brand page-scroll visible-xs visible-sm" href="#page-top">OSEM</a>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
diff --git a/css/agency.css b/css/agency.css
index 4cad35f9..8a7432e0 100644
--- a/css/agency.css
+++ b/css/agency.css
@@ -291,9 +291,9 @@ header .intro-text .intro-heading {
     margin-bottom: 25px;
     text-transform: uppercase;
     font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
-    font-size: 50px;
+    font-size: 25px;
     font-weight: 700;
-    line-height: 50px;
+    line-height: 25px;
 }
 
 @media(min-width:768px) {
@@ -330,6 +330,12 @@ section h3.section-heading {
     font-size: 40px;
 }
 
+@media(max-width:767px) {
+  #about h3.section-heading {
+      font-size: 36px;
+  }
+}
+
 section h3.section-subheading {
     margin-bottom: 75px;
     text-transform: none;
@@ -339,6 +345,7 @@ section h3.section-subheading {
     font-weight: 400;
 }
 
+
 @media(min-width:768px) {
     section {
         padding: 150px 0;
@@ -432,205 +439,6 @@ section h3.section-subheading {
     }
 }
 
-.timeline {
-    position: relative;
-    padding: 0;
-    list-style: none;
-}
-
-.timeline:before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 40px;
-    width: 2px;
-    margin-left: -1.5px;
-    background-color: #f1f1f1;
-}
-
-.timeline>li {
-    position: relative;
-    margin-bottom: 50px;
-    min-height: 50px;
-}
-
-.timeline>li:before,
-.timeline>li:after {
-    content: " ";
-    display: table;
-}
-
-.timeline>li:after {
-    clear: both;
-}
-
-.timeline>li .timeline-panel {
-    float: right;
-    position: relative;
-    width: 100%;
-    padding: 0 20px 0 100px;
-    text-align: left;
-}
-
-.timeline>li .timeline-panel:before {
-    right: auto;
-    left: -15px;
-    border-right-width: 15px;
-    border-left-width: 0;
-}
-
-.timeline>li .timeline-panel:after {
-    right: auto;
-    left: -14px;
-    border-right-width: 14px;
-    border-left-width: 0;
-}
-
-.timeline>li .timeline-image {
-    z-index: 100;
-    position: absolute;
-    left: 0;
-    width: 80px;
-    height: 80px;
-    margin-left: 0;
-    border: 7px solid #f1f1f1;
-    border-radius: 100%;
-    text-align: center;
-    color: #fff;
-    background-color: #00A388;
-}
-
-.timeline>li .timeline-image h4 {
-    margin-top: 12px;
-    font-size: 10px;
-    line-height: 14px;
-}
-
-.timeline>li.timeline-inverted>.timeline-panel {
-    float: right;
-    padding: 0 20px 0 100px;
-    text-align: left;
-}
-
-.timeline>li.timeline-inverted>.timeline-panel:before {
-    right: auto;
-    left: -15px;
-    border-right-width: 15px;
-    border-left-width: 0;
-}
-
-.timeline>li.timeline-inverted>.timeline-panel:after {
-    right: auto;
-    left: -14px;
-    border-right-width: 14px;
-    border-left-width: 0;
-}
-
-.timeline>li:last-child {
-    margin-bottom: 0;
-}
-
-.timeline .timeline-heading h4 {
-    margin-top: 0;
-    color: inherit;
-}
-
-.timeline .timeline-heading h4.subheading {
-    text-transform: none;
-}
-
-.timeline .timeline-body>p,
-.timeline .timeline-body>ul {
-    margin-bottom: 0;
-}
-
-@media(min-width:768px) {
-    .timeline:before {
-        left: 50%;
-    }
-
-    .timeline>li {
-        margin-bottom: 100px;
-        min-height: 100px;
-    }
-
-    .timeline>li .timeline-panel {
-        float: left;
-        width: 41%;
-        padding: 0 20px 20px 30px;
-        text-align: right;
-    }
-
-    .timeline>li .timeline-image {
-        left: 50%;
-        width: 100px;
-        height: 100px;
-        margin-left: -50px;
-    }
-
-    .timeline>li .timeline-image h4 {
-        margin-top: 16px;
-        font-size: 13px;
-        line-height: 18px;
-    }
-
-    .timeline>li.timeline-inverted>.timeline-panel {
-        float: right;
-        padding: 0 30px 20px 20px;
-        text-align: left;
-    }
-}
-
-@media(min-width:992px) {
-    .timeline>li {
-        min-height: 150px;
-    }
-
-    .timeline>li .timeline-panel {
-        padding: 0 20px 20px;
-    }
-
-    .timeline>li .timeline-image {
-        width: 150px;
-        height: 150px;
-        margin-left: -75px;
-    }
-
-    .timeline>li .timeline-image h4 {
-        margin-top: 30px;
-        font-size: 18px;
-        line-height: 26px;
-    }
-
-    .timeline>li.timeline-inverted>.timeline-panel {
-        padding: 0 20px 20px;
-    }
-}
-
-@media(min-width:1200px) {
-    .timeline>li {
-        min-height: 170px;
-    }
-
-    .timeline>li .timeline-panel {
-        padding: 0 20px 20px 100px;
-    }
-
-    .timeline>li .timeline-image {
-        width: 170px;
-        height: 170px;
-        margin-left: -85px;
-    }
-
-    .timeline>li .timeline-image h4 {
-        margin-top: 40px;
-    }
-
-    .timeline>li.timeline-inverted>.timeline-panel {
-        padding: 0 100px 20px 20px;
-    }
-}
 
 .team-member {
     margin-bottom: 50px;