Updated slider animations

src/Projects/HGM/app/styles/base/_base.scss

-$light-orange:#fccb56;
+$hg-light-orange:#fccb56;
+$hg-gray:#979faa;
 .hg-home{
  .hg{
   &-headings{
@@ -11,16 +12,16 @@ $light-orange:#fccb56;
           text-align: center;
       }
       @media  (min-width: 768px){
-          font-size: 60px;
+          font-size: 50px;
           }
           @media(min-width: 1024px){
-            font-size: 80px;
+            font-size: 60px;
             }
       @media(min-width: 1200px){
-      font-size: 100px;
+      font-size: 80px;
       }
       @media(min-width: 1726px){
-        font-size: 150px;
+        font-size: 130px;
         }
       
   }
@@ -47,6 +48,7 @@ $light-orange:#fccb56;
 }
   h4{
       font-size: 20px;
+      font-family: Moderat,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
       @media(max-width:576px){
           text-align: center;
       }
@@ -66,6 +68,7 @@ $light-orange:#fccb56;
   }
   h5{
     font-size: 20px;
+    font-family: Moderat,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
     margin-bottom: 10px;
     @media(max-width:576px){
         text-align: center;
@@ -111,7 +114,7 @@ $light-orange:#fccb56;
   .hg-link-arrow{
     width:32px;
     height:2px;
-    background:$light-orange;
+    background:$hg-gray;
     display: inline-block;
     margin-bottom: 5px;
     margin-left: 5px;
@@ -119,7 +122,7 @@ $light-orange:#fccb56;
     &:before{
         content: "";
         -webkit-transform: rotate(310deg);
-        border: solid $light-orange;
+        border: solid $hg-gray;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 6px;
@@ -130,4 +133,24 @@ $light-orange:#fccb56;
 }
   }
  }
+ .v-center{
+  display:flex;
+  align-items: center;
+}
+.h-center{
+  vertical-align: middle;
+  justify-content: center;
+
+}
+.hg-headings{
+h1,h2,h3,h4,h5,h6,p{
+  color:#282828;
+}
+}
+.hg-text-center{
+  text-align: center;
+}
+.mt-45{
+margin-top: 45px;
+}
 }
\ No newline at end of file

src/Projects/HGM/app/styles/components/_variables.scss

-$light-green:#3fe0e0;
+/*$light-green:#3fe0e0;
 $light-red:#ff4b3c;
 $light-yellow:#fecd42;
 $light-blue:#404db3;
@@ -9,4 +9,18 @@ $black:#333;
 $white:#fff;
 $light-white:#f2f2f2;
 $light-gray:#bbb;
-$thick-gray:#717171;
\ No newline at end of file
+$thick-gray:#717171;*/
+
+$hg-light-bg-black:#282828;
+$hg-gray:#979faa;
+$hg-light-red:#ff4b3c;
+$hg-light-yellow:#fecd42;
+$hg-light-blue:#404db3;
+$hg-white:#fff;
+$hg-light-black:#282828;
+$hg-black:#333;
+$hg-light-white:#f2f2f2;
+$hg-light-gray:#bbb;
+$hg-thick-gray:#717171;
+$hg-light-green:#3fe0e0;
+$hg-light-orange:#fccb56;
\ No newline at end of file

src/Projects/HGM/app/styles/components/audience-growth-home.scss

