From 601a37e5be9d1321cdf1c20330c4fc2ede39754f Mon Sep 17 00:00:00 2001
From: Laury GvR <laury@gaslightmedia.com>
Date: Fri, 8 Apr 2016 16:28:01 -0400
Subject: [PATCH] Hover effects for portfolio

---
 css/app.css                             | 348 ++++++++++++------------
 js/app.js                               |  14 +-
 js/custom/pageSetup.js                  |  14 +-
 nggallery/gallery-glmphotos-light-3.php | 123 +++------
 parts/statements.php                    |   2 +-
 scss/plugins/_nextgen.scss              |  55 ++--
 6 files changed, 253 insertions(+), 303 deletions(-)

diff --git a/css/app.css b/css/app.css
index b653e71..927555d 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6728,158 +6728,165 @@ h2#block-title {
   height: auto;
   padding: 0 0.625rem 1.25rem; }
 
-.gallery .ngg-gallery-thumbnail, .gallery .ngg-gallery-thumbnail-box {
-  float: none; }
-.gallery li a img {
-  display: block;
-  width: 100%;
-  border-radius: 4px; }
-.gallery .ngg-gallery-thumbnail, .gallery .ngg-gallery-thumbnail-box {
-  float: none; }
-.gallery .ngg-album-compact h4 .ngg-album-desc {
-  height: auto;
-  font-family: Georgia, Cambria, "Times New Roman", Times, serif;
-  font-weight: 400; }
-.gallery .ngg-album-compact .album-meta-wrapper h4 a {
-  font-style: normal; }
-.gallery .album-meta-wrapper {
-  display: block;
-  height: 54px;
-  margin-bottom: 20px; }
-.gallery .ngg-glmalbums {
-  margin: 10px 0; }
-.gallery .ngg-fancybox .image_overlay {
-  cursor: pointer;
-  -webkit-transition: background 0.3s linear;
-  -moz-transition: background 0.3s linear;
-  -ms-transition: background 0.3s linear;
-  -o-transition: background 0.3s linear;
-  transition: background 0.3s linear;
-  background-image: url("../assets/portfolio-overlay.png");
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center; }
-.gallery .ngg-fancybox:hover img {
-  opacity: 0.3; }
-.gallery .ngg-fancybox .photoTitle {
-  color: #0568b3;
-  font-weight: bold;
-  max-width: 220px; }
-.gallery .ngg-fancybox .photoHead {
-  color: white;
-  font-style: normal;
-  text-decoration: none;
-  max-width: 220px; }
-.gallery .ngg-fancybox img {
-  margin: 0 !important; }
-.gallery #homepage_problem_solvers {
-  text-align: center; }
-.gallery .ngg-galleryoverview {
-  padding: 20px; }
-.gallery .ngg-gallery-thumbnail span {
-  max-width: 220px;
-  max-height: 75px; }
-.gallery .ngg-gallery-thumbnail-box {
-  border: 1px solid lightgrey;
-  border-radius: 4px;
-  color: #0568b3;
-  background: white;
-  font-family: times;
-  font-size: 18px;
-  /*        font-style: italic;*/ }
-.gallery .image_overlay img {
-  width: 100%; }
-.gallery #fancybox-title-inside {
-  background: #0568b3;
-  border-radius: 4px;
-  color: white;
-  font-family: times;
-  font-size: 16px; }
-  .gallery #fancybox-title-inside a {
-    text-decoration: underline;
+.gallery {
+  margin: 0 auto; }
+  .gallery .ngg-gallery-thumbnail, .gallery .ngg-gallery-thumbnail-box {
+    float: none; }
+  .gallery li a img {
+    display: block;
+    width: 100%;
+    border-radius: 4px; }
+  .gallery .ngg-gallery-thumbnail, .gallery .ngg-gallery-thumbnail-box {
+    float: none; }
+  .gallery .ngg-album-compact h4 .ngg-album-desc {
+    height: auto;
+    font-family: Georgia, Cambria, "Times New Roman", Times, serif;
+    font-weight: 400; }
+  .gallery .ngg-album-compact .album-meta-wrapper h4 a {
+    font-style: normal; }
+  .gallery .album-meta-wrapper {
+    display: block;
+    height: 54px;
+    margin-bottom: 20px; }
+  .gallery .ngg-glmalbums {
+    margin: 10px 0; }
+  .gallery .ngg-fancybox .image_overlay {
+    cursor: pointer;
+    -webkit-transition: background 0.3s linear;
+    -moz-transition: background 0.3s linear;
+    -ms-transition: background 0.3s linear;
+    -o-transition: background 0.3s linear;
+    transition: background 0.3s linear;
+    background-image: url("../assets/portfolio-overlay.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center; }
+  .gallery .ngg-fancybox:hover img {
+    opacity: 0.3; }
+  .gallery .ngg-fancybox .photoTitle {
+    color: #0568b3;
+    font-weight: bold;
+    max-width: 220px; }
+  .gallery .ngg-fancybox .photoHead {
     color: white;
-    font-style: italic; }
-.gallery .ngg-fancybox {
-  margin: 0 !important; }
-.gallery .ngg-fancybox img {
-  padding: 0;
-  margin: none auto !important;
-  width: 100%;
-  border: 0; }
-.gallery .slideshowlink {
-  display: none; }
-.gallery #fancybox-title {
-  position: absolute;
-  top: 0;
-  padding-top: 10px;
-  padding-bottom: 5px; }
-  .gallery #fancybox-title #fancybox-title-inside {
-    padding: 2px 0; }
-.gallery #fancybox-outer, .gallery #fancybox-left, .gallery #fancybox-right {
-  padding-top: 40px; }
+    font-style: normal;
+    text-decoration: none;
+    max-width: 220px; }
+  .gallery .ngg-fancybox img {
+    margin: 0 !important; }
+  .gallery #homepage_problem_solvers {
+    text-align: center; }
+  .gallery .ngg-galleryoverview {
+    padding: 20px; }
+  .gallery .ngg-gallery-thumbnail span {
+    max-width: 220px;
+    max-height: 75px; }
+  .gallery .ngg-gallery-thumbnail-box {
+    border: 1px solid lightgrey;
+    border-radius: 4px;
+    color: #0568b3;
+    background: white;
+    font-family: times;
+    font-size: 18px;
+    /*        font-style: italic;*/ }
+  .gallery .image_overlay img {
+    width: 100%; }
+  .gallery #fancybox-title-inside {
+    background: #0568b3;
+    border-radius: 4px;
+    color: white;
+    font-family: times;
+    font-size: 16px; }
+    .gallery #fancybox-title-inside a {
+      text-decoration: underline;
+      color: white;
+      font-style: italic; }
+  .gallery .ngg-fancybox {
+    margin: 0 !important; }
+  .gallery .ngg-fancybox img {
+    padding: 0;
+    margin: none auto !important;
+    width: 100%;
+    border: 0; }
+  .gallery .slideshowlink {
+    display: none; }
+  .gallery #fancybox-title {
+    position: absolute;
+    top: 0;
+    padding-top: 10px;
+    padding-bottom: 5px; }
+    .gallery #fancybox-title #fancybox-title-inside {
+      padding: 2px 0; }
+  .gallery #fancybox-outer, .gallery #fancybox-left, .gallery #fancybox-right {
+    padding-top: 40px; }
 
 /* Styles for specific templates */
