Adding some CSS changes

index.html

@@ -26,9 +26,9 @@
     </div>
       
 <div id="slider">
-    <div class="item"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
+    <div class="item" id="spl1"><img src="../Project/buildings/buildings/1.png"  alt="building"></div>
     <div class="item" ><img src="../Project/buildings/buildings/2.png"  alt="building"></div>
-    <div class="item"><img src="../Project/buildings/buildings/3.png"  alt="building"></div>
+    <div class="item" id="spl3"><img src="../Project/buildings/buildings/3.png"  alt="building"></div>
     <div class="item"><img src="../Project/buildings/buildings/4.png"  alt="building"></div>
     <div class="item"><img src="../Project/buildings/buildings/5.png"  alt="building"></div>
         </div>

jquery.bxslider.css

@@ -21,10 +21,10 @@
 ul.bxslider {
   list-style: none;
 }
-.bx-viewport {
-  /*fix other elements on the page moving (on Chrome)*/
+/*.bx-viewport {
+  fix other elements on the page moving (on Chrome)
   -webkit-transform: translatez(0);
-}
+}*/
 /** THEME
 ===================================*/
 .bx-wrapper {

myScript1.js

@@ -16,6 +16,7 @@ $(document).ready(function(){
  $('#slider').bxSlider({
     auto: true,
              controls: true,
+             slideMargin: 70,
              infiniteLoop: true,
              mode: 'horizontal',
              autoDirection: 'next',
@@ -25,9 +26,9 @@ $(document).ready(function(){
              randomStart: false,
              pager: false,
              moveSlideQty: 1,
+             adaptiveHeight:true,
              useCSS: false,
              speed: 750,
-hideControlOnEnd: true,
              slideSelector: 'div.item',
              minSlides: 3,
              maxSlides: 3,

mystyle.css

@@ -9,6 +9,14 @@
     float: left;
 }
 
+#spl1 {
+  margin-top: 170px;
+}
+
+#spl3 {
+  margin-top: 40px;
+}
+
  .item {
   float: left;
   width: 100%;
@@ -24,19 +32,24 @@
   top: 0;
 }
 
-  
+@font-face {
+  font-family: myFirstFont;
+  src: url(assets/fonts/Merriweather/Merriweather-Black.ttf);
+} 
 
 
 #black {
    color: black;
-   font-family: Verdana;
-   font-style: bold;
+   font-family: myFirstFont;
+   font-stretch: wider;
+   font-size: larger;
 }
 
 #white {
    color: white;
-   font-family: Verdana;
-   font-style: bold;
+   font-family: myFirstFont;
+   font-stretch: wider;
+   font-size: larger;
 }
 
 #CG {
@@ -45,7 +58,7 @@
 }
 
 #myProgress {
-    width: 50%;
+    width: 30%;
     background-color: grey;
   }