/* Common style */
.grid {
	/*margin: 40px auto 120px;
	max-width: 1000px;
	width: 90%;*/
}

.grid a {
	/*float: left;
	max-width: 250px;
	width: 25%;
	color: #333;*/
}

/*.grid a:nth-child(odd) {
	margin: 30px 0 -30px 0;
}*/

.grid figure {
	position: relative;
	overflow: hidden;
	background: #000;
}

.grid figure img {
	position: relative;
	display: block;
	width: 100%;
	opacity: 0.5;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

.grid figcaption {
	position: absolute;
	top: 0;
	z-index: 11;
	padding: 10px;
	width: 100%;
	height: 100%;
	text-align: center;
}

.grid figcaption h4 {
	margin: 0 0 20px 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 130%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	font-family: 'oswaldbold';
	text-align:center;
}
.grid figcaption h4.fgcptn-ttl {
	margin: 0 0 20px 0;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 300;
	font-size: 130%;
	-webkit-transition: -webkit-transform 0.3s;
	transition: transform 0.3s;
	font-family: 'oswaldbold';
	text-align:center;
}
.grid figcaption img.tipster-badge{
	width:150px;
	margin:0 auto;
	margin-top:130px;
	opacity:1;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
/*.grid figcaption p {
	padding: 0 20px;
	color: #aaa;
	font-weight: 300;
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}*/

.grid figcaption h4/*,
.grid figcaption p*/ {
	-webkit-transform: translateY(50px);
	transform: translateY(50px);
}

.grid figure button.visit {
	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;
}

.grid figcaption,
.grid figcaption h4,
/*.grid figcaption p,*/
.grid figure button.visit {
	-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%;
	left:0;
}

.grid svg path {
	fill: rgba(84,164,31,0.7);
}
.grid svg path.yellow-path {
	fill: rgba(216,193,55,0.7);
}
.grid svg path.blue-path {
	fill: rgba(66,186,239,0.7);
}

figcaption .numberbar{
	position:absolute;
	top: -137px;
	left: 25%;
	text-align: center;
	background: #c30000;
	padding: 10px;
	color: #ff0;
	transition: all .2s linear;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	border:2px solid #F3F83B;
}
figcaption .numberbar:before{
	content:"";
	width:0;
	height:0;
	position:absolute;
	left:-20px;
	top:0;
	border-left:20px solid transparent;
	border-bottom:70px solid #ff0;
}
figcaption .numberbar:after{
	content:"";
	width:0;
	height:0;
	position:absolute;
	right:-20px;
	top:-2px;
	border-bottom:70px solid transparent;
	border-left:20px solid #ff0;
}
figcaption .numberbar p.buyer{
	font-family: 'oswaldbold';
	font-size:1.5em;
}
figcaption .number p.vwstat{
	font-family: 'oswald_regularregular';
	font-size:1em !important;
	margin-top:10px;
}
.grid a:hover figcaption div.numberbar{
	position:absolute;
	top: 137px;
	left: 25%;
}
/* Hover effects */
.grid a:hover figure img {
	opacity: 1;
}

.grid a:hover figcaption h4/*,
.grid a:hover figcaption p*/ {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.grid a:hover figcaption img.tipster-badge{
	width:80px;
	margin:0 auto;
	margin-top:200px;
	opacity:0.8;
}
/*.grid a:hover figcaption p {
	opacity: 0;
}*/

/* Individual styles */
.demo-1 body {
	background: #3498db;
}

.demo-1 .grid figure button.visit,
.demo-3 .grid figure button.visit {
	top: 50%;
	left: 50%;
	border: 3px solid #fff;
	background: transparent;
	color: #fff;
	opacity: 0;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
	transform: translateY(-50%) translateX(-50%) scale(0.25);
}

.demo-1 .grid a:hover figure button.visit,
.demo-3 .grid a:hover figure button.visit {
	opacity: 1;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
	transform: translateY(-50%) translateX(-50%) scale(1);
}

.demo-2 body {
	background: #e74c3c;
}

.demo-2 .grid figcaption h4 {
	color: #e74c3c;
}

.demo-2 .grid figcaption p {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

.demo-2 .grid figure button.visit {
	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.visit {
	-webkit-transition-timing-function: ease-out;
	transition-timing-function: ease-out;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}

.demo-2 .grid figcaption h4, 
.demo-2 .grid figcaption p,
.demo-3 .grid figcaption h4,
.demo-3 .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,
.demo-3 .grid a:hover figcaption p {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
	-webkit-transition-duration: 0.1s;
	transition-duration: 0.1s;
}

.demo-3 body {
	background: #52be7f;
}

.demo-3 .grid figcaption h4 {
	color: #52be7f;
}

.demo-3 .grid a:hover figcaption h4 {
	-webkit-transform: translateY(5px);
	transform: translateY(5px);
}

/* Media Queries */
/* Let's redefine the width of each anchor and the margins */

@media screen and (max-width: 58em) {
	/*.grid a {
		width: 33.333%;
	}

	.grid a:nth-child(odd) {
		margin: 0;
	}

	.grid a:nth-child(3n-1) {
		margin: 30px 0 -30px 0;
	}*/
}

@media screen and (max-width: 45em) {
	/*.grid {
		max-width: 500px;
	}

	.grid a {
		width: 50%;
	}

	.grid a:nth-child(3n-1) {
		margin: 0;
	}

	.grid a:nth-child(even) {
		margin: 30px 0 -30px 0;
	}*/


	.grid figcaption h4 {
		margin-bottom: 0px;
		-webkit-transform: translateY(30px);
		transform: translateY(30px);
	}

	/*.grid figcaption p {
		margin: 0;
		padding: 0 10px;
	}*/
}

@media all and (max-width: 767px) {
	.grid figcaption img.tipster-badge{
		width:90px;
		margin:0 auto;
		margin-top:80px !important;
		opacity:1;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.grid a:hover figcaption img.tipster-badge{
		width:50px;
		margin:0 auto;
		margin-top:130px !important;
		opacity:0.8;
	}
	figcaption .numberbar p.buyer{
		font-family: 'oswaldbold';
		font-size:1.5em;
	}
	.grid a:hover figcaption div.numberbar{
		top: 87px;
		left: 20% !important;
	}
}
@media all and (max-width:768px){
	.grid figcaption img.tipster-badge{
		width:90px;
		margin:0 auto;
		margin-top:150px;
		opacity:1;
		-webkit-transition: all 0.3s ease;
		transition: all 0.3s ease;
	}
	.grid a:hover figcaption div.numberbar{
		top: 87px;
		left: 20%;
	}
}