-#gallery-glmphotos-light-3 .special a {
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-origin: border-box;
-  display: inline-block;
-  width: 100%;
-  height: 270px;
-  border-width: 135px;
-  border-color: transparent;
-  border-radius: 100%;
-  -moz-border-radius: 100%;
-  -webkit-border-radius: 100%;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  -webkit-transition: 0.5s ease;
-  -moz-transition: 0.5s ease;
-  -ms-transition: 0.5s ease;
-  -o-transition: 0.5s ease;
-  transition: 0.5s ease; }
-#gallery-glmphotos-light-3 .special a:hover {
-  border-width: 0;
-  border-color: rgba(0, 0, 0, 0.5); }
-#gallery-glmphotos-light-3 .special .one {
-  border-style: solid; }
-#gallery-glmphotos-light-3 .special .two {
-  border-style: dashed; }
-#gallery-glmphotos-light-3 .special .three {
-  border-style: dotted; }
-#gallery-glmphotos-light-3 .special .yon {
-  border: 50px solid rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .goo {
-  border: 50px dashed rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .rok {
-  border: 50px dotted rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .ryk {
-  border: 50px double rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .yon:hover {
-  border: 1px solid rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .goo:hover {
-  border: 1px dashed rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .rok:hover {
-  border: 1px dotted rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .ryk:hover {
-  border: 1px double rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x7, #gallery-glmphotos-light-3 .special .x8, #gallery-glmphotos-light-3 .special .x9 {
-  border-radius: 0;
-  -moz-border-radius: 0;
-  -webkit-border-radius: 0; }
-#gallery-glmphotos-light-3 .special .x7 {
-  border: 50px solid rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x8 {
-  border: 50px dashed rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x9 {
-  border: 50px dotted rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x7:hover {
-  border: 1px solid rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x8:hover {
-  border: 1px dashed rgba(0, 0, 0, 0.7); }
-#gallery-glmphotos-light-3 .special .x9:hover {
-  border: 1px dotted rgba(0, 0, 0, 0.7); }
+#gallery-glmphotos-light-3 .special {
+  clear: both;
+  max-width: 270px;
+  margin: 0 auto;
+  text-align: center; }
+  #gallery-glmphotos-light-3 .special a {
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-origin: border-box;
+    display: inline-block;
+    width: 100%;
+    height: 270px;
+    border-width: 135px;
+    border-color: transparent;
+    border-radius: 100%;
+    -moz-border-radius: 100%;
+    -webkit-border-radius: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-transition: 0.5s ease;
+    -moz-transition: 0.5s ease;
+    -ms-transition: 0.5s ease;
+    -o-transition: 0.5s ease;
+    transition: 0.5s ease; }
+  #gallery-glmphotos-light-3 .special a:hover {
+    border-width: 0;
+    border-color: rgba(0, 0, 0, 0.5); }
+  #gallery-glmphotos-light-3 .special .one {
+    border-style: solid; }
+  #gallery-glmphotos-light-3 .special .two {
+    border-style: dashed; }
+  #gallery-glmphotos-light-3 .special .three {
+    border-style: dotted; }
+  #gallery-glmphotos-light-3 .special .yon {
+    border: 50px solid rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .goo {
+    border: 50px dashed rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .rok {
+    border: 50px dotted rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .ryk {
+    border: 50px double rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .yon:hover {
+    border: 1px solid rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .goo:hover {
+    border: 1px dashed rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .rok:hover {
+    border: 1px dotted rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .ryk:hover {
+    border: 1px double rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x7, #gallery-glmphotos-light-3 .special .x8, #gallery-glmphotos-light-3 .special .x9 {
+    border-radius: 0;
+    -moz-border-radius: 0;
+    -webkit-border-radius: 0; }
+  #gallery-glmphotos-light-3 .special .x7 {
+    border: 50px solid rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x8 {
+    border: 50px dashed rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x9 {
+    border: 50px dotted rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x7:hover {
+    border: 1px solid rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x8:hover {
+    border: 1px dashed rgba(0, 0, 0, 0.7); }
+  #gallery-glmphotos-light-3 .special .x9:hover {
+    border: 1px dotted rgba(0, 0, 0, 0.7); }
 #gallery-glmphotos-light-3 .ngg-gallery-thumbnail-box {
   border: none; }
 #gallery-glmphotos-light-3 .ngg-gallery-thumbnail {
@@ -6890,29 +6897,30 @@ h2#block-title {
   padding: 10px;
   position: relative;
   margin-bottom: 10px;
-  /*Hover states*/ }
+  /*Hover states*/
+  transition: all 0.1s ease 0s; }
   #gallery-glmphotos-light-3 .ngg-gallery-thumbnail .ngg-fancybox img {
     opacity: 1.0;
-    border-radius: 4px; }
-  #gallery-glmphotos-light-3 .ngg-gallery-thumbnail:hover {
+    border-radius: 4px;
+    transition: all 1s ease 0s;
+    -webkit-transition: border-radius 1s ease 0s;
+    -moz-transition: border-radius 1s ease 0s;
+    -o-transition: border-radius 1s ease 0s; }
+  #gallery-glmphotos-light-3 .ngg-gallery-thumbnail .ngg-fancybox:hover img {
     opacity: 0.75;
+    border-radius: 30px;
     transition: all 0.5s ease 0s;
-    transform: scale(1.025);
-    -webkit-transform: scale(1.025);
-    -moz-transform: scale(1.025);
-    -o-transform: scale(1.025);
-    border-radius: 30px; }
-    #gallery-glmphotos-light-3 .ngg-gallery-thumbnail:hover .ngg-fancybox img {
-      border-radius: 30px;
-      -webkit-transition: border-radius 2s;
-      -moz-transition: border-radius 2s;
-      -o-transition: border-radius 2s; }
-    #gallery-glmphotos-light-3 .ngg-gallery-thumbnail:hover .ngg-fancybox .title {
-      border-top-left-radius: 30px;
-      border-top-right-radius: 30px;
-      -webkit-transition: border-radius 2s;
-      -moz-transition: border-radius 2s;
-      -o-transition: border-radius 2s; }
+    transition: border-radius 1s ease 0s;
+    -webkit-transition: border-radius 1s ease 0s;
+    -moz-transition: border-radius 1s ease 0s;
+    -o-transition: border-radius 1s ease 0s; }
+  #gallery-glmphotos-light-3 .ngg-gallery-thumbnail .ngg-fancybox:hover .title {
+    border-top-left-radius: 30px;
+    border-top-right-radius: 30px;
+    transition: border-radius 1s ease 0s;
+    -webkit-transition: border-radius 1s ease 0s;
+    -moz-transition: border-radius 1s ease 0s;
+    -o-transition: border-radius 1s ease 0s; }
   #gallery-glmphotos-light-3 .ngg-gallery-thumbnail .ngg-fancybox .image_title {
     display: table;
     height: auto;
