diff --git a/css/normalize.css b/css/normalize.css
index 77feb20..9a48c1d 100755
--- a/css/normalize.css
+++ b/css/normalize.css
@@ -1 +1,166 @@
-article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
\ No newline at end of file
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+video {
+  display: inline-block;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden] {
+  display: none;
+}
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+a:focus {
+  outline: thin dotted;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, serif;
+  font-size: 1em;
+}
+pre {
+  white-space: pre-wrap;
+}
+q {
+  quotes: "\201C""\201D""\2018""\2019";
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 0;
+}
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+legend {
+  border: 0;
+  padding: 0;
+}
+button,
+input,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  margin: 0;
+}
+button,
+input {
+  line-height: normal;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button;
+  cursor: pointer;
+}
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+}
+input[type="search"] {
+  -webkit-appearance: textfield;
+  -moz-box-sizing: content-box;
+  -webkit-box-sizing: content-box;
+  box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+textarea {
+  overflow: auto;
+  vertical-align: top;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
diff --git a/css/set1.css b/css/set1.css
index 58a0f19..3fd6187 100644
--- a/css/set1.css
+++ b/css/set1.css
@@ -1,96 +1,169 @@
 /* *, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; } // required */
 @font-face {
-	font-weight: normal;
-	font-style: normal;
-	font-family: 'feathericons';
-	src:url('../fonts/feathericons/feathericons.eot?-8is7zf');
-	src:url('../fonts/feathericons/feathericons.eot?#iefix-8is7zf') format('embedded-opentype'),
-		url('../fonts/feathericons/feathericons.woff?-8is7zf') format('woff'),
-		url('../fonts/feathericons/feathericons.ttf?-8is7zf') format('truetype'),
-		url('../fonts/feathericons/feathericons.svg?-8is7zf#feathericons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-family: "feathericons";
+  src: url("../fonts/feathericons/feathericons.eot?-8is7zf");
+  src: url("../fonts/feathericons/feathericons.eot?#iefix-8is7zf")
+      format("embedded-opentype"),
+    url("../fonts/feathericons/feathericons.woff?-8is7zf") format("woff"),
+    url("../fonts/feathericons/feathericons.ttf?-8is7zf") format("truetype"),
+    url("../fonts/feathericons/feathericons.svg?-8is7zf#feathericons")
+      format("svg");
 }
 
 .grid {
-	position: relative;
-	margin: 0 auto;
-	padding: 1em 0 4em;
-	max-width: 1000px;
-	list-style: none;
-	text-align: center;
+  position: relative;
+  margin: 0 auto;
+  padding: 1em 0 4em;
+  max-width: 1000px;
+  list-style: none;
+  text-align: center;
 }
 
 /* Common style */
 .grid figure {
-	position: relative;
-	float: left;
-	overflow: hidden;
-	margin: 10px 1%;
-	min-width: 320px;
-	max-width: 480px;
-	max-height: 360px;
-	width: 48%;
-	background: #3085a3;
-	text-align: center;
-	cursor: pointer;
+  position: relative;
+  float: left;
+  overflow: hidden;
+  margin: 10px 1%;
+  min-width: 320px;
+  max-width: 480px;
+  max-height: 360px;
+  width: 48%;
+  background: #3085a3;
+  text-align: center;
+  cursor: pointer;
 }
 
 .grid figure img {
-	position: relative;
-	display: block;
-	min-height: 100%;
-	max-width: 100%;
-	opacity: 0.8;
+  position: relative;
+  display: block;
+  min-height: 100%;
+  max-width: 100%;
+  opacity: 0.8;
 }
 
 .grid figure figcaption {
-	padding: 2em;
-	color: #fff;
-	text-transform: uppercase;
-	font-size: 1.25em;
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
+  padding: 2em;
+  color: #fff;
+  text-transform: uppercase;
+  font-size: 1.25em;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 .grid figure figcaption::before,
 .grid figure figcaption::after {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 .grid figure figcaption,
 .grid figure figcaption > a {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
 }
 
 /* Anchor will cover the whole item by default */
 .grid figure figcaption > a {
-	z-index: 1000;
-	text-indent: 200%;
-	white-space: nowrap;
-	font-size: 0;
-	opacity: 0;
+  z-index: 1000;
+  text-indent: 200%;
+  white-space: nowrap;
+  font-size: 0;
+  opacity: 0;
 }
 
 .grid figure h2 {
-	word-spacing: -0.15em;
-	font-weight: 300;
+  word-spacing: -0.15em;
+  font-weight: 300;
 }
 
 .grid figure h2 span {
-	font-weight: 800;
+  font-weight: 800;
 }
 
 .grid figure h2,
 .grid figure p {
-	margin: 0;
+  margin: 0;
 }
 
 .grid figure p {
-	letter-spacing: 1px;
-	font-size: 68.5%;
+  letter-spacing: 1px;
+  font-size: 68.5%;
+}
+
+/* Individual effects */
+
+/*---------------*/
+/***** Rosy *****/
+/*---------------*/
+
+figure.effect-rosy img {
+  max-width: none;
+  width: -webkit-calc(100% + 10px);
+  width: calc(100% + 50px);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-40px, 0, 0);
+  transform: translate3d(-40px, 0, 0);
+  outline: 2px dashed white;
+  outline-offset: -20px;
+}
+
+figure.effect-rosy figcaption {
+  text-align: left;
+}
+
+figure.effect-rosy figcaption > div {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 2em;
+  width: 100%;
+  height: 50%;
+}
+
+figure.effect-rosy h2,
+figure.effect-rosy p {
+  -webkit-transform: translate3d(0, 40px, 0);
+  transform: translate3d(0, 40px, 0);
+}
+
+figure.effect-rosy h2 {
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+}
+
+figure.effect-rosy p {
+  color: rgba(255, 255, 255, 0.8);
+  -webkit-transform: translate3d(100px, 40px, 0);
+  transform: translate3d(100px, 40px, 0);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
+  transition: opacity 0.2s, transform 0.35s;
+}
+
+figure.effect-rosy:hover img,
+figure.effect-rosy:hover p {
+  opacity: 1;
+}
+
+figure.effect-rosy:hover img,
+figure.effect-rosy:hover h2,
+figure.effect-rosy:hover p {
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+}
+
+figure.effect-rosy:hover p {
+  -webkit-transition-delay: 0.05s;
+  transition-delay: 0.05s;
+  -webkit-transition-duration: 0.35s;
+  transition-duration: 0.35s;
 }
 
 /* Individual effects */
@@ -100,64 +173,64 @@
 /*---------------*/
 
 figure.effect-lily img {
-	max-width: none;
-	width: -webkit-calc(100% + 50px);
-	width: calc(100% + 50px);
-	opacity: 0.7;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-40px,0, 0);
-	transform: translate3d(-40px,0,0);
+  max-width: none;
+  width: -webkit-calc(100% + 50px);
+  width: calc(100% + 50px);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-40px, 0, 0);
+  transform: translate3d(-40px, 0, 0);
 }
 
 figure.effect-lily figcaption {
-	text-align: left;
+  text-align: left;
 }
 
 figure.effect-lily figcaption > div {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	padding: 2em;
-	width: 100%;
-	height: 50%;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 2em;
+  width: 100%;
+  height: 50%;
 }
 
 figure.effect-lily h2,
 figure.effect-lily p {
-	-webkit-transform: translate3d(0,40px,0);
-	transform: translate3d(0,40px,0);
+  -webkit-transform: translate3d(0, 40px, 0);
+  transform: translate3d(0, 40px, 0);
 }
 
 figure.effect-lily h2 {
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
 }
 
 figure.effect-lily p {
-	color: rgba(255,255,255,0.8);
-	opacity: 0;
-	-webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
-	transition: opacity 0.2s, transform 0.35s;
+  color: rgba(255, 255, 255, 0.8);
+  opacity: 0;
+  -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
+  transition: opacity 0.2s, transform 0.35s;
 }
 
 figure.effect-lily:hover img,
 figure.effect-lily:hover p {
-	opacity: 1;
+  opacity: 1;
 }
 
 figure.effect-lily:hover img,
 figure.effect-lily:hover h2,
 figure.effect-lily:hover p {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-lily:hover p {
-	-webkit-transition-delay: 0.05s;
-	transition-delay: 0.05s;
-	-webkit-transition-duration: 0.35s;
-	transition-duration: 0.35s;
+  -webkit-transition-delay: 0.05s;
+  transition-delay: 0.05s;
+  -webkit-transition-duration: 0.35s;
+  transition-duration: 0.35s;
 }
 
 /*---------------*/
@@ -165,59 +238,67 @@ figure.effect-lily:hover p {
 /*---------------*/
 
 figure.effect-sadie figcaption::before {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
-	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
-	content: '';
-	opacity: 0;
-	-webkit-transform: translate3d(0,50%,0);
-	transform: translate3d(0,50%,0);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: -webkit-linear-gradient(
+    top,
+    rgba(72, 76, 97, 0) 0%,
+    rgba(72, 76, 97, 0.8) 75%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(72, 76, 97, 0) 0%,
+    rgba(72, 76, 97, 0.8) 75%
+  );
+  content: "";
+  opacity: 0;
+  -webkit-transform: translate3d(0, 50%, 0);
+  transform: translate3d(0, 50%, 0);
 }
 
 figure.effect-sadie h2 {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	width: 100%;
-	color: #484c61;
-	-webkit-transition: -webkit-transform 0.35s, color 0.35s;
-	transition: transform 0.35s, color 0.35s;
-	-webkit-transform: translate3d(0,-50%,0);
-	transform: translate3d(0,-50%,0);
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  color: #484c61;
+  -webkit-transition: -webkit-transform 0.35s, color 0.35s;
+  transition: transform 0.35s, color 0.35s;
+  -webkit-transform: translate3d(0, -50%, 0);
+  transform: translate3d(0, -50%, 0);
 }
 
 figure.effect-sadie figcaption::before,
 figure.effect-sadie p {
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
 }
 
 figure.effect-sadie p {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	padding: 2em;
-	width: 100%;
-	opacity: 0;
-	-webkit-transform: translate3d(0,10px,0);
-	transform: translate3d(0,10px,0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 2em;
+  width: 100%;
+  opacity: 0;
+  -webkit-transform: translate3d(0, 10px, 0);
+  transform: translate3d(0, 10px, 0);
 }
 
 figure.effect-sadie:hover h2 {
-	color: #fff;
-	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
-	transform: translate3d(0,-50%,0) translate3d(0,-40px,0);
+  color: #fff;
+  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
+  transform: translate3d(0, -50%, 0) translate3d(0, -40px, 0);
 }
 
-figure.effect-sadie:hover figcaption::before ,
+figure.effect-sadie:hover figcaption::before,
 figure.effect-sadie:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -225,63 +306,63 @@ figure.effect-sadie:hover p {
 /*---------------*/
 
 figure.effect-roxy {
-	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
-	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);
+  background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
+  background: linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);
 }
 
 figure.effect-roxy img {
-	max-width: none;
-	width: -webkit-calc(100% + 60px);
-	width: calc(100% + 60px);
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-50px,0,0);
-	transform: translate3d(-50px,0,0);
+  max-width: none;
+  width: -webkit-calc(100% + 60px);
+  width: calc(100% + 60px);
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-50px, 0, 0);
+  transform: translate3d(-50px, 0, 0);
 }
 
 figure.effect-roxy figcaption::before {
-	position: absolute;
-	top: 30px;
-	right: 30px;
-	bottom: 30px;
-	left: 30px;
-	border: 1px solid #fff;
-	content: '';
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-20px,0,0);
-	transform: translate3d(-20px,0,0);
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+  border: 1px solid #fff;
+  content: "";
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-20px, 0, 0);
+  transform: translate3d(-20px, 0, 0);
 }
 
 figure.effect-roxy figcaption {
-	padding: 3em;
-	text-align: left;
+  padding: 3em;
+  text-align: left;
 }
 
 figure.effect-roxy h2 {
-	padding: 30% 0 10px 0;
+  padding: 30% 0 10px 0;
 }
 
 figure.effect-roxy p {
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-10px,0,0);
-	transform: translate3d(-10px,0,0);
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
 }
 
 figure.effect-roxy:hover img {
-	opacity: 0.7;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 0.7;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-roxy:hover figcaption::before,
 figure.effect-roxy:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -289,75 +370,75 @@ figure.effect-roxy:hover p {
 /*---------------*/
 
 figure.effect-bubba {
-	background: #9e5406;
+  background: #9e5406;
 }
 
 figure.effect-bubba img {
-	opacity: 0.7;
-	-webkit-transition: opacity 0.35s;
-	transition: opacity 0.35s;
+  opacity: 0.7;
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
 }
 
 figure.effect-bubba:hover img {
-	opacity: 0.4;
+  opacity: 0.4;
 }
 
 figure.effect-bubba figcaption::before,
 figure.effect-bubba figcaption::after {
-	position: absolute;
-	top: 30px;
-	right: 30px;
-	bottom: 30px;
-	left: 30px;
-	content: '';
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+  content: "";
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
 }
 
 figure.effect-bubba figcaption::before {
-	border-top: 1px solid #fff;
-	border-bottom: 1px solid #fff;
-	-webkit-transform: scale(0,1);
-	transform: scale(0,1);
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: scale(0, 1);
+  transform: scale(0, 1);
 }
 
 figure.effect-bubba figcaption::after {
-	border-right: 1px solid #fff;
-	border-left: 1px solid #fff;
-	-webkit-transform: scale(1,0);
-	transform: scale(1,0);
+  border-right: 1px solid #fff;
+  border-left: 1px solid #fff;
+  -webkit-transform: scale(1, 0);
+  transform: scale(1, 0);
 }
 
 figure.effect-bubba h2 {
-	padding-top: 30%;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,-20px,0);
-	transform: translate3d(0,-20px,0);
+  padding-top: 30%;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, -20px, 0);
+  transform: translate3d(0, -20px, 0);
 }
 
 figure.effect-bubba p {
-	padding: 20px 2.5em;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(0,20px,0);
-	transform: translate3d(0,20px,0);
+  padding: 20px 2.5em;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
 }
 
 figure.effect-bubba:hover figcaption::before,
 figure.effect-bubba:hover figcaption::after {
-	opacity: 1;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 figure.effect-bubba:hover h2,
 figure.effect-bubba:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -365,74 +446,74 @@ figure.effect-bubba:hover p {
 /*---------------*/
 
 figure.effect-romeo img {
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: scale3d(1.4,1.4,1);
-	transform: scale3d(1.4,1.4,1);
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: scale3d(1.4, 1.4, 1);
+  transform: scale3d(1.4, 1.4, 1);
 }
 
 figure.effect-romeo:hover img {
-	opacity: 0.6;
-	-webkit-transform: scale3d(1,1,1);
-	transform: translate3d(1,1,1);
+  opacity: 0.6;
+  -webkit-transform: scale3d(1, 1, 1);
+  transform: translate3d(1, 1, 1);
 }
 
 figure.effect-romeo figcaption::before,
 figure.effect-romeo figcaption::after {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	width: 80%;
-	height: 1px;
-	background: #fff;
-	content: '';
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-50%,-50%,0);
-	transform: translate3d(-50%,-50%,0);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 80%;
+  height: 1px;
+  background: #fff;
+  content: "";
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, -50%, 0);
 }
 
 figure.effect-romeo:hover figcaption::before {
-	opacity: 0.5;
-	-webkit-transform: translate3d(-50%,-50%,0) rotate(45deg);
-	transform: translate3d(-50%,-50%,0) rotate(45deg);
+  opacity: 0.5;
+  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
+  transform: translate3d(-50%, -50%, 0) rotate(45deg);
 }
 
 figure.effect-romeo:hover figcaption::after {
-	opacity: 0.5;
-	-webkit-transform: translate3d(-50%,-50%,0) rotate(-45deg);
-	transform: translate3d(-50%,-50%,0) rotate(-45deg);
+  opacity: 0.5;
+  -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg);
+  transform: translate3d(-50%, -50%, 0) rotate(-45deg);
 }
 
 figure.effect-romeo h2,
 figure.effect-romeo p {
-	position: absolute;
-	top: 50%;
-	left: 0;
-	width: 100%;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
 }
 
 figure.effect-romeo h2 {
-	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
-	transform: translate3d(0,-50%,0) translate3d(0,-150%,0);
+  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
+  transform: translate3d(0, -50%, 0) translate3d(0, -150%, 0);
 }
 
 figure.effect-romeo p {
-	padding: 0.25em 2em;
-	-webkit-transform: translate3d(0,-50%,0) translate3d(0,150%,0);
-	transform: translate3d(0,-50%,0) translate3d(0,150%,0);
+  padding: 0.25em 2em;
+  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
+  transform: translate3d(0, -50%, 0) translate3d(0, 150%, 0);
 }
 
 figure.effect-romeo:hover h2 {
-	-webkit-transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
-	transform: translate3d(0,-50%,0) translate3d(0,-100%,0);
+  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
+  transform: translate3d(0, -50%, 0) translate3d(0, -100%, 0);
 }
 
 figure.effect-romeo:hover p {
-	-webkit-transform: translate3d(0,-50%,0) translate3d(0,100%,0);
-	transform: translate3d(0,-50%,0) translate3d(0,100%,0);
+  -webkit-transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
+  transform: translate3d(0, -50%, 0) translate3d(0, 100%, 0);
 }
 
 /*---------------*/