-$light-red:#ff4b3c;
-$light-yellow:#fecd42;
-$light-blue:#404db3;
-$white:#fff;
+$hg-light-red:#ff4b3c;
+$hg-light-yellow:#fecd42;
+$hg-light-blue:#404db3;
+$hg-white:#fff;
+$hg-light-bg-black:#282828;
 .hg-home{
 .hg-audience-growth{
- /*  .hg{
-    &-audience-block{
-        background-color: $light-red;
-        min-height:350px;
-        @media(max-width:767px){
-            display:initial;
-          }
-        .hg-left-cell{
-            @media(max-width:576px){
-                min-height:375px;
-            }
-        }
-        &:nth-child(2){
-            background-color: $light-yellow;
-            @media(min-width:767px){
-                 flex-direction: row-reverse;
-             }
-             .hg-left-cell{
-                 background-color: $light-yellow;
-
-             }
-        }
-        &:nth-child(3){
-            background-color: $light-blue;
-             .hg-left-cell{
-                 background-color: $light-blue;
-             }
-             h3{
-                 color:$white;
-                 @media only screen and (min-width: 1200px){
-                    //font-size: 57px;
-                }
-             }
-             h5{
-                color:$white;
-                 @media only screen and (min-width: 1200px){
-                    // font-size: 33px;
-                 }
-             }
-             a{
-                 color:$white;
-
-             }
-        }
-       }
-       &-right-cell{
-           width:100%;
-           @media(min-width:767px){
-            width:50%
-           }
-    }
-    &-left-cell{
-        width:100%;
-        background-color: $light-red;
-        align-items: center;
-        display: flex;
-        height: 380px;
-        @media(min-width:768px){
-         width:50%
-        }
-       .hg-headings{
-           padding:0px 20px;
-           @media(max-width:576px){
-            text-align: center;
-        }
-        @media only screen and (min-width: 768px){
-            padding:0px 36px 0 36px;
-            }
-        @media only screen and (min-width: 1200px){
-            padding:0px 36px 0 36px;
-        }
-       }
-    }
-   }*/
+ 
    .hg-audience-block{
     display: column;
-    background-color: $light-red;
+    background-color: $hg-light-bg-black;
     @media(min-width:768px){
         display: flex;
         flex-direction: row;
@@ -119,35 +47,37 @@ $white:#fff;
     .hg-audience-inner{
             min-height: 400px;
              width: 100%;
-              background-color: $light-red;
+              background-color: $hg-light-bg-black;
               @media(min-width:1024px){
                 min-height: 600px;
              }
+             h3,h5{
+                 color:$hg-white;
+             }
         }
         .hg-audience-inner-content{
             padding: 0px 36px 0 36px;
         }
         &:nth-child(2){
-            background-color: $light-yellow;
+            background-color: $hg-white;
             flex-direction: row-reverse;
             .hg-audience-inner{
-                 width: 100%; background-color: $light-yellow;
+                 width: 100%;
+                background-color: $hg-white;
+                h3,h5{
+                    color:$hg-light-bg-black;
+                }
             }
         }
         &:nth-child(3){
-            background-color: $light-blue;
+            background-color: $hg-light-bg-black;
             .hg-audience-inner{
-                 width: 100%; background-color: $light-blue;
+                 width: 100%;
+                  background-color: $hg-light-bg-black;
 
             }
-            h3{
-                color:$white;
-            }
-            h5{
-               color:$white;
-            }
-            a{
-                color:$white;
+            h3,h5,a{
+                color:$hg-white;
             }
         }
         .hg-headings{

src/Projects/HGM/app/styles/components/banner.scss

-$white:#fff;
+$hg-white:#fff;
 .hg-home {
   .hgm {
     &-new {
@@ -23,6 +23,18 @@ $white:#fff;
           padding: 0;
           overflow: hidden;
 
+          .mobile-none {
+            @media(max-width: 1023px) {
+              display: none;
+            }
+          }
+
+          .desktop-none {
+            @media(min-width: 1024px) {
+              display: none;
+            }
+          }
+
           @media(max-width: 767px) {
             height: calc(100vh - 20px);
           }
@@ -45,8 +57,6 @@ $white:#fff;
               height: calc(100vh - 20px);
             }
           }
-
-          
         }
       }
     }
@@ -58,7 +68,7 @@ $white:#fff;
     float: left;
     //margin-top: -550px;
     margin-top: -150px;
-    color: $white;
+    color: $hg-white;
     //color:$white;
     text-transform: uppercase;
 
@@ -67,7 +77,7 @@ $white:#fff;
     }
 
     .scroll-line {
-      background-color: $white;
+      background-color: $hg-white;
       width: 43px;
       height: 2px;
       display: inline-block;

src/Projects/HGM/app/styles/components/footer.scss

-$light-black:#282828;
-$white:#fff;
+$hg-light-black:#282828;
+$hg-white:#fff;
 .hg-home{
 .hg-footer{
     padding:50px 0;
-    background-color: $light-black;
+    background-color: $hg-light-black;
     img{
         width:auto;
         margin: 0 auto;
@@ -16,7 +16,7 @@ $white:#fff;
             }
         }
         ul{
-            color:$white;
+            color:$hg-white;
             font-size: 16px;
             margin: 40px 0px 30px;
             text-align: center;

src/Projects/HGM/app/styles/components/header-home.scss

-$white:#fff;
-.hg-home{
-   .hg{
-      &-header{
+$hg-white:#fff;
+.hg-home {
+  .hg {
+    &-header {
+      @media(min-width:1024px) {
         position: absolute;
         background-color: transparent;
         width: 100%;
-        .js-nav-inline .hg-primary-nav > li > a{
-         color:white !important;
+        left:0;
+        right:0;
+
+        .hg-primary-nav {
+          float: right;
+
+          & > li > a {
+            color: white !important;
+          }
+
+          .js-active > a {
+            box-shadow: inset 0 -2px 0 #fff;
+          }
+        }
       }
+    }
+  }
+
+  .js-nav-inline .hg-primary-nav.right-nav > li > a {
+    padding-left: 15px;
+  }
+
+  .hg-nav {
+    background-color: transparent !important;
+    position: inherit !important;
+
+    .badge-b {
+      background: url(../images/hg-banner-logo.png) no-repeat top left/contain;
+
+      @media(min-width:1024px) {
+        background: url(../images/hgm_logo.png) no-repeat top left/contain;
       }
-      
-   }
-   .hg-nav{
-      background-color:transparent !important;
-      position: inherit !important;
-      li{
-         a{
-            @media(min-width:1024px){
-            color:$white !important;
-            }
-            &:hover{
-               @media only screen and (min-width: 768px){
-                  box-shadow: inset 0 -2px 0 #fff;
-               }
-            }
-         }
+    }
+
+    li {
+      a {
+        @media(min-width:1024px) {
+          color: $hg-white !important;
+        }
+
+        &:hover {
+          @media only screen and (min-width: 768px) {
+            box-shadow: inset 0 -2px 0 #fff;
+          }
+        }
+      }
+    }
+
+    .hg-primary-nav__toggle {
+      span.bottom, span.top {
+        @media(min-width:1024px) {
+          background: $hg-white;
+        }
       }
-      .hg-primary-nav__toggle {
-         span.bottom, span.top{
-               background:$white;
-            }
-            span.middle{
-               &:before{
-                  background:$white;
-               }
-               &:after{
-                  background:$white;
-               }
-            }
-         }
-         .publishing-group{
-            box-shadow:none;
-         }
 
+      span.middle {
+        &:before {
+          @media(min-width:1024px) {
+            background: $hg-white;
+          }
+        }
+
+        &:after {
+          @media(min-width:1024px) {
+            background: $hg-white;
+          }
+        }
       }
-   }
-   
-       
-   
-     
-       
\ No newline at end of file
+    }
+
+    .publishing-group {
+      box-shadow: none;
+    }
+  }
+}

src/Projects/HGM/app/styles/components/our-work-home.scss

-$black:#333;
-$light-white:#f2f2f2;
-$light-gray:#bbb;
-$thick-gray:#717171;
+$hg-black:#333;
+$hg-light-white:#f2f2f2;
+$hg-light-gray:#bbb;
+$hg-thick-gray:#717171;
 .hg-home {
   .hg-our-work {
     min-height: 450px;
@@ -15,7 +15,26 @@ $thick-gray:#717171;
     @media only screen and (min-width: 1726px) {
       height: auto;
     }
-
+    .hg-slider-content.activeone{
+      .hg-slider-right{
+        visibility: visible !important;
+      }
+      .hg-slider-left{
+        visibility: visible !important;
+      }
+    }
+    .content-block-inner{
+      @media(min-width: 768px){
+        width:100%;
+      }
+      .slideshow-container{
+        position:relative;
+        @media(min-width: 2100px){
+        width:1920px;
+        margin:auto;
+      }
+      }
+    }
     .hg-link-arrow {
       @media(max-width:576px) {
         display: none;
@@ -70,8 +89,15 @@ $thick-gray:#717171;
 
         img {
           height: auto;
-
-          @media(min-width:577px) {
+            width:100%;
+            height:100%;
+            @media(max-width:576px) {
+              width: 215px;
+            }
+            @media only screen and (min-width: 1855px) {
+              width:400px;
+            }
+         /* @media(min-width:577px) { 1726
             //float: right;
           }
 
@@ -85,7 +111,7 @@ $thick-gray:#717171;
 
           @media only screen and (min-width: 1726px) {
             height: 550px;
-          }
+          }*/
         }
       }
 
@@ -99,7 +125,7 @@ $thick-gray:#717171;
         }
 
         @media(min-width:577px) {
-          width: 49%;
+          width: 56%;
           margin-top: 20px;
         }
 
@@ -107,9 +133,9 @@ $thick-gray:#717171;
           padding: 0 0px 0 40px;
         }
 
-        @media(min-width:1025px) {
-          padding: 0 0px 0 0px;
-        }
+      /*  @media(min-width:1025px) {
+          padding: 0 ;
+        }*/
 
         h4 {
           @media(min-width:577px) {
@@ -182,28 +208,36 @@ $thick-gray:#717171;
       &:before {
         content: "";
         -webkit-transform: rotate(134deg);
-        border: 1px solid $black;
+        border: 1px solid $hg-black;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 10px;
         position: absolute;
         top: -35px;
         right: 0;
+        @media(max-width:768px){
+          top: -45px;
+        }
       }
+     
     }
 
     .angle-right {
       &:before {
         content: "";
         -webkit-transform: rotate(313deg);
-        border: 1px solid $black;
+        border: 1px solid $hg-black;
         border-width: 0 2px 2px 0;
         display: inline-block;
         padding: 10px;
         position: absolute;
         top: -35px;
         right: 0;
+        @media(max-width:768px){
+          top: -45px;
+        }
       }
+     
     }
     /*.slideshow-container {
         max-width: 1000px;
@@ -234,7 +268,7 @@ $thick-gray:#717171;
       }*/
     /* Caption text */
     .text {
-      color: $light-white;
+      color: $hg-light-white;
       font-size: 15px;
       padding: 8px 12px;
       position: absolute;
@@ -244,7 +278,7 @@ $thick-gray:#717171;
     }
     /* Number text (1/3 etc) */
     .numbertext {
-      color: $light-white;
+      color: $hg-light-white;
       font-size: 12px;
       padding: 8px 12px;
       position: absolute;
@@ -256,7 +290,7 @@ $thick-gray:#717171;
       height: 10px;
       width: 10px;
       margin: 0 2px;
-      background-color: $light-gray;
+      background-color: $hg-light-gray;
       border-radius: 50%;
       display: inline-block;
       transition: background-color 0.6s ease;
@@ -268,7 +302,7 @@ $thick-gray:#717171;
     }
 
     .active, .dot:hover {
-      background-color: $thick-gray;
+      background-color: $hg-thick-gray;
     }
     /* Fading animation */
     .fade {
@@ -312,12 +346,12 @@ $thick-gray:#717171;
       }
 
       @media(min-width:768px) {
-        margin-left: 44%;
+       // margin-left: 44%;
         margin-top: 10px;
       }
 
       @media(min-width:1024px) {
-        margin-left: 44%;
+       // margin-left: 44%;
         margin-top: -25px;
       }
 

src/Projects/HGM/app/styles/components/what-we-do-home.scss

-$light-green:#3fe0e0;
+$hg-light-green:#3fe0e0;
+$hg-light-bg-black:#282828;
+$hg-white:#fff;
 .hg-home{
 .what{
     &-we{
         &-do{
-            background-color:$light-green;
+            background-color:$hg-light-bg-black;
             width:100%;
             min-height: 340px;
             display:flex;
@@ -21,34 +23,12 @@ $light-green:#3fe0e0;
                 }
             &-content{
                
-               /* flex-direction: column;
-                 justify-content: center;
-                   display: flex;
-                    position: absolute;
-                    top: 0;
-                    bottom: 0;
-                    z-index: 10;
-                    left:0;
-                    right:0;
-                    padding:0 20px;
-                    @media(max-width:576px){
-                        min-height: 340px;
+                    h4{
+                        color:$hg-white;
                     }
-                    @media(min-width:577px){
-                        height:100vh;
-                    }
-                    @media (min-width: 768px){
-                        left: 5%;
-                        right: 10%;
-                        padding: 20px 0;
-                    }
-                    @media (min-width: 1025px){
-                        left: 5%;
-                        right: 15%;
-                        padding: 20px 0;
-                    }*/
                     h2{
                         margin-bottom: 0 !important;
+                        color:$hg-white;
                         //visibility: visible; animation-delay: 0.3s; animation-name: fadeInUp;
                        }
                        

src/Projects/HGM/app/styles/main.scss

-@import "base/_base.scss";
-@import "components/_variables.scss";
-@import "components/banner.scss";
-@import "components/what-we-do-home.scss";
-@import "components/audience-growth-home.scss";
-@import "components/out-thinking.scss";
-@import "components/footer.scss";
-@import "components/our-work-home.scss";
-@import "components/header-home.scss";
-
 * {
-    box-sizing: border-box; 
-}
-
- 
-body {
+    box-sizing: border-box;
+  }
+  
+  
+  body {
     margin: 0;
     font-family: 'Open Sans', sans-serif;
-
-}
-h1,h2,h3,h6{
-    font-family: initial !important;
- 
-}
-
-.v-center{
-    display:flex;
-    align-items: center;
-}
-.h-center{
-    vertical-align: middle;
-    justify-content: center;
-
-}
-.container{
-    width:750px;
-    padding-left: 15px;
-    padding-right: 15px;
-    margin-left: auto;
-    margin-right: auto;
-    @media (min-width:992px){
-        width:970px;
+  }
+  
+  .hg-headings {
+    h1, h2, h3, h6 {
+      font-family: initial !important;
     }
-    @media (min-width:1200px){
-       width:1170px;
-    }
-}
-.img-responsive{
-    max-width:100%;
-    height:auto;
-    width:100%;
-}
-h1,h2,h3,h4,h5,h6,p{
-    color:#333;
-}
-.v-center{
-    align-items: center;
-    display: flex;
-    //height: 100vh;
-}
-.text-center{
-    text-align: center;
-}
-.mt-45{
-margin-top: 45px;
-}
-
-
-
-
+  }
+  
+  
+  @import "base/_base.scss";
+  @import "components/_variables.scss";
+  @import "components/banner.scss";
+  @import "components/what-we-do-home.scss";
+  @import "components/audience-growth-home.scss";
+  @import "components/out-thinking.scss";
+  @import "components/footer.scss";
+  @import "components/our-work-home.scss";
+  @import "components/header-home.scss";
+  
+  
\ No newline at end of file