@@ -6956,8 +6964,8 @@ h2#block-title {
     display: table-cell;
     vertical-align: middle;
     /*Hover effect - default state*/
+    transition: all 0.5s ease 0s;
     transform: scale(0.2);
-    transition: all 0.25s;
     border-top-left-radius: 4px;
     border-top-right-radius: 4px; }
   #gallery-glmphotos-light-3 .ngg-gallery-thumbnail .ngg-fancybox:hover {
@@ -6972,7 +6980,7 @@ h2#block-title {
   font-family: "Lato"; }
 #gallery-glmphotos-light-3 .photoTitle {
   width: 90%;
-  text-transform: uppercase;
+  text-transform: capitalize;
   padding: 10px 0;
   margin: 8px auto 0; }
   #gallery-glmphotos-light-3 .photoTitle:hover a {
diff --git a/js/app.js b/js/app.js
index 44d92cd..9091171 100644
--- a/js/app.js
+++ b/js/app.js
@@ -32,14 +32,18 @@ $(document).ready(function () {
     });
 
     var c = 0;
-    var statements = ['Impress', 'Work', 'Appeal', 'Last', 'Amaze'];
+    // statement slider code.  
+    var statements = ['Engage', 'Compel', 'Amaze', 'Deliver'];
     slider = $('#statement-slider');
