New nextgen templates, testing hover effects

diff --git a/css/app.css b/css/app.css
index 19689e8..f02a01c 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6724,33 +6724,31 @@ h2#block-title {
       letter-spacing: 0.1em; }
 
 /* NextGen Gallery */
-.ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {
-  float: none !important; }
+[class*="block-grid-"] > li {
+  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%; }
-
-.ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {
-  float: none !important; }
-
-.ngg-album-compact h4 .ngg-album-desc {
-  height: auto !important;
+  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; }
-
-.ngg-album-compact .album-meta-wrapper h4 a {
+.gallery .ngg-album-compact .album-meta-wrapper h4 a {
   font-style: normal; }
-
-.album-meta-wrapper {
+.gallery .album-meta-wrapper {
   display: block;
   height: 54px;
   margin-bottom: 20px; }
-
-.ngg-glmalbums {
+.gallery .ngg-glmalbums {
   margin: 10px 0; }
-
-.ngg-fancybox .image_overlay {
+.gallery .ngg-fancybox .image_overlay {
   cursor: pointer;
   -webkit-transition: background 0.3s linear;
   -moz-transition: background 0.3s linear;
@@ -6761,89 +6759,159 @@ h2#block-title {
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center; }
-
-.ngg-fancybox:hover img {
+.gallery .ngg-fancybox:hover img {
   opacity: 0.3; }
-
-.ngg-fancybox .photoTitle {
-  color: white;
+.gallery .ngg-fancybox .photoTitle {
+  color: #0568b3;
   font-weight: bold;
   max-width: 220px; }
-
-.ngg-fancybox .photoHead {
+.gallery .ngg-fancybox .photoHead {
   color: white;
   font-style: normal;
   text-decoration: none;
   max-width: 220px; }
-
-.ngg-fancybox img {
+.gallery .ngg-fancybox img {
   margin: 0 !important; }
-
-[class*="block-grid-"] > li {
-  display: inline-flex;
-  height: auto;
-  padding: 0 0.625rem 1.25rem; }
-
-[class*="block-grid-"] > li {
-  float: none; }
-
-#homepage_problem_solvers {
+.gallery #homepage_problem_solvers {
   text-align: center; }
-
-.ngg-galleryoverview {
+.gallery .ngg-galleryoverview {
   padding: 20px; }
-
-.ngg-gallery-thumbnail span {
+.gallery .ngg-gallery-thumbnail span {
   max-width: 220px;
   max-height: 75px; }
-
-.ngg-gallery-thumbnail-box {
-  margin: 5px 0 !important;
-  border: 1px solid black;
+.gallery .ngg-gallery-thumbnail-box {
+  border: 1px solid lightgrey;
   border-radius: 4px;
-  color: white;
-  background: #0568b3;
+  color: #0568b3;
+  background: white;
   font-family: times;
   font-size: 18px;
   /*        font-style: italic;*/ }
-
-.image_overlay img {
+.gallery .image_overlay img {
   width: 100%; }
-
-#fancybox-title-inside {
+.gallery #fancybox-title-inside {
   background: #0568b3;
   border-radius: 4px;
   color: white;
   font-family: times;
   font-size: 16px; }
-  #fancybox-title-inside a {
+  .gallery #fancybox-title-inside a {
     text-decoration: underline;
     color: white;
     font-style: italic; }
-
-.ngg-fancybox {
+.gallery .ngg-fancybox {
   margin: 0 !important; }
-
-.ngg-fancybox img {
-  padding: 0 !important;
+.gallery .ngg-fancybox img {
+  padding: 0;
   margin: none auto !important;
   width: 100%;
-  border: 0 !important; }
-
-.slideshowlink {
+  border: 0; }
+.gallery .slideshowlink {
   display: none; }
-
-#fancybox-title {
+.gallery #fancybox-title {
   position: absolute;
   top: 0;
   padding-top: 10px;
   padding-bottom: 5px; }
-  #fancybox-title #fancybox-title-inside {
+  .gallery #fancybox-title #fancybox-title-inside {
     padding: 2px 0; }
-
-#fancybox-outer, #fancybox-left, #fancybox-right {
+.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 .ngg-gallery-thumbnail-box {
+  border: none; }
+#gallery-glmphotos-light-3 ul {
+  line-height: 1.2; }
+#gallery-glmphotos-light-3 ul li a {
+  font-family: "Lato"; }
+#gallery-glmphotos-light-3 .photoTitle {
+  width: 90%;
+  text-transform: uppercase;
+  padding: 10px 0;
+  margin: 8px auto 0; }
+  #gallery-glmphotos-light-3 .photoTitle:hover a {
+    color: #ec6c0b; }
+  #gallery-glmphotos-light-3 .photoTitle a.ngg-fancybox {
+    max-height: 40px;
+    padding: 8px 0;
+    text-align: center; }
+  #gallery-glmphotos-light-3 .photoTitle a:hover {
+    text-decoration: none; }
+  #gallery-glmphotos-light-3 .photoTitle:after, #gallery-glmphotos-light-3 .photoTitle:before {
+    display: block;
+    content: '';
+    border-width: 1px 0;
+    border-color: rgba(5, 104, 179, 0.35);
+    border-style: solid;
+    transform: scaleX(0.0001);
+    transition: transform 250ms ease-in-out; }
+  #gallery-glmphotos-light-3 .photoTitle:hover:before, #gallery-glmphotos-light-3 .photoTitle:hover:after {
+    transform: scaleX(1);
+    border-color: #0568b3; }
+
+/* End styles for specific templates*/
 .gform_wrapper ul li.gfield {
   clear: none !important;
   float: left !important; }

diff --git a/nggallery/gallery-glmphotos-light-3.php b/nggallery/gallery-glmphotos-light-3.php
new file mode 100644 (file)
index 0000000..91f368b
--- /dev/null
+++ b/nggallery/gallery-glmphotos-light-3.php
@@ -0,0 +1,159 @@
+<?php
+/**
+Template Page for the gallery overview
+
+Follow variables are useable :
+
+       $gallery     : Contain all about the gallery
+       $images      : Contain all images, path, title
+       $pagination  : Contain the pagination content
+
+ You can check the content when you insert the tag <?php var_dump($variable) ?>
+ If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
+**/
+?>
+<?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>
+            <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box imgBorderMe" <?php echo $image->style ?> >
+
+                <div class="ngg-gallery-thumbnail" >
+                    <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 ) { ?>
+
+                        <img
+                        title="<?php echo esc_attr($image->alttext) ?>"
+                        alt="<?php echo esc_attr($image->alttext) ?>"
+                        src="<?php echo nextgen_esc_url($image->thumbnailURL) ?>"
+                        <?php echo $image->size ?> />
+
+                        <?php } ?>
+                    <?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) ?>"
+                        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>
+                </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; ?>
+       <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
+       <br style="clear: both" />
+       <?php } ?>
+       <?php endforeach; ?>
+        </ul>
+       <!-- Pagination -->
+       <?php echo $pagination ?>
+</ul>
+</div>
+
+<?php endif; ?>