@@ -440,104 +521,104 @@ figure.effect-romeo:hover p {
 /*---------------*/
 
 figure.effect-layla {
-	background: #18a367;
+  background: #18a367;
 }
 
 figure.effect-layla img {
-	height: 390px;
+  height: 390px;
 }
 
 figure.effect-layla figcaption {
-	padding: 3em;
+  padding: 3em;
 }
 
 figure.effect-layla figcaption::before,
 figure.effect-layla figcaption::after {
-	position: absolute;
-	content: '';
-	opacity: 0;
+  position: absolute;
+  content: "";
+  opacity: 0;
 }
 
 figure.effect-layla figcaption::before {
-	top: 50px;
-	right: 30px;
-	bottom: 50px;
-	left: 30px;
-	border-top: 1px solid #fff;
-	border-bottom: 1px solid #fff;
-	-webkit-transform: scale(0,1);
-	transform: scale(0,1);
-	-webkit-transform-origin: 0 0;
-	transform-origin: 0 0;
+  top: 50px;
+  right: 30px;
+  bottom: 50px;
+  left: 30px;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: scale(0, 1);
+  transform: scale(0, 1);
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
 }
 
 figure.effect-layla figcaption::after {
-	top: 30px;
-	right: 50px;
-	bottom: 30px;
-	left: 50px;
-	border-right: 1px solid #fff;
-	border-left: 1px solid #fff;
-	-webkit-transform: scale(1,0);
-	transform: scale(1,0);
-	-webkit-transform-origin: 100% 0;
-	transform-origin: 100% 0;
+  top: 30px;
+  right: 50px;
+  bottom: 30px;
+  left: 50px;
+  border-right: 1px solid #fff;
+  border-left: 1px solid #fff;
+  -webkit-transform: scale(1, 0);
+  transform: scale(1, 0);
+  -webkit-transform-origin: 100% 0;
+  transform-origin: 100% 0;
 }
 
 figure.effect-layla h2 {
-	padding-top: 26%;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
+  padding-top: 26%;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
 }
 
 figure.effect-layla p {
-	padding: 0.5em 2em;
-	text-transform: none;
-	opacity: 0;
-	-webkit-transform: translate3d(0,-10px,0);
-	transform: translate3d(0,-10px,0);
+  padding: 0.5em 2em;
+  text-transform: none;
+  opacity: 0;
+  -webkit-transform: translate3d(0, -10px, 0);
+  transform: translate3d(0, -10px, 0);
 }
 
 figure.effect-layla img,
 figure.effect-layla h2 {
-	-webkit-transform: translate3d(0,-30px,0);
-	transform: translate3d(0,-30px,0);
+  -webkit-transform: translate3d(0, -30px, 0);
+  transform: translate3d(0, -30px, 0);
 }
 
 figure.effect-layla img,
 figure.effect-layla figcaption::before,
 figure.effect-layla figcaption::after,
 figure.effect-layla p {
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
 }
 
 figure.effect-layla:hover img {
-	opacity: 0.7;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 0.7;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-layla:hover figcaption::before,
 figure.effect-layla:hover figcaption::after {
-	opacity: 1;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 figure.effect-layla:hover h2,
 figure.effect-layla:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-layla:hover figcaption::after,
 figure.effect-layla:hover h2,
 figure.effect-layla:hover p,
 figure.effect-layla:hover img {
-	-webkit-transition-delay: 0.15s;
-	transition-delay: 0.15s;
+  -webkit-transition-delay: 0.15s;
+  transition-delay: 0.15s;
 }
 
 /*---------------*/
@@ -545,63 +626,63 @@ figure.effect-layla:hover img {
 /*---------------*/
 
 figure.effect-honey {
-	background: #4a3753;
+  background: #4a3753;
 }
 
 figure.effect-honey img {
-	opacity: 0.9;
-	-webkit-transition: opacity 0.35s;
-	transition: opacity 0.35s;
+  opacity: 0.9;
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
 }
 
 figure.effect-honey:hover img {
-	opacity: 0.5;
+  opacity: 0.5;
 }
 
 figure.effect-honey figcaption::before {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 10px;
-	background: #fff;
-	content: '';
-	-webkit-transform: translate3d(0,10px,0);
-	transform: translate3d(0,10px,0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  background: #fff;
+  content: "";
+  -webkit-transform: translate3d(0, 10px, 0);
+  transform: translate3d(0, 10px, 0);
 }
 
 figure.effect-honey h2 {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	padding: 1em 1.5em;
-	width: 100%;
-	text-align: left;
-	-webkit-transform: translate3d(0,-30px,0);
-	transform: translate3d(0,-30px,0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  padding: 1em 1.5em;
+  width: 100%;
+  text-align: left;
+  -webkit-transform: translate3d(0, -30px, 0);
+  transform: translate3d(0, -30px, 0);
 }
 
 figure.effect-honey h2 i {
-	font-style: normal;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(0,-30px,0);
-	transform: translate3d(0,-30px,0);
+  font-style: normal;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(0, -30px, 0);
+  transform: translate3d(0, -30px, 0);
 }
 
 figure.effect-honey figcaption::before,
 figure.effect-honey h2 {
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
 }
 
 figure.effect-honey:hover figcaption::before,
 figure.effect-honey:hover h2,
 figure.effect-honey:hover h2 i {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -609,68 +690,73 @@ figure.effect-honey:hover h2 i {
 /*---------------*/
 
 figure.effect-oscar {
-	background: -webkit-linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
-	background: linear-gradient(45deg, #22682a 0%,#9b4a1b 40%,#3a342a 100%);
+  background: -webkit-linear-gradient(
+    45deg,
+    #22682a 0%,
+    #9b4a1b 40%,
+    #3a342a 100%
+  );
+  background: linear-gradient(45deg, #22682a 0%, #9b4a1b 40%, #3a342a 100%);
 }
 
 figure.effect-oscar img {
-	opacity: 0.9;
-	-webkit-transition: opacity 0.35s;
-	transition: opacity 0.35s;
+  opacity: 0.9;
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
 }
 
 figure.effect-oscar figcaption {
-	padding: 3em;
-	background-color: rgba(58,52,42,0.7);
-	-webkit-transition: background-color 0.35s;
-	transition: background-color 0.35s;
+  padding: 3em;
+  background-color: rgba(58, 52, 42, 0.7);
+  -webkit-transition: background-color 0.35s;
+  transition: background-color 0.35s;
 }
 
 figure.effect-oscar figcaption::before {
-	position: absolute;
-	top: 30px;
-	right: 30px;
-	bottom: 30px;
-	left: 30px;
-	border: 1px solid #fff;
-	content: '';
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+  border: 1px solid #fff;
+  content: "";
 }
 
 figure.effect-oscar h2 {
-	margin: 20% 0 10px 0;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,100%,0);
-	transform: translate3d(0,100%,0);
+  margin: 20% 0 10px 0;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
 }
 
 figure.effect-oscar figcaption::before,
 figure.effect-oscar p {
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: scale(0);
-	transform: scale(0);
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: scale(0);
+  transform: scale(0);
 }
 
 figure.effect-oscar:hover h2 {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-oscar:hover figcaption::before,
 figure.effect-oscar:hover p {
-	opacity: 1;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 figure.effect-oscar:hover figcaption {
-	background-color: rgba(58,52,42,0);
+  background-color: rgba(58, 52, 42, 0);
 }
 
 figure.effect-oscar:hover img {
-	opacity: 0.4;
+  opacity: 0.4;
 }
 
 /*---------------*/
@@ -678,62 +764,61 @@ figure.effect-oscar:hover img {
 /*---------------*/
 
 figure.effect-marley figcaption {
-	text-align: right;
+  text-align: right;
 }
 
 figure.effect-marley h2,
 figure.effect-marley p {
-	position: absolute;
-	right: 30px;
-	left: 30px;
-	padding: 10px 0;
+  position: absolute;
+  right: 30px;
+  left: 30px;
+  padding: 10px 0;
 }
 
-
 figure.effect-marley p {
-	bottom: 30px;
-	line-height: 1.5;
-	-webkit-transform: translate3d(0,100%,0);
-	transform: translate3d(0,100%,0);
+  bottom: 30px;
+  line-height: 1.5;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
 }
 
 figure.effect-marley h2 {
-	top: 30px;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,20px,0);
-	transform: translate3d(0,20px,0);
+  top: 30px;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
 }
 
 figure.effect-marley:hover h2 {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-marley h2::after {
-	position: absolute;
-	top: 100%;
-	left: 0;
-	width: 100%;
-	height: 4px;
-	background: #fff;
-	content: '';
-	-webkit-transform: translate3d(0,40px,0);
-	transform: translate3d(0,40px,0);
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 100%;
+  height: 4px;
+  background: #fff;
+  content: "";
+  -webkit-transform: translate3d(0, 40px, 0);
+  transform: translate3d(0, 40px, 0);
 }
 
 figure.effect-marley h2::after,
 figure.effect-marley p {
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
 }
 
 figure.effect-marley:hover h2::after,
 figure.effect-marley:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -741,51 +826,51 @@ figure.effect-marley:hover p {
 /*---------------*/
 
 figure.effect-ruby {
-	background-color: #17819c;
+  background-color: #17819c;
 }
 
 figure.effect-ruby img {
-	opacity: 0.7;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: scale(1.15);
-	transform: scale(1.15);
+  opacity: 0.7;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: scale(1.15);
+  transform: scale(1.15);
 }
 
 figure.effect-ruby:hover img {
-	opacity: 0.5;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 0.5;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 figure.effect-ruby h2 {
-	margin-top: 20%;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,20px,0);
-	transform: translate3d(0,20px,0);
+  margin-top: 20%;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, 20px, 0);
+  transform: translate3d(0, 20px, 0);
 }
 
 figure.effect-ruby p {
-	margin: 1em 0 0;
-	padding: 3em;
-	border: 1px solid #fff;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(0,20px,0) scale(1.1);
-	transform: translate3d(0,20px,0) scale(1.1);
-} 
+  margin: 1em 0 0;
+  padding: 3em;
+  border: 1px solid #fff;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(0, 20px, 0) scale(1.1);
+  transform: translate3d(0, 20px, 0) scale(1.1);
+}
 
 figure.effect-ruby:hover h2 {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-ruby:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0) scale(1);
-	transform: translate3d(0,0,0) scale(1);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, 0, 0) scale(1);
 }
 
 /*---------------*/
@@ -793,51 +878,51 @@ figure.effect-ruby:hover p {
 /*---------------*/
 
 figure.effect-milo {
-	background: #2e5d5a;
+  background: #2e5d5a;
 }
 
 figure.effect-milo img {
-	max-width: none;
-	width: -webkit-calc(100% + 60px);
-	width: calc(100% + 60px);
-	opacity: 1;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-30px,0,0) scale(1.12);
-	transform: translate3d(-30px,0,0) scale(1.12);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
+  max-width: none;
+  width: -webkit-calc(100% + 60px);
+  width: calc(100% + 60px);
+  opacity: 1;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-30px, 0, 0) scale(1.12);
+  transform: translate3d(-30px, 0, 0) scale(1.12);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 figure.effect-milo:hover img {
-	opacity: 0.5;
-	-webkit-transform: translate3d(0,0,0) scale(1);
-	transform: translate3d(0,0,0) scale(1);
+  opacity: 0.5;
+  -webkit-transform: translate3d(0, 0, 0) scale(1);
+  transform: translate3d(0, 0, 0) scale(1);
 }
 
 figure.effect-milo h2 {
-	position: absolute;
-	right: 0;
-	bottom: 0;
-	padding: 1em 1.2em;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  padding: 1em 1.2em;
 }
 
 figure.effect-milo p {
-	padding: 0 10px 0 0;
-	width: 50%;
-	border-right: 1px solid #fff;
-	text-align: right;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-40px,0,0);
-	transform: translate3d(-40px,0,0);
+  padding: 0 10px 0 0;
+  width: 50%;
+  border-right: 1px solid #fff;
+  text-align: right;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-40px, 0, 0);
+  transform: translate3d(-40px, 0, 0);
 }
 
 figure.effect-milo:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -845,60 +930,68 @@ figure.effect-milo:hover p {
 /*---------------*/
 
 figure.effect-dexter {
-	background: -webkit-linear-gradient(top, rgba(37,141,200,1) 0%, rgba(104,60,19,1) 100%);
-	background: linear-gradient(to bottom, rgba(37,141,200,1) 0%,rgba(104,60,19,1) 100%); 
+  background: -webkit-linear-gradient(
+    top,
+    rgba(37, 141, 200, 1) 0%,
+    rgba(104, 60, 19, 1) 100%
+  );
+  background: linear-gradient(
+    to bottom,
+    rgba(37, 141, 200, 1) 0%,
+    rgba(104, 60, 19, 1) 100%
+  );
 }
 
 figure.effect-dexter img {
-	-webkit-transition: opacity 0.35s;
-	transition: opacity 0.35s;
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
 }
 
 figure.effect-dexter:hover img {
-	opacity: 0.4;
+  opacity: 0.4;
 }
 
 figure.effect-dexter figcaption::after {
-	position: absolute;
-	right: 30px;
-	bottom: 30px;
-	left: 30px;
-	height: -webkit-calc(50% - 30px);
-	height: calc(50% - 30px);
-	border: 7px solid #fff;
-	content: '';
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,-100%,0);
-	transform: translate3d(0,-100%,0);
+  position: absolute;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+  height: -webkit-calc(50% - 30px);
+  height: calc(50% - 30px);
+  border: 7px solid #fff;
+  content: "";
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, -100%, 0);
+  transform: translate3d(0, -100%, 0);
 }
 
 figure.effect-dexter:hover figcaption::after {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-dexter figcaption {
-	padding: 3em;
-	text-align: left;
+  padding: 3em;
+  text-align: left;
 }
 
 figure.effect-dexter p {
-	position: absolute;
-	right: 60px;
-	bottom: 60px;
-	left: 60px;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(0,-100px,0);
-	transform: translate3d(0,-100px,0);
+  position: absolute;
+  right: 60px;
+  bottom: 60px;
+  left: 60px;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(0, -100px, 0);
+  transform: translate3d(0, -100px, 0);
 }
 
 figure.effect-dexter:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -906,69 +999,69 @@ figure.effect-dexter:hover p {
 /*---------------*/
 
 figure.effect-sarah {
-	background: #42b078;
+  background: #42b078;
 }
 
 figure.effect-sarah img {
-	max-width: none;
-	width: -webkit-calc(100% + 20px);
-	width: calc(100% + 20px);
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(-10px,0,0);
-	transform: translate3d(-10px,0,0);
-	-webkit-backface-visibility: hidden;
-	backface-visibility: hidden;
+  max-width: none;
+  width: -webkit-calc(100% + 20px);
+  width: calc(100% + 20px);
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(-10px, 0, 0);
+  transform: translate3d(-10px, 0, 0);
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 
 figure.effect-sarah:hover img {
-	opacity: 0.4;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 0.4;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-sarah figcaption {
-	text-align: left;
+  text-align: left;
 }
 
 figure.effect-sarah h2 {
-	position: relative;
-	overflow: hidden;
-	padding: 0.5em 0;
+  position: relative;
+  overflow: hidden;
+  padding: 0.5em 0;
 }
 
 figure.effect-sarah h2::after {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 3px;
-	background: #fff;
-	content: '';
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(-100%,0,0);
-	transform: translate3d(-100%,0,0);
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: #fff;
+  content: "";
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(-100%, 0, 0);
+  transform: translate3d(-100%, 0, 0);
 }
 
 figure.effect-sarah:hover h2::after {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-sarah p {
-	padding: 1em 0;
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: translate3d(100%,0,0);
-	transform: translate3d(100%,0,0);
+  padding: 1em 0;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: translate3d(100%, 0, 0);
+  transform: translate3d(100%, 0, 0);
 }
 
 figure.effect-sarah:hover p {
-	opacity: 1;
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  opacity: 1;
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 /*---------------*/
@@ -976,109 +1069,109 @@ figure.effect-sarah:hover p {
 /*---------------*/
 
 figure.effect-zoe figcaption {
-	top: auto;
-	bottom: 0;
-	padding: 1em;
-	height: 3.75em;
-	background: #fff;
-	color: #3c4a50;
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,100%,0);
-	transform: translate3d(0,100%,0);
+  top: auto;
+  bottom: 0;
+  padding: 1em;
+  height: 3.75em;
+  background: #fff;
+  color: #3c4a50;
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, 100%, 0);
+  transform: translate3d(0, 100%, 0);
 }
 
 figure.effect-zoe h2 {
-	float: left;
+  float: left;
 }
 
 figure.effect-zoe p.icon-links a {
-	float: right;
-	color: #3c4a50;
-	font-size: 1.4em;
+  float: right;
+  color: #3c4a50;
+  font-size: 1.4em;
 }
 
 figure.effect-zoe:hover p.icon-links a:hover,
 figure.effect-zoe:hover p.icon-links a:focus {
-	color: #252d31;
+  color: #252d31;
 }
 
 figure.effect-zoe p.description {
-	position: absolute;
-	bottom: 8em;
-	padding: 2em;
-	color: #fff;
-	text-transform: none;
-	font-size: 90%;
-	opacity: 0;
-	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
-	-webkit-transition: opacity 0.35s;
-	transition: opacity 0.35s;
-	-webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
+  position: absolute;
+  bottom: 8em;
+  padding: 2em;
+  color: #fff;
+  text-transform: none;
+  font-size: 90%;
+  opacity: 0;
+  -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
+  -webkit-transition: opacity 0.35s;
+  transition: opacity 0.35s;
+  -webkit-backface-visibility: hidden; /* Fix for Chrome 37.0.2062.120 (Mac) */
 }
 
 figure.effect-zoe h2,
 figure.effect-zoe p.icon-links a {
-	-webkit-transition: -webkit-transform 0.35s;
-	transition: transform 0.35s;
-	-webkit-transform: translate3d(0,200%,0);
-	transform: translate3d(0,200%,0);
+  -webkit-transition: -webkit-transform 0.35s;
+  transition: transform 0.35s;
+  -webkit-transform: translate3d(0, 200%, 0);
+  transform: translate3d(0, 200%, 0);
 }
 
 figure.effect-zoe p.icon-links a span::before {
-	display: inline-block;
-	padding: 8px 10px;
-	font-family: 'feathericons';
-	speak: none;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
+  display: inline-block;
+  padding: 8px 10px;
+  font-family: "feathericons";
+  speak: none;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .icon-eye::before {
-	content: '\e000';
+  content: "\e000";
 }
 
 .icon-paper-clip::before {
-	content: '\e001';
+  content: "\e001";
 }
 
 .icon-heart::before {
-	content: '\e024';
+  content: "\e024";
 }
 
 figure.effect-zoe h2 {
-	display: inline-block;
+  display: inline-block;
 }
 
 figure.effect-zoe:hover p.description {
-	opacity: 1;
+  opacity: 1;
 }
 
 figure.effect-zoe:hover figcaption,
 figure.effect-zoe:hover h2,
 figure.effect-zoe:hover p.icon-links a {
-	-webkit-transform: translate3d(0,0,0);
-	transform: translate3d(0,0,0);
+  -webkit-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
 }
 
 figure.effect-zoe:hover h2 {
-	-webkit-transition-delay: 0.05s;
-	transition-delay: 0.05s;
+  -webkit-transition-delay: 0.05s;
+  transition-delay: 0.05s;
 }
 
 figure.effect-zoe:hover p.icon-links a:nth-child(3) {
-	-webkit-transition-delay: 0.1s;
-	transition-delay: 0.1s;
+  -webkit-transition-delay: 0.1s;
+  transition-delay: 0.1s;
 }
 
 figure.effect-zoe:hover p.icon-links a:nth-child(2) {
-	-webkit-transition-delay: 0.15s;
-	transition-delay: 0.15s;
+  -webkit-transition-delay: 0.15s;
+  transition-delay: 0.15s;
 }
 
 figure.effect-zoe:hover p.icon-links a:first-child {
-	-webkit-transition-delay: 0.2s;
-	transition-delay: 0.2s;
+  -webkit-transition-delay: 0.2s;
+  transition-delay: 0.2s;
 }
 
 /*---------------*/
@@ -1086,64 +1179,64 @@ figure.effect-zoe:hover p.icon-links a:first-child {
 /*---------------*/
 
 figure.effect-chico img {
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
-	-webkit-transform: scale(1.12);
-	transform: scale(1.12);
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
+  -webkit-transform: scale(1.12);
+  transform: scale(1.12);
 }
 
 figure.effect-chico:hover img {
-	opacity: 0.5;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 0.5;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 figure.effect-chico figcaption {
-	padding: 3em;
+  padding: 3em;
 }
 
 figure.effect-chico figcaption::before {
-	position: absolute;
-	top: 30px;
-	right: 30px;
-	bottom: 30px;
-	left: 30px;
-	border: 1px solid #fff;
-	content: '';
-	-webkit-transform: scale(1.1);
-	transform: scale(1.1);
+  position: absolute;
+  top: 30px;
+  right: 30px;
+  bottom: 30px;
+  left: 30px;
+  border: 1px solid #fff;
+  content: "";
+  -webkit-transform: scale(1.1);
+  transform: scale(1.1);
 }
 
 figure.effect-chico figcaption::before,
 figure.effect-chico p {
-	opacity: 0;
-	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
-	transition: opacity 0.35s, transform 0.35s;
+  opacity: 0;
+  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
+  transition: opacity 0.35s, transform 0.35s;
 }
 
 figure.effect-chico h2 {
-	padding: 20% 0 20px 0;
+  padding: 20% 0 20px 0;
 }
 
 figure.effect-chico p {
-	margin: 0 auto;
-	max-width: 200px;
-	-webkit-transform: scale(1.5);
-	transform: scale(1.5);
+  margin: 0 auto;
+  max-width: 200px;
+  -webkit-transform: scale(1.5);
+  transform: scale(1.5);
 }
 
 figure.effect-chico:hover figcaption::before,
 figure.effect-chico:hover p {
-	opacity: 1;
-	-webkit-transform: scale(1);
-	transform: scale(1);
+  opacity: 1;
+  -webkit-transform: scale(1);
+  transform: scale(1);
 }
 
 @media screen and (max-width: 50em) {
-	.grid figure {
-		display: inline-block;
-		float: none;
-		margin: 10px auto;
-		width: 100%;
-	}
+  .grid figure {
+    display: inline-block;
+    float: none;
+    margin: 10px auto;
+    width: 100%;
+  }
 }
diff --git a/img/rosy-1.jpg b/img/rosy-1.jpg
new file mode 100644
index 0000000..920344e
Binary files /dev/null and b/img/rosy-1.jpg differ
diff --git a/img/rosy-2.jpg b/img/rosy-2.jpg
new file mode 100644
index 0000000..42d53c1
Binary files /dev/null and b/img/rosy-2.jpg differ
diff --git a/index.html b/index.html
index 655ab7b..b421b49 100755
--- a/index.html
+++ b/index.html
@@ -1,356 +1,445 @@
 <!DOCTYPE html>
 <html lang="en" class="no-js">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
-		<meta name="viewport" content="width=device-width, initial-scale=1"> 
-		<title>Hover Effect Ideas | Set 1</title>
-		<meta name="description" content="Hover Effect Ideas: Inspiration for subtle hover effects" />
-		<meta name="keywords" content="hover effect, inspiration, grid, thumbnail, transition, subtle, web design" />
-		<meta name="author" content="Codrops" />
-		<link rel="shortcut icon" href="../favicon.ico">
-		<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,300' rel='stylesheet' type='text/css'>
-		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
-		<link rel="stylesheet" type="text/css" href="css/demo.css" />
-		<link rel="stylesheet" type="text/css" href="css/set1.css" />
-		<!--[if IE]>
-  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
-		<![endif]-->
-	</head>
-	<body>
-		<div class="container">
-			<!-- Top Navigation -->
-			<div class="codrops-top clearfix">
-				<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Tutorials/FourBoxes/"><span>Previous Demo</span></a>
-				<span class="right"><a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19292"><span>Back to the Codrops Article</span></a></span>
-			</div>
-			<header class="codrops-header">
-				<h1>Hover Effect Ideas <span>An inspirational collection of subtle hover effects</span></h1>
-				<nav class="codrops-demos">
-					<a class="current-demo" href="index.html">Set 1</a>
-					<a href="index2.html">Set 2</a>
-				</nav>
-			</header>
-			<div class="content">
-				<h2>Lily</h2>
-				<div class="grid">
-					<figure class="effect-lily">
-						<img src="img/12.jpg" alt="img12"/>
-						<figcaption>
-							<div>
-								<h2>Nice <span>Lily</span></h2>
-								<p>Lily likes to play with crayons and pencils</p>
-							</div>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-lily">
-						<img src="img/1.jpg" alt="img1"/>
-						<figcaption>
-							<div>
-								<h2>Nice <span>Lily</span></h2>
-								<p>Lily likes to play with crayons and pencils</p>
-							</div>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Sadie</h2>
-				<div class="grid">
-					<figure class="effect-sadie">
-						<img src="img/2.jpg" alt="img02"/>
-						<figcaption>
-							<h2>Holy <span>Sadie</span></h2>
-							<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-sadie">
-						<img src="img/14.jpg" alt="img14"/>
-						<figcaption>
-							<h2>Holy <span>Sadie</span></h2>
-							<p>Sadie never took her eyes off me. <br>She had a dark soul.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Honey</h2>
-				<div class="grid">
-					<figure class="effect-honey">
-						<img src="img/4.jpg" alt="img04"/>
-						<figcaption>
-							<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-honey">
-						<img src="img/5.jpg" alt="img05"/>
-						<figcaption>
-							<h2>Dreamy <span>Honey</span> <i>Now</i></h2>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Layla</h2>
-				<div class="grid">
-					<figure class="effect-layla">
-						<img src="img/6.jpg" alt="img06"/>
-						<figcaption>
-							<h2>Crazy <span>Layla</span></h2>
-							<p>When Layla appears, she brings an eternal summer along.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-layla">
-						<img src="img/3.jpg" alt="img03"/>
-						<figcaption>
-							<h2>Crazy <span>Layla</span></h2>
-							<p>When Layla appears, she brings an eternal summer along.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Zoe</h2>
-				<div class="grid">
-					<figure class="effect-zoe">
-						<img src="img/25.jpg" alt="img25"/>
-						<figcaption>
-							<h2>Creative <span>Zoe</span></h2>
-							<p class="icon-links">
-								<a href="#"><span class="icon-heart"></span></a>
-								<a href="#"><span class="icon-eye"></span></a>
-								<a href="#"><span class="icon-paper-clip"></span></a>
-							</p>
-							<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
-						</figcaption>			
-					</figure>
-					<figure class="effect-zoe">
-						<img src="img/26.jpg" alt="img26"/>
-						<figcaption>
-							<h2>Creative <span>Zoe</span></h2>
-							<p class="icon-links">
-								<a href="#"><span class="icon-heart"></span></a>
-								<a href="#"><span class="icon-eye"></span></a>
-								<a href="#"><span class="icon-paper-clip"></span></a>
-							</p>
-							<p class="description">Zoe never had the patience of her sisters. She deliberately punched the bear in his face.</p>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Oscar</h2>
-				<div class="grid">
-					<figure class="effect-oscar">
-						<img src="img/9.jpg" alt="img09"/>
-						<figcaption>
-							<h2>Warm <span>Oscar</span></h2>
-							<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-oscar">
-						<img src="img/10.jpg" alt="img10"/>
-						<figcaption>
-							<h2>Warm <span>Oscar</span></h2>
-							<p>Oscar is a decent man. He used to clean porches with pleasure.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Marley</h2>
-				<div class="grid">
-					<figure class="effect-marley">
-						<img src="img/11.jpg" alt="img11"/>
-						<figcaption>
-							<h2>Sweet <span>Marley</span></h2>
-							<p>Marley tried to convince her but she was not interested.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-marley">
-						<img src="img/12.jpg" alt="img12"/>
-						<figcaption>
-							<h2>Sweet <span>Marley</span></h2>
-							<p>Marley tried to convince her but she was not interested.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Ruby</h2>
-				<div class="grid">
-					<figure class="effect-ruby">
-						<img src="img/13.jpg" alt="img13"/>
-						<figcaption>
-							<h2>Glowing <span>Ruby</span></h2>
-							<p>Ruby did not need any help. Everybody knew that.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-ruby">
-						<img src="img/14.jpg" alt="img14"/>
-						<figcaption>
-							<h2>Glowing <span>Ruby</span></h2>
-							<p>Ruby did not need any help. Everybody knew that.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Roxy</h2>
-				<div class="grid">
-					<figure class="effect-roxy">
-						<img src="img/15.jpg" alt="img15"/>
-						<figcaption>
-							<h2>Charming <span>Roxy</span></h2>
-							<p>Roxy was my best friend. She'd cross any border for me.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-roxy">
-						<img src="img/1.jpg" alt="img01"/>
-						<figcaption>
-							<h2>Charming <span>Roxy</span></h2>
-							<p>Roxy was my best friend. She'd cross any border for me.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Bubba</h2>
-				<div class="grid">
-					<figure class="effect-bubba">
-						<img src="img/2.jpg" alt="img02"/>
-						<figcaption>
-							<h2>Fresh <span>Bubba</span></h2>
-							<p>Bubba likes to appear out of thin air.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-bubba">
-						<img src="img/16.jpg" alt="img16"/>
-						<figcaption>
-							<h2>Fresh <span>Bubba</span></h2>
-							<p>Bubba likes to appear out of thin air.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Romeo</h2>
-				<div class="grid">
-					<figure class="effect-romeo">
-						<img src="img/17.jpg" alt="img17"/>
-						<figcaption>
-							<h2>Wild <span>Romeo</span></h2>
-							<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-romeo">
-						<img src="img/18.jpg" alt="img18"/>
-						<figcaption>
-							<h2>Wild <span>Romeo</span></h2>
-							<p>Romeo never knows what he wants. He seemed to be very cross about something.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Dexter</h2>
-				<div class="grid">
-					<figure class="effect-dexter">
-						<img src="img/19.jpg" alt="img19"/>
-						<figcaption>
-							<h2>Strange <span>Dexter</span></h2>
-							<p>Dexter had his own strange way. You could watch him training ants.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-dexter">
-						<img src="img/12.jpg" alt="img12"/>
-						<figcaption>
-							<h2>Strange <span>Dexter</span></h2>
-							<p>Dexter had his own strange way. You could watch him training ants.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Sarah</h2>
-				<div class="grid">
-					<figure class="effect-sarah">
-						<img src="img/13.jpg" alt="img13"/>
-						<figcaption>
-							<h2>Free <span>Sarah</span></h2>
-							<p>Sarah likes to watch clouds. She's quite depressed.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-sarah">
-						<img src="img/20.jpg" alt="img20"/>
-						<figcaption>
-							<h2>Free <span>Sarah</span></h2>
-							<p>Sarah likes to watch clouds. She's quite depressed.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Chico</h2>
-				<div class="grid">
-					<figure class="effect-chico">
-						<img src="img/15.jpg" alt="img15"/>
-						<figcaption>
-							<h2>Silly <span>Chico</span></h2>
-							<p>Chico's main fear was missing the morning bus.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-chico">
-						<img src="img/4.jpg" alt="img04"/>
-						<figcaption>
-							<h2>Silly <span>Chico</span></h2>
-							<p>Chico's main fear was missing the morning bus.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-				<h2>Milo</h2>
-				<div class="grid">
-					<figure class="effect-milo">
-						<img src="img/11.jpg" alt="img11"/>
-						<figcaption>
-							<h2>Faithful <span>Milo</span></h2>
-							<p>Milo went to the woods. He took a fun ride and never came back.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-					<figure class="effect-milo">
-						<img src="img/3.jpg" alt="img03"/>
-						<figcaption>
-							<h2>Faithful <span>Milo</span></h2>
-							<p>Milo went to the woods. He took a fun ride and never came back.</p>
-							<a href="#">View more</a>
-						</figcaption>			
-					</figure>
-				</div>
-			</div>
-			<nav class="codrops-demos">
-				<a class="current-demo" href="index.html">Set 1</a>
-				<a href="index2.html">Set 2</a>
-			</nav>
-			<!-- Related demos -->
-			<section class="related">
-				<p>Images from <a href="http://unsplash.com/">Unsplash</a>. <a href="https://gumroad.com/l/feather">Feather Icons</a> by Cole Bemis.</p>
-				<p><strong>If you enjoyed this demo you might also like:</strong></p>
-				<a href="http://tympanus.net/Tutorials/CaptionHoverEffects/">
-					<img src="http://tympanus.net/codrops/wp-content/uploads/2013/06/CaptionHoverEffect-300x162.png" />
-					<h3>Caption Hover Effects</h3>
-				</a>
-				<a href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/">
-					<img src="http://tympanus.net/codrops/wp-content/uploads/2014/01/ShapeHoverEffect-300x162.png" />
-					<h3>Shape Hover Effects</h3>
-				</a>
-			</section>
-		</div><!-- /container -->
-		<script>
-			// For Demo purposes only (show hover effect on mobile devices)
-			[].slice.call( document.querySelectorAll('a[href="#"') ).forEach( function(el) {
-				el.addEventListener( 'click', function(ev) { ev.preventDefault(); } );
-			} );
-		</script>
-	</body>
-</html>
\ No newline at end of file
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Hover Effect Ideas | Set 1</title>
+    <meta
+      name="description"
+      content="Hover Effect Ideas: Inspiration for subtle hover effects"
+    />
+    <meta
+      name="keywords"
+      content="hover effect, inspiration, grid, thumbnail, transition, subtle, web design"
+    />
+    <meta name="author" content="Codrops" />
+    <link rel="shortcut icon" href="../favicon.ico" />
+    <link
+      href="http://fonts.googleapis.com/css?family=Raleway:400,800,300"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
+    <link rel="stylesheet" type="text/css" href="css/demo.css" />
+    <link rel="stylesheet" type="text/css" href="css/set1.css" />
+    <!--[if IE]>
+      <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+    <![endif]-->
+  </head>
+  <body>
+    <div class="container">
+      <!-- Top Navigation -->
+      <div class="codrops-top clearfix">
+        <a
+          class="codrops-icon codrops-icon-prev"
+          href="http://tympanus.net/Tutorials/FourBoxes/"
+          ><span>Previous Demo</span></a
+        >
+        <span class="right"
+          ><a
+            class="codrops-icon codrops-icon-drop"
+            href="http://tympanus.net/codrops/?p=19292"
+            ><span>Back to the Codrops Article</span></a
+          ></span
+        >
+      </div>
+      <header class="codrops-header">
+        <h1>
+          Hover Effect Ideas
+          <span>An inspirational collection of subtle hover effects</span>
+        </h1>
+        <nav class="codrops-demos">
+          <a class="current-demo" href="index.html">Set 1</a>
+          <a href="index2.html">Set 2</a>
+        </nav>
+      </header>
+      <div class="content">
+        <h2>Rosy</h2>
+        <div class="grid">
+          <figure class="effect-rosy">
+            <img src="img/rosy-1.jpg" alt="img12" />
+            <figcaption>
+              <div>
+                <h2>Jovial <span>Rosy</span></h2>
+                <p>Rosy is bubbly and loves the world</p>
+              </div>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-rosy">
+            <img src="img/rosy-2.jpg" alt="img1" />
+            <figcaption>
+              <div>
+                <h2>Jovial <span>Rosy</span></h2>
+                <p>Rosy is bubbly and loves the world</p>
+              </div>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Lily</h2>
+        <div class="grid">
+          <figure class="effect-lily">
+            <img src="img/12.jpg" alt="img12" />
+            <figcaption>
+              <div>
+                <h2>Nice <span>Lily</span></h2>
+                <p>Lily likes to play with crayons and pencils</p>
+              </div>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-lily">
+            <img src="img/1.jpg" alt="img1" />
+            <figcaption>
+              <div>
+                <h2>Nice <span>Lily</span></h2>
+                <p>Lily likes to play with crayons and pencils</p>
+              </div>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Sadie</h2>
+        <div class="grid">
+          <figure class="effect-sadie">
+            <img src="img/2.jpg" alt="img02" />
+            <figcaption>
+              <h2>Holy <span>Sadie</span></h2>
+              <p>
+                Sadie never took her eyes off me. <br />She had a dark soul.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-sadie">
+            <img src="img/14.jpg" alt="img14" />
+            <figcaption>
+              <h2>Holy <span>Sadie</span></h2>
+              <p>
+                Sadie never took her eyes off me. <br />She had a dark soul.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Honey</h2>
+        <div class="grid">
+          <figure class="effect-honey">
+            <img src="img/4.jpg" alt="img04" />
+            <figcaption>
+              <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-honey">
+            <img src="img/5.jpg" alt="img05" />
+            <figcaption>
+              <h2>Dreamy <span>Honey</span> <i>Now</i></h2>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Layla</h2>
+        <div class="grid">
+          <figure class="effect-layla">
+            <img src="img/6.jpg" alt="img06" />
+            <figcaption>
+              <h2>Crazy <span>Layla</span></h2>
+              <p>When Layla appears, she brings an eternal summer along.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-layla">
+            <img src="img/3.jpg" alt="img03" />
+            <figcaption>
+              <h2>Crazy <span>Layla</span></h2>
+              <p>When Layla appears, she brings an eternal summer along.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Zoe</h2>
+        <div class="grid">
+          <figure class="effect-zoe">
+            <img src="img/25.jpg" alt="img25" />
+            <figcaption>
+              <h2>Creative <span>Zoe</span></h2>
+              <p class="icon-links">
+                <a href="#"><span class="icon-heart"></span></a>
+                <a href="#"><span class="icon-eye"></span></a>
+                <a href="#"><span class="icon-paper-clip"></span></a>
+              </p>
+              <p class="description">
+                Zoe never had the patience of her sisters. She deliberately
+                punched the bear in his face.
+              </p>
+            </figcaption>
+          </figure>
+          <figure class="effect-zoe">
+            <img src="img/26.jpg" alt="img26" />
+            <figcaption>
+              <h2>Creative <span>Zoe</span></h2>
+              <p class="icon-links">
+                <a href="#"><span class="icon-heart"></span></a>
+                <a href="#"><span class="icon-eye"></span></a>
+                <a href="#"><span class="icon-paper-clip"></span></a>
+              </p>
+              <p class="description">
+                Zoe never had the patience of her sisters. She deliberately
+                punched the bear in his face.
+              </p>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Oscar</h2>
+        <div class="grid">
+          <figure class="effect-oscar">
+            <img src="img/9.jpg" alt="img09" />
+            <figcaption>
+              <h2>Warm <span>Oscar</span></h2>
+              <p>
+                Oscar is a decent man. He used to clean porches with pleasure.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-oscar">
+            <img src="img/10.jpg" alt="img10" />
+            <figcaption>
+              <h2>Warm <span>Oscar</span></h2>
+              <p>
+                Oscar is a decent man. He used to clean porches with pleasure.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Marley</h2>
+        <div class="grid">
+          <figure class="effect-marley">
+            <img src="img/11.jpg" alt="img11" />
+            <figcaption>
+              <h2>Sweet <span>Marley</span></h2>
+              <p>Marley tried to convince her but she was not interested.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-marley">
+            <img src="img/12.jpg" alt="img12" />
+            <figcaption>
+              <h2>Sweet <span>Marley</span></h2>
+              <p>Marley tried to convince her but she was not interested.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Ruby</h2>
+        <div class="grid">
+          <figure class="effect-ruby">
+            <img src="img/13.jpg" alt="img13" />
+            <figcaption>
+              <h2>Glowing <span>Ruby</span></h2>
+              <p>Ruby did not need any help. Everybody knew that.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-ruby">
+            <img src="img/14.jpg" alt="img14" />
+            <figcaption>
+              <h2>Glowing <span>Ruby</span></h2>
+              <p>Ruby did not need any help. Everybody knew that.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Roxy</h2>
+        <div class="grid">
+          <figure class="effect-roxy">
+            <img src="img/15.jpg" alt="img15" />
+            <figcaption>
+              <h2>Charming <span>Roxy</span></h2>
+              <p>Roxy was my best friend. She'd cross any border for me.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-roxy">
+            <img src="img/1.jpg" alt="img01" />
+            <figcaption>
+              <h2>Charming <span>Roxy</span></h2>
+              <p>Roxy was my best friend. She'd cross any border for me.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Bubba</h2>
+        <div class="grid">
+          <figure class="effect-bubba">
+            <img src="img/2.jpg" alt="img02" />
+            <figcaption>
+              <h2>Fresh <span>Bubba</span></h2>
+              <p>Bubba likes to appear out of thin air.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-bubba">
+            <img src="img/16.jpg" alt="img16" />
+            <figcaption>
+              <h2>Fresh <span>Bubba</span></h2>
+              <p>Bubba likes to appear out of thin air.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Romeo</h2>
+        <div class="grid">
+          <figure class="effect-romeo">
+            <img src="img/17.jpg" alt="img17" />
+            <figcaption>
+              <h2>Wild <span>Romeo</span></h2>
+              <p>
+                Romeo never knows what he wants. He seemed to be very cross
+                about something.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-romeo">
+            <img src="img/18.jpg" alt="img18" />
+            <figcaption>
+              <h2>Wild <span>Romeo</span></h2>
+              <p>
+                Romeo never knows what he wants. He seemed to be very cross
+                about something.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Dexter</h2>
+        <div class="grid">
+          <figure class="effect-dexter">
+            <img src="img/19.jpg" alt="img19" />
+            <figcaption>
+              <h2>Strange <span>Dexter</span></h2>
+              <p>
+                Dexter had his own strange way. You could watch him training
+                ants.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-dexter">
+            <img src="img/12.jpg" alt="img12" />
+            <figcaption>
+              <h2>Strange <span>Dexter</span></h2>
+              <p>
+                Dexter had his own strange way. You could watch him training
+                ants.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Sarah</h2>
+        <div class="grid">
+          <figure class="effect-sarah">
+            <img src="img/13.jpg" alt="img13" />
+            <figcaption>
+              <h2>Free <span>Sarah</span></h2>
+              <p>Sarah likes to watch clouds. She's quite depressed.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-sarah">
+            <img src="img/20.jpg" alt="img20" />
+            <figcaption>
+              <h2>Free <span>Sarah</span></h2>
+              <p>Sarah likes to watch clouds. She's quite depressed.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Chico</h2>
+        <div class="grid">
+          <figure class="effect-chico">
+            <img src="img/15.jpg" alt="img15" />
+            <figcaption>
+              <h2>Silly <span>Chico</span></h2>
+              <p>Chico's main fear was missing the morning bus.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-chico">
+            <img src="img/4.jpg" alt="img04" />
+            <figcaption>
+              <h2>Silly <span>Chico</span></h2>
+              <p>Chico's main fear was missing the morning bus.</p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+        <h2>Milo</h2>
+        <div class="grid">
+          <figure class="effect-milo">
+            <img src="img/11.jpg" alt="img11" />
+            <figcaption>
+              <h2>Faithful <span>Milo</span></h2>
+              <p>
+                Milo went to the woods. He took a fun ride and never came back.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+          <figure class="effect-milo">
+            <img src="img/3.jpg" alt="img03" />
+            <figcaption>
+              <h2>Faithful <span>Milo</span></h2>
+              <p>
+                Milo went to the woods. He took a fun ride and never came back.
+              </p>
+              <a href="#">View more</a>
+            </figcaption>
+          </figure>
+        </div>
+      </div>
+      <nav class="codrops-demos">
+        <a class="current-demo" href="index.html">Set 1</a>
+        <a href="index2.html">Set 2</a>
+      </nav>
+      <!-- Related demos -->
+      <section class="related">
+        <p>
+          Images from <a href="http://unsplash.com/">Unsplash</a>.
+          <a href="https://gumroad.com/l/feather">Feather Icons</a> by Cole
+          Bemis.
+        </p>
+        <p><strong>If you enjoyed this demo you might also like:</strong></p>
+        <a href="http://tympanus.net/Tutorials/CaptionHoverEffects/">
+          <img
+            src="http://tympanus.net/codrops/wp-content/uploads/2013/06/CaptionHoverEffect-300x162.png"
+          />
+          <h3>Caption Hover Effects</h3>
+        </a>
+        <a href="http://tympanus.net/Tutorials/ShapeHoverEffectSVG/">
+          <img
+            src="http://tympanus.net/codrops/wp-content/uploads/2014/01/ShapeHoverEffect-300x162.png"
+          />
+          <h3>Shape Hover Effects</h3>
+        </a>
+      </section>
+    </div>
+    <!-- /container -->
+    <script>
+      // For Demo purposes only (show hover effect on mobile devices)
+      [].slice
+        .call(document.querySelectorAll('a[href="#"'))
+        .forEach(function(el) {
+          el.addEventListener("click", function(ev) {
+            ev.preventDefault();
+          });
+        });
+    </script>
+  </body>
+</html>