-    i = -1;
-    
+    i = 0;
+    var statement = statements[0];
+    if (slider.text() != statement) {
+        slider.text(statement);
+    }
     var slideshow = setInterval(function(){
-        var val = statements[++i] || statements[i=0];
+        statement = statements[++i] || statements[i=0];
         slider.fadeOut(function(){
-            $(this).text(val).fadeIn(1000);
+            $(this).text(statement).fadeIn(1000);
         });
     },3100);
 });
diff --git a/js/custom/pageSetup.js b/js/custom/pageSetup.js
index 2437660..8f13597 100644
--- a/js/custom/pageSetup.js
+++ b/js/custom/pageSetup.js
@@ -23,14 +23,18 @@ $(document).ready(function () {
     });
 
     var c = 0;
-    var statements = ['Impress', 'Work', 'Appeal', 'Last', 'Amaze'];
+    // statement slider code.  
+    var statements = ['Engage', 'Compel', 'Amaze', 'Deliver'];
     slider = $('#statement-slider');
-    i = -1;
-    
+    i = 0;
+    var statement = statements[0];
+    if (slider.text() != statement) {
+        slider.text(statement);
+    }
     var slideshow = setInterval(function(){
-        var val = statements[++i] || statements[i=0];
+        statement = statements[++i] || statements[i=0];
         slider.fadeOut(function(){
-            $(this).text(val).fadeIn(1000);
+            $(this).text(statement).fadeIn(1000);
         });
     },3100);
 });