diff --git a/nggallery/gallery-glmphotos-light-5.php b/nggallery/gallery-glmphotos-light-5.php
new file mode 100644 (file)
index 0000000..3149378
--- /dev/null
+++ b/nggallery/gallery-glmphotos-light-5.php
@@ -0,0 +1,73 @@
+<?php
+/**
+Template Page for the gallery overview
+
+Follow variables are useable :
+
+       $gallery     : Contain all about the gallery
+       $images      : Contain all images, path, title
+       $pagination  : Contain the pagination content
+
+ You can check the content when you insert the tag <?php var_dump($variable) ?>
+ If you would like to show the timestamp of the image ,you can use <?php echo $exif['created_timestamp'] ?>
+**/
+?>
+<?php if (!defined ('ABSPATH')) die ('No direct access allowed'); ?><?php if (!empty ($gallery)) : ?>
+
+<div id="gallery-glmphotos-light-5" class="ngg-galleryoverview" id="<?php echo $gallery->anchor ?>">
+       <!-- Thumbnails -->
+    <?php $i = 0; ?>
+        <ul class="gallery row small-block-grid-3 medium-block-grid-4 large-block-grid-5">
+       <?php foreach ( $images as $image ) : ?>
+        <li>
+            <div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box imgBorderMe" <?php echo $image->style ?> >
+
+                <div class="ngg-gallery-thumbnail" >
+                    <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 ) { ?>
+
+                        <img
+                        title="<?php echo esc_attr($image->alttext) ?>"
+                        alt="<?php echo esc_attr($image->alttext) ?>"
+                        src="<?php echo nextgen_esc_url($image->thumbnailURL) ?>"
+                        <?php echo $image->size ?> />
+
+                        <?php } ?>
+                    <?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) ?>"
+                        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>
+                </div>
+
+            </div>
+        </li>
+       <?php if ( $image->hidden ) continue; ?>
+       <?php if ( $gallery->columns > 0 && ++$i % $gallery->columns == 0 ) { ?>
+       <br style="clear: both" />
+       <?php } ?>
+       <?php endforeach; ?>
+        </ul>
+       <!-- Pagination -->
+       <?php echo $pagination ?>
+</ul>
+</div>
+
+<?php endif; ?>

