.grid {
	max-width: 100%;
	margin: 0 auto;
	list-style: none;
}
.grid li {
	display: inline-block;
	width: 440px;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}
.grid .figure {
	margin: 0;
	position: relative;
}
.grid .figure img {max-width: 100%;	display: block;	position: relative;}
.grid .figcaption {position: absolute;top: 0;z-index:99;left: 0;padding:0;text-align:center;background: #ffc300;color: #ffffff;font-weight:700;}
.grid .figcaption .heading {padding:15px 0}
.grid .figcaption h3 {text-transform:uppercase;	font-weight:500; color: #fff!important;	margin:0; letter-spacing:0.6px;	font-size:14px!important;}
.grid .figcaption span:before {content: 'by ';}
.grid .figcaption a {font-style:normal; text-align: center; padding: 4px 15px 6px; border-radius: 5px; display: inline-block;	/* Permalink - use to edit and share this gradient: /#ffcc33+0,f28e30+100 */
background: #ffcc33; /* Old browsers */
background: -moz-linear-gradient(-45deg, #ffcc33 0%, #f28e30 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #ffcc33 0%, #f28e30 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #ffcc33 0%, #f28e30 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc33', endColorstr='#f28e30', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */color: #000000; margin-top:8px; text-transform:uppercase; font-weight:700; font-size:15px;}

.grid .figcaption a:hover {/* Permalink - use to edit and share this gradient: /#f28e30+0,ffcc33+100 */
background:#f28e30; /* Old browsers */ background:-moz-linear-gradient(-45deg, #f28e30 0%, #ffcc33 100%); /* FF3.6-15 */
background:-webkit-linear-gradient(-45deg, #f28e30 0%, #ffcc33 100%); /* Chrome10-25,Safari5.1-6 */
background:linear-gradient(135deg, #f28e30 0%, #ffcc33 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f28e30', endColorstr='#ffcc33', GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
/* Individual Caption Styles *//* Caption Style 1 */
.cs-style-1 .figcaption {height: 100%; width: 100%; opacity: 0; text-align: center; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s;}

.no-touch .cs-style-1 .figure:hover .figcaption, .cs-style-1 .figure.cs-hover .figcaption {opacity: 1; -webkit-transform: translate(15px, 15px);	-moz-transform: translate(15px, 15px); -ms-transform: translate(15px, 15px); transform: translate(15px, 15px);}
.cs-style-1 .figcaption h3 {margin-top: 70px;}
.cs-style-1 .figcaption span {display: block;}
.cs-style-1 .figcaption a {margin-top: 30px;}
/* Caption Style 2 */
.cs-style-2 .figure img {z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .cs-style-2 .figure:hover img, .cs-style-2 .figure.cs-hover img {-webkit-transform: translateY(-90px); -moz-transform: translateY(-90px);	-ms-transform: translateY(-90px); transform: translateY(-90px);}
.cs-style-2 .figcaption {height: 90px; width: 100%; top: auto;bottom: 0;}
.cs-style-2 .figcaption a {position: absolute; right: 20px; top: 30px;}/* Caption Style 3 */
.cs-style-3 .figure {overflow: hidden;}
.cs-style-3 .figure img {-webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.cs-style-3 .figure:hover img, .cs-style-3 .figure.cs-hover img {-webkit-transform: translateY(-25px); -moz-transform: translateY(-25px);	-ms-transform: translateY(-25px); transform: translateY(-25px);}
.cs-style-3 .figcaption {height: 125px; width: 100%; top: auto; bottom: 0; opacity: 1; -webkit-transform: translateY(53%); -moz-transform: translateY(53%); -ms-transform: translateY(53%); transform: translateY(53%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;	-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s;}
.cs-style-3 .figure:hover .figcaption, .cs-style-3 .figure.cs-hover .figcaption {opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;	-moz-transition: -moz-transform 0.4s, opacity 0.1s;	transition: transform 0.4s, opacity 0.1s;}
.cs-style-3 .figcaption a {}/* Caption Style 4 */
.cs-style-4 li {-webkit-perspective: 1700px; -moz-perspective: 1700px; perspective: 1700px; -webkit-perspective-origin: 0 50%;	-moz-perspective-origin: 0 50%; perspective-origin: 0 50%;}
.cs-style-4 .figure {-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d;}
.cs-style-4 .figure > div {overflow: hidden;}
.cs-style-4 .figure img {-webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .cs-style-4 .figure:hover img, .cs-style-4 .figure.cs-hover img {-webkit-transform: translateX(25%); -moz-transform: translateX(25%);	-ms-transform: translateX(25%); transform: translateX(25%);}
.cs-style-4 .figcaption {height: 100%; width: 50%; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;	backface-visibility: hidden; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: rotateY(-90deg);	-moz-transform: rotateY(-90deg); transform: rotateY(-90deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s;}
.no-touch .cs-style-4 .figure:hover .figcaption, .cs-style-4 .figure.cs-hover .figcaption {opacity: 1; -webkit-transform: rotateY(0deg);	-moz-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s;}
.cs-style-4 .figcaption a {position: absolute; bottom: 20px; right: 20px;}
/* Caption Style 5 */
.cs-style-5 .figure img {z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .cs-style-5 .figure:hover img, .cs-style-5 .figure.cs-hover img {-webkit-transform: scale(0.4); -moz-transform: scale(0.4); -ms-transform: scale(0.4); transform: scale(0.4);}
.cs-style-5 .figcaption {height: 100%; width: 100%; opacity: 0; -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7);	transform: scale(0.7); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.4s, opacity 0.4s; -moz-transition: -moz-transform 0.4s, opacity 0.4s; transition: transform 0.4s, opacity 0.4s;}
.no-touch .cs-style-5 .figure:hover .figcaption, .cs-style-5 .figure.cs-hover .figcaption {-webkit-transform: scale(1); -moz-transform: scale(1);	-ms-transform: scale(1); transform: scale(1); opacity: 1;}
.cs-style-5 .figure a {position: absolute;	bottom: 20px; right: 20px;}

/* Caption Style 6 */
.cs-style-6 .figure img {z-index: 10; -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s;}
.no-touch .cs-style-6 .figure:hover img, .cs-style-6 .figure.cs-hover img {-webkit-transform: translateY(-50px) scale(0.5); -moz-transform: translateY(-50px) scale(0.5); -ms-transform: translateY(-50px) scale(0.5); transform: translateY(-50px) scale(0.5);}
.cs-style-6 .figcaption {height: 100%; width: 100%;}
.cs-style-6 .figcaption h3 {margin-top: 60%;}
.cs-style-6 .figcaption a {position: absolute; bottom: 20px; right: 20px;}

/* Caption Style 7 */
.cs-style-7 li:first-child {z-index: 6;}
.cs-style-7 li:nth-child(2) {z-index: 5;}
.cs-style-7 li:nth-child(3) {z-index: 4;}
.cs-style-7 li:nth-child(4) {z-index: 3;}
.cs-style-7 li:nth-child(5) {z-index: 2;}
.cs-style-7 li:nth-child(6) {z-index: 1;}
.cs-style-7 .figure img {z-index: 10;}
.cs-style-7 .figcaption {height: 100%; width: 100%; opacity: 0; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden;	backface-visibility: hidden; -webkit-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s; -moz-transition: opacity 0.3s, height 0.3s, box-shadow 0.3s; transition: opacity 0.3s, height 0.3s, box-shadow 0.3s; box-shadow: 0 0 0 0px #2c3f52;}
.no-touch .cs-style-7 .figure:hover .figcaption, .cs-style-7 .figure.cs-hover .figcaption {opacity: 1; height: 130%; box-shadow: 0 0 0 10px #2c3f52;}
.cs-style-7 .figcaption h3 {margin-top: 86%;}
.cs-style-7 .figcaption h3, .cs-style-7 .figcaption span, .cs-style-7 .figcaption a {opacity: 0; -webkit-transition: opacity 0s; -moz-transition: opacity 0s; transition: opacity 0s;}
.cs-style-7 .figcaption a {position: absolute; bottom: 20px; right: 20px;}
.no-touch .cs-style-7 .figure:hover .figcaption h3, .no-touch .cs-style-7 .figure:hover .figcaption span, .no-touch .cs-style-7 .figure:hover .figcaption a, .cs-style-7 .figure.cs-hover .figcaption h3, .cs-style-7 .figure.cs-hover .figcaption span, .cs-style-7 .figure.cs-hover .figcaption a {-webkit-transition: opacity 0.3s 0.2s; -moz-transition: opacity 0.3s 0.2s; transition: opacity 0.3s 0.2s; opacity: 1;}