diff --git a/nggallery/gallery-glmphotos-light-3.php b/nggallery/gallery-glmphotos-light-3.php
index 94a7950..b8fd5b2 100644
--- a/nggallery/gallery-glmphotos-light-3.php
+++ b/nggallery/gallery-glmphotos-light-3.php
@@ -14,12 +14,36 @@ Follow variables are useable :
 ?>
 <?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
 
+
+
 <div id="gallery-glmphotos-light-3" class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
 	<!-- Thumbnails -->
     <?php $i = 0; ?>
         <ul class="gallery small-block-grid-2 medium-block-grid-3 large-block-grid-3">
+
 	<?php foreach ( $images as $image ) : ?>
-        <li>
+            <?php if ($image->pid == 36) { ?>
+            <div style="width: 100%;">
+                <div class='special'>
+                    
+                ~ Sample Circle style ~
+                <hr>
+                    <a class="one" 
+                       href="<?php echo nextgen_esc_url($image->imageURL) ?>"
+                       title="<?php echo esc_attr($image->description) ?>"
+                       data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
+                       data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
+                       data-image-id="<?php echo esc_attr($image->pid); ?>"
+                       data-title="<?php echo esc_attr($image->alttext); ?>"
+                       data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
+                    </a>
+
+                <hr>
+                </div>
+            </div>
+            <?php } ?>
+            
+            <li>
             <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box imgBorderMe" <?php echo $image->style ?> >
 
                 <div class="ngg-gallery-thumbnail" >
@@ -40,14 +64,15 @@ Follow variables are useable :
                         <?php echo $image->size ?> />
 
                         <?php } ?>
-                    <?php
-                    $imageTitle = !preg_match(';is\d{2,}-\d{10,}-\d{5,}$;', $image->alttext) ? $image->alttext: '';
-                    ?>
                         <div class="image_title">
                             <h5 class="title">
-                                <?php if (!$image->hidden) { echo esc_attr($imageTitle); }?>
+                                VIEW PROFILE
                             </h5>
                         </div>
+                        
+                    <?php
+                    $imageTitle = !preg_match(';is\d{2,}-\d{10,}-\d{5,}$;', $image->alttext) ? $image->alttext: '';
+                    ?>
                    <div class="photoTitle" title="<?php echo esc_attr($imageTitle) ?>"> 
                         <a href="<?php echo nextgen_esc_url($image->imageURL) ?>"
                         title="<?php echo esc_attr($image->description) ?>"
@@ -61,93 +86,7 @@ Follow variables are useable :
                         </a>
                     </div>
                 </div>
-                <div class='special'>
-                <a class="one" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                    
-                   <div class="photoTitle" title="<?php echo esc_attr($imageTitle) ?>"> 
-                        <a href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                        title="<?php echo esc_attr($image->description) ?>"
-                        data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                        data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                        data-image-id="<?php echo esc_attr($image->pid); ?>"
-                        data-title="<?php echo esc_attr($image->alttext); ?>"
-                        data-description="<?php echo esc_attr($image->description); ?>"
-                        <?php echo $image->thumbcode ?> >
-                            <?php if (!$image->hidden) { echo esc_attr($imageTitle); }?>
-                        </a>
-                    </div>
-                <a class="three" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="yon" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="rok" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="ryk" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="x7" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="x8" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                <a class="x9" 
-                   href="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   title="<?php echo esc_attr($image->description) ?>"
-                   data-src="<?php echo nextgen_esc_url($image->imageURL) ?>"
-                   data-thumbnail="<?php echo nextgen_esc_url($image->thumbnailURL); ?>"
-                   data-image-id="<?php echo esc_attr($image->pid); ?>"
-                   data-title="<?php echo esc_attr($image->alttext); ?>"
-                   data-description="<?php echo esc_attr($image->description); ?>" style='background-image:url("<?php echo nextgen_esc_url($image->thumbnailURL) ?>");'>
-                </a>
-                </div>
+
             </div>
         </li>
 	<?php if ( $image->hidden ) continue; ?>
diff --git a/parts/statements.php b/parts/statements.php
index f7b698e..a9b5191 100644
--- a/parts/statements.php
+++ b/parts/statements.php
@@ -1,6 +1,6 @@
 <div class="statements">
     <div class="row">
