/* Common style */

.grid {

	width: 100%;

}



.grid a {

	/*float: left;

	max-width: 250px;*/

	width: 100%;

	/*color: #333;*/

}



/*.grid a:nth-child(odd) {

	margin: 30px 0 -30px 0;

}*/



.grid figure {

	position: relative;

	overflow: hidden;

	margin: 0px !important;

	/*margin: 5px;

	background: #333;*/

}



.grid figure img {

	position: relative;

	display: block;

	width: 100%;

	height: 300px;

	opacity: 0.7;

	-webkit-transition: opacity 0.3s;

	transition: opacity 0.3s;

}



.grid figcaption {

	position: absolute;

	top: 0;

	z-index: 11;

	padding: 5px 10px 10px;

	width: 100%;

	height: 100%;

	text-align: center;

}



.grid figcaption h2 {

	margin: 0 0 20px 0;

	color: #fff;

	text-transform: capitalize;

	letter-spacing: 1px;

	font-weight: 300;

	font-size: 26px;

	-webkit-transition: -webkit-transform 0.3s;

	transition: transform 0.3s;

	font-family: 'Calibri';

}



.grid figcaption p {

	padding: 0 20px;

	color: #fff;

	font-weight: 300;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

	transition: opacity 0.3s, transform 0.3s;

	font-family: 'Calibri';

	font-size: 18px;

}



.grid figcaption h2,

.grid figcaption p {

	-webkit-transform: translateY(50px);

	transform: translateY(50px);

}



/*.grid figure button {

	position: absolute;

	padding: 4px 20px;

	border: none;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: bold;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

	transition: opacity 0.3s, transform 0.3s;

}*/



.btn1, .btn2, .btn3 {

	position: absolute;

	padding: 4px 20px;

	border: none;

	text-transform: uppercase;

	letter-spacing: 1px;

	font-weight: bold;

	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;

	transition: opacity 0.3s, transform 0.3s;

}



.btn1, .btn2, .btn3 {

		-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}



.grid figcaption,

.grid figcaption h2,

.grid figcaption p/*,

.grid figure button*/ {

	-webkit-backface-visibility: hidden;

	backface-visibility: hidden;

}



/* Style for SVG */

.grid svg {

	position: absolute;

	top: -1px; /* fixes rendering issue in FF */

	z-index: 10;

	width: 100%;

	height: 100%;

}



/*.grid svg path {

	fill: #F26522;

}*/



.path1 {

	fill: #F26522;

}

.path2 {

	fill: #8DC63F;

}

.path3 {

	fill: #F26D7D;

}



/* Hover effects */

.grid a:hover figure img {

	opacity: 1;

}



.grid a:hover figcaption h2,

.grid a:hover figcaption p {

	-webkit-transform: translateY(0);

	transform: translateY(0);

}



.grid a:hover figcaption p {

	opacity: 0;

}



/*.demo-2 .grid figure button {

	bottom: 0;

	left: 0;

	padding: 15px;

	width: 100%;

	background: #fff;

	color: #333;

	font-weight: 300;

	-webkit-transform: translateY(100%);

	transform: translateY(100%);

}



.demo-2 .grid a:hover figure button {

	-webkit-transition-timing-function: ease-out;

	transition-timing-function: ease-out;

	-webkit-transform: translateY(0);

	transform: translateY(0);

}*/

.btn1 {

	bottom: 0;

	left: 30%;

	padding: 15px;

	width: 40%;

	background: #2C318D;

	color: #fff;

	font-weight: 300;

	-webkit-transform: translateY(100%);

	transform: translateY(100%);

	opacity: 0.9;

}

.btn2 {

	bottom: 75px;

	left: 30%;

	padding: 15px;

	width: 40%;

	background: #FCBC14;

	color: #fff;

	font-weight: 300;

	-webkit-transform: translateY(250%);

	transform: translateY(250%);

	opacity: 0.9;

}

.btn3 {

	bottom: 150px;

	left: 30%;

	padding: 15px;

	width: 40%;

	background: #00BFF3;

	color: #fff;

	font-weight: 300;

	-webkit-transform: translateY(400%);

	transform: translateY(400%);

	opacity: 0.9;

}



.grid a:hover .btn1,

.grid a:hover .btn2,

.grid a:hover .btn3 {

	-webkit-transition-timing-function: ease-out;

	transition-timing-function: ease-out;

	-webkit-transform: translateY(0);

	transform: translateY(0);

}



.demo-2 .grid figcaption h2, 

.demo-2 .grid figcaption p {

	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1); /* older webkit */

	-webkit-transition-timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);

	timing-function: cubic-bezier(0.250, 0.250, 0.115, 1.445);

}



.demo-2 .grid a:hover figcaption p {

	-webkit-transition-delay: 0s;

	transition-delay: 0s;

	-webkit-transition-duration: 0.1s;

	transition-duration: 0.1s;

}