diff --git a/scss/plugins/_nextgen.scss b/scss/plugins/_nextgen.scss
index 4438c82..e2b1e2e 100644 (file)
--- a/scss/plugins/_nextgen.scss
+++ b/scss/plugins/_nextgen.scss
@@ -1,128 +1,251 @@
 /* NextGen Gallery */
-.ngg-gallery-thumbnail, 
-.ngg-gallery-thumbnail-box {
-    float: none !important;
-}
-.gallery li a img { // without this images will overlap each other at certain widths
-    display: block;
-    width: 100%;
-}
-.ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {
-    float: none !important;
-}
-.ngg-album-compact h4 .ngg-album-desc {
-    height: auto !important;
-    font-family: $font-family-serif;
-    font-weight: 400;
-}
-.ngg-album-compact .album-meta-wrapper h4 a {
-    font-style: normal;
-}
-.album-meta-wrapper {
-    display: block;
-    height: 54px;
-    margin-bottom: 20px;
-}
-.ngg-glmalbums {
-    margin: 10px 0;
-}
 
-.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;
-}
-.ngg-fancybox:hover img {
-    opacity: 0.3;
-}
-.ngg-fancybox .photoTitle {
-    color: white;
-    font-weight: bold;
-    max-width: 220px;
-}
-.ngg-fancybox .photoHead {
-    color: white;
-    font-style: normal;
-    text-decoration: none;
-    max-width: 220px;
-}
-.ngg-fancybox img {
-    margin: 0 !important;
-}
 [class*="block-grid-"] > li {
-    display: inline-flex;
     height: auto;
     padding: 0 0.625rem 1.25rem;
 }
-[class*="block-grid-"] > li {
-    float: none;
-}
+.gallery {
 
-#homepage_problem_solvers {
-    text-align:center;
-}
-.ngg-galleryoverview {
-    padding: 20px;
-}
-.ngg-gallery-thumbnail span {
-    max-width: 220px;
-    max-height: 75px;
-}
-.ngg-gallery-thumbnail-box {
-    margin: 5px 0 !important;
-    border: 1px solid black;
-    border-radius: 4px;
-    color: white;
-    background:#0568b3;
-    font-family: times;
-    font-size: 18px;
-/*        font-style: italic;*/
-}
-.image_overlay img {
-    width: 100%;
-}
-#fancybox-title-inside {
-    background:#0568b3;
-    border-radius: 4px;
-    color: white;
-    font-family: times;
-    font-size: 16px;
-    a {
-        text-decoration: underline;
+    .ngg-gallery-thumbnail, 
+    .ngg-gallery-thumbnail-box {
+        float: none;
+    }
+    li a img { // without this images will overlap each other at certain widths
+        display: block;
+        width: 100%;
+        border-radius: 4px;
+    }
+    .ngg-gallery-thumbnail, .ngg-gallery-thumbnail-box {
+        float: none;
+    }
+    .ngg-album-compact h4 .ngg-album-desc {
+        height: auto;
+        font-family: $font-family-serif;
+        font-weight: 400;
+    }
+    .ngg-album-compact .album-meta-wrapper h4 a {
+        font-style: normal;
+    }
+    .album-meta-wrapper {
+        display: block;
+        height: 54px;
+        margin-bottom: 20px;
+    }
+    .ngg-glmalbums {
+        margin: 10px 0;
+    }
+
+    .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;
+    }
+    .ngg-fancybox:hover img {
+        opacity: 0.3;
+    }
+    .ngg-fancybox .photoTitle {
+        color: $blue;
+        font-weight: bold;
+        max-width: 220px;
+    }
+    .ngg-fancybox .photoHead {
         color: white;
-        font-style: italic;
+        font-style: normal;
+        text-decoration: none;
+        max-width: 220px;
+    }
+    .ngg-fancybox img {
+        margin: 0 !important;
+    }
+    #homepage_problem_solvers {
+        text-align:center;
+    }
+    .ngg-galleryoverview {
+        padding: 20px;
+    }
+    .ngg-gallery-thumbnail span {
+        max-width: 220px;
+        max-height: 75px;
+    }
+    .ngg-gallery-thumbnail-box {
+        border: 1px solid lightgrey;
+        border-radius: 4px;
+        color: $blue;
+        background: white;
+        font-family: times;
+        font-size: 18px;
+    /*        font-style: italic;*/
+    }
+    .image_overlay img {
+        width: 100%;
     }
-}
-.ngg-fancybox {
-    margin: 0 !important;
-}
-.ngg-fancybox img {
-    padding: 0 !important;
-    margin: none auto !important;
-    width: 100%;
-    border: 0 !important;
-}
-.slideshowlink {
-    display:none;
-}
-#fancybox-title {
-    position: absolute;
-    top: 0;
-    padding-top: 10px;
-    padding-bottom: 5px;
     #fancybox-title-inside {
-        padding: 2px 0;
+        background:#0568b3;
+        border-radius: 4px;
+        color: white;
+        font-family: times;
+        font-size: 16px;
+        a {
+            text-decoration: underline;
+            color: white;
+            font-style: italic;
+        }
+    }
+    .ngg-fancybox {
+        margin: 0 !important;
+    }
+    .ngg-fancybox img {
+        padding: 0;
+        margin: none auto !important;
+        width: 100%;
+        border: 0;
+    }
+    .slideshowlink {
+        display:none;
+    }
+    #fancybox-title {
+        position: absolute;
+        top: 0;
+        padding-top: 10px;
+        padding-bottom: 5px;
+        #fancybox-title-inside {
+            padding: 2px 0;
+        }
+    }
+    #fancybox-outer,
+    #fancybox-left,
+    #fancybox-right {
+        padding-top:40px;
+    }
+}
+
+/* Styles for specific templates */
+// gallery-glmphotos-light-3
+#gallery-glmphotos-light-3 {
+    .special {
+             
+        a.testone {
+            
+}
+        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: rgba(0,0,0,0);
+
+            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;
+            
+        }
+        
+        a:hover {
+            border-width: 0;
+            border-color: rgba(0, 0, 0, 0.5);
+        }
+
+        .one{border-style: solid;}
+        .two{border-style: dashed;}
+        .three{border-style: dotted;}
+
+        .yon {border: 50px solid rgba(0, 0, 0, 0.7);}
+        .goo {border: 50px dashed rgba(0, 0, 0, 0.7);}
+        .rok {border: 50px dotted rgba(0, 0, 0, 0.7);}
+        .ryk {border: 50px double rgba(0, 0, 0, 0.7);}
+        .yon:hover{border: 1px solid rgba(0, 0, 0, 0.7);}
+        .goo:hover{border: 1px dashed rgba(0, 0, 0, 0.7);}
+        .rok:hover{border: 1px dotted rgba(0, 0, 0, 0.7);}
+        .ryk:hover{border: 1px double rgba(0, 0, 0, 0.7);}
+
+        .x7, .x8, .x9 {
+            border-radius: 0;
+            -moz-border-radius: 0;
+            -webkit-border-radius: 0;
+        }
+        .x7 {border: 50px solid rgba(0, 0, 0, 0.7);}
+        .x8 {border: 50px dashed rgba(0, 0, 0, 0.7);}
+        .x9 {border: 50px dotted rgba(0, 0, 0, 0.7);}
+        .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;
+
+    }
+    ul {
+        line-height: 1.2;
+    }
+    ul li a {
+        font-family: "Lato";
+    }
+    .photoTitle {
+        width: 90%;
+        
+        text-transform: uppercase;
+        padding: 10px 0;
+        margin: 8px auto 0;
+        &:hover {
+            
+            a {
+                color: #ec6c0b;
+            }
+        }
+        a.ngg-fancybox {
+            max-height: 40px;
+            padding: 8px 0;
+            text-align: center;
+        }
+        a:hover {
+            text-decoration: none;
+        }
+        &:after,
+        &:before {
+            display:block;
+            content: '';
+            border-width: 1px 0;
+            border-color: rgba(5,104,179,.35);
+            border-style: solid;
+            
+            transform: scaleX(0.0001);  
+            transition: transform 250ms ease-in-out;
+        }
+        &:hover:before,
+        &:hover:after {
+            transform: scaleX(1);
+            border-color: rgba(5,104,179,1);
+        }
+    }
+    
+}
+
+// gallery-glmphotos-light-5
+#gallery-glmphotos-light-5 {
+    
 }
-#fancybox-outer,
-#fancybox-left,
-#fancybox-right {
-    padding-top:40px;
-}
\ No newline at end of file
+
+/* End styles for specific templates*/