-        <h1 class="text-center">Modern <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Intelligent <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Powerful <br><div id="statement-pre-slider">Websites That </div><div id="statement-slider">Amaze</div></h1>
+        <h1 class="text-center">Modern <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Intelligent <img src="<?php bloginfo('template_url'); ?>/assets/glm-flame-icon.png"> Powerful <br><div id="statement-pre-slider">Websites That </div><div id="statement-slider">Engage</div></h1>
     </div>
     <div class="row medium-uncollapse large-collapse">
         <div class="small-12 columns">
diff --git a/scss/plugins/_nextgen.scss b/scss/plugins/_nextgen.scss
index 937b322..860a46f 100644
--- a/scss/plugins/_nextgen.scss
+++ b/scss/plugins/_nextgen.scss
@@ -5,7 +5,7 @@
     padding: 0 0.625rem 1.25rem;
 }
 .gallery {
-
+    margin: 0 auto;
     .ngg-gallery-thumbnail, 
     .ngg-gallery-thumbnail-box {
         float: none;
@@ -130,10 +130,10 @@
 // gallery-glmphotos-light-3
 #gallery-glmphotos-light-3 {
     .special {
-             
-        a.testone {
-            
-}
+        clear:both;  
+        max-width: 270px;
+        margin: 0 auto;
+        text-align: center;
         a {
             background-position: 50% 50%;
             background-repeat: no-repeat;
@@ -188,14 +188,9 @@
         .x7:hover {border: 1px solid rgba(0, 0, 0, 0.7);}
         .x8:hover {border: 1px dashed rgba(0, 0, 0, 0.7);}
         .x9:hover {border: 1px dotted rgba(0, 0, 0, 0.7);}
-        
-        
-        
-        
     }
     .ngg-gallery-thumbnail-box {
         border: none;
-
     }
     .ngg-gallery-thumbnail {
         background: #fff none repeat scroll 0 0;
@@ -206,33 +201,34 @@
         position: relative;
         margin-bottom: 10px;
         /*Hover states*/
+        transition: all 0.1s ease 0s;
         .ngg-fancybox img {
             opacity: 1.0;
             border-radius: 4px;
+            transition: all 1s ease 0s;
+            -webkit-transition: border-radius 1s ease 0s;
+            -moz-transition: border-radius 1s ease 0s;
+            -o-transition: border-radius 1s ease 0s;
         }
-        &:hover {
-            opacity: 0.75;
+        .ngg-fancybox:hover {
             
-            .ngg-fancybox img {
+            img {
+                opacity: 0.75;
                 border-radius: 30px;
-                -webkit-transition: border-radius 2s;
-                -moz-transition: border-radius 2s;
-                -o-transition: border-radius 2s;
+                transition: all 0.5s ease 0s;
+                transition: border-radius 1s ease 0s;
+                -webkit-transition: border-radius 1s ease 0s;
+                -moz-transition: border-radius 1s ease 0s;
+                -o-transition: border-radius 1s ease 0s;
             }
-            
-            .ngg-fancybox .title {
+            .title   {
                 border-top-left-radius: 30px;
                 border-top-right-radius: 30px;
-                -webkit-transition: border-radius 2s;
-                -moz-transition: border-radius 2s;
-                -o-transition: border-radius 2s;
+                transition: border-radius 1s ease 0s;
+                -webkit-transition: border-radius 1s ease 0s;
+                -moz-transition: border-radius 1s ease 0s;
+                -o-transition: border-radius 1s ease 0s;
             }
-            transition: all 0.5s ease 0s;
-            transform: scale(1.025);
-            -webkit-transform: scale(1.025);
-            -moz-transform: scale(1.025);
-            -o-transform: scale(1.025);
-                border-radius: 30px;
         }
         .ngg-fancybox .image_title {
             display: table;
@@ -279,8 +275,8 @@
             display: table-cell;
             vertical-align: middle;
             /*Hover effect - default state*/
+            transition: all 0.5s ease 0s;
             transform: scale(0.2);
-            transition: all 0.25s;    
             border-top-left-radius: 4px;
             border-top-right-radius: 4px;
         }
@@ -302,8 +298,7 @@
     }
     .photoTitle {
         width: 90%;
-        
-        text-transform: uppercase;
+        text-transform: capitalize;
         padding: 10px 0;
         margin: 8px auto 0;
         &:hover {
-- 
2.17.1