diff --git a/art/record.html b/art/record.html
index f65fb50..adee413 100644
--- a/art/record.html
+++ b/art/record.html
@@ -12,6 +12,7 @@
 
     <!-- Bootstrap core CSS -->
     <link href="/css/art.css" rel="stylesheet">
+    <link rel="stylesheet" href="/css/custom.css">
     <!--<link href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet">-->
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
@@ -73,128 +74,176 @@
             </div>
 
             <h2 style="background-color: #F8ECC2;">I, Me, Mine - Subject Brainstorm</h2>
-            <img src="/images/art/mindmap.png" width="70%" class="img-rounded" style="border:2px solid #ed8029;">
+            <img src="/images/art/mindmap.png" width="70%" class="img-rounded bordered">
 
             <h2 style="background-color: #F8ECC2;">Photography</h2>
             <div class="row">
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/1.JPG" class="img-rounded">
+                        <a href="/images/art/photos/1.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/1.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/2.JPG" class="img-rounded">
+                        <a href="/images/art/photos/2.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/2.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/3.JPG" class="img-rounded">
+                        <a href="/images/art/photos/3.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/3.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/4.JPG" class="img-rounded">
+                        <a href="/images/art/photos/4.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/4.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/5.JPG" class="img-rounded">
+                        <a href="/images/art/photos/5.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/5.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/6.JPG" class="img-rounded">
+                        <a href="/images/art/photos/6.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/6.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/7.JPG" class="img-rounded">
+                        <a href="/images/art/photos/7.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/7.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/8.JPG" class="img-rounded">
+                        <a href="/images/art/photos/8.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/8.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/9.JPG" class="img-rounded">
+                        <a href="/images/art/photos/9.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/9.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/10.JPG" class="img-rounded">
+                        <a href="/images/art/photos/10.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/10.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/11.JPG" class="img-rounded">
+                        <a href="/images/art/photos/11.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/11.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/12.JPG" class="img-rounded">
+                        <a href="/images/art/photos/12.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/12.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/13.JPG" class="img-rounded">
+                        <a href="/images/art/photos/13.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/13.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/14.JPG" class="img-rounded">
+                        <a href="/images/art/photos/14.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/14.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/15.JPG" class="img-rounded">
+                        <a href="/images/art/photos/15.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/15.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/16.JPG" class="img-rounded">
+                        <a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/17.JPG" class="img-rounded">
+                        <a href="/images/art/photos/16.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/16.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/18.JPG" class="img-rounded">
+                        <a href="/images/art/photos/17.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/17.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/19.JPG" class="img-rounded">
+                        <a href="/images/art/photos/18.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/18.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/20.JPG" class="img-rounded">
+                        <a href="/images/art/photos/19.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/19.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/21.JPG" class="img-rounded">
+                        <a href="/images/art/photos/20.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/20.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/22.JPG" class="img-rounded">
+                        <a href="/images/art/photos/21.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/21.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/23.JPG" class="img-rounded">
+                        <a href="/images/art/photos/22.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/22.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
                 <div class="col-xs-6 col-md-3">
                     <a href="#" class="thumbnail">
-                        <img src="/images/art/photos/24.JPG" class="img-rounded">
+                        <a href="/images/art/photos/23.JPG" alt="..." data-lightbox="photos">
+                            <img src="/images/art/photos/23.JPG" alt="..." class="img-rounded" width="150px">
+                        </a>
                     </a>
                 </div>
             </div>