Slider snap points

Fixed snap points for sliders. Vertically centered call type icons.

pbx.html

@@ -65,14 +65,15 @@
         }
 
         /* icons in cards */
-        .card .image i {
+        .card .image > i.icon {
             display: block;
             margin-left: auto;
             margin-right: auto;
             width: 50%;
-        }
-
+            margin-bottom: 25%;
+            margin-top: 25%;
 
+        }
         /* .yellow {
             color:  rgb(245, 209, 47);
         } */
@@ -107,7 +108,7 @@
     <br>
     <div class="ui inverted vertical masthead left aligned segment" style="background-color: rgb(0, 44, 117)">
         <div class="ui container">
-            <img class="ui medium right floated image" src="yealink-cordless.png">
+            <img class="ui medium right floated image" src="yealink-cordless.png" style="margin-top: -5em">
             <h3 class="ui inverted yellow header">
                 Exclusive offer
             </h3>
@@ -126,12 +127,13 @@
     </div>
     <div class="ui container" id="aboutyourbusiness">
         <h4 class="ui dividing header">About your business</h4>
-        <div class="ui grid">
-            <div class="eight wide column">
+        <div class="ui stackable grid">
+            <div class="left floated seven wide column">
                 <p>How many staff do you have?</p>
                 <div class="ui labeled ticked slider" id="numberofstaff"></div>
             </div>
-            <div class="eight wide column">
+            <!-- <div class="two wide column"></div> -->
+            <div class="right floated seven wide column">
                 <p>How many sites do you have?</p>
                 <div class="ui labeled ticked slider" id="numberofsites"></div>
             </div>