body.page-template-page-flexible {
	font-family: "Montserrat",Helvetica,Arial;
	background:#000000;
	color:#ffffff;
	font-size:1.0rem;
}

.page-template-page-flexible h1,
.page-template-page-flexible h2,
.page-template-page-flexible h3,
.page-template-page-flexible h4,
.page-template-page-flexible h5,
.page-template-page-flexible h6 {
	color:#ffffff;
}

.light-shade
{
	background:#3b3b3b;
}

.page-template-page-flexible #main
{
	margin-top:110px;

}

.hovereffect {
	width:100%;
	height:100%;
	float:left;
	overflow:hidden;
	position:relative;
	text-align:center;
	cursor:default;
}

.hovereffect .overlay {
	width:100%;
	height:100%;
	position:absolute;
	overflow:hidden;
	top:0;
	left:0;
	opacity:0;
	background-color:rgba(0,0,0,0.1);
	-webkit-transition:all .4s ease-in-out;
	transition:all .4s ease-in-out
}

.hovereffect img {
	display:block;
	position:relative;
	-webkit-transition:all .4s linear;
	transition:all .4s linear;
}

/* large column fit */
.position-prime .hovereffect img
{
	width: 100%;
	height: 44vw;
	object-fit: cover;
	object-position:50% 50%;
}

/* smaller column stacked fit */
.position-secondary .hovereffect img
{
	width: 100%;
	height: 22vw;
	object-fit: cover;
	object-position:50% 50%;
}

/* for non-stacked - halves */
.position-halves .hovereffect img
{
	width: 100%;
	height: 44vw;
	object-fit: cover;
	object-position:50% 90%;
}

/* for non-stacked - thirds */
.position-thirds .hovereffect img
{
	width: 100%;
	height: 33vw;
	object-fit: cover;
	object-position:50% 50%;
}

.position-prime .hovereffect img.mobile,
.position-halves .hovereffect img.mobile,
.position-thirds .hovereffect img.mobile
{
	width: 100%;
	height: 100vw;
	object-fit: cover;
	object-position:50% 90%;
}

.hovereffect h2 {
	text-transform:uppercase;
	color:#fff;
	text-align:center;
	position:relative;
	font-size:17px;
	background:rgba(0,0,0,0.6);
	-webkit-transform:translatey(-100px);
	-ms-transform:translatey(-100px);
	transform:translatey(-100px);
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	padding:10px;
}


.hovereffect .info {
	text-decoration:none;
	display:inline-block;
	width:100%;
	text-align:center;
	color:#fff;
	font-size:1.1rem;
	/* border:1px solid #fff;  */
	background-color:transparent;
	opacity:0;
	filter:alpha(opacity=0);
	-webkit-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
	margin:0px auto 0;
	padding:0 0px 0;
}


.hovereffect .info .heading
{
	font-size:1.8rem;
	font-weight:bold;
}

/* irrelevant - removed the inner link */
.hovereffect a.info:hover
{
	box-shadow:0 0 5px #fff;
}

.hovereffect:hover img.zoom {
	-ms-transform:scale(1.2);
	-webkit-transform:scale(1.2);
	transform:scale(1.2);
}

.hovereffect:hover .overlay {
	opacity:1;
	filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover .info {
	opacity:1;
	filter:alpha(opacity=100);
	-ms-transform:translatey(0);
	-webkit-transform:translatey(0);
	transform:translatey(0);
}

.hovereffect:hover .info {
	-webkit-transition-delay:.2s;
	transition-delay:.2s;
}

.hovereffect .overlay.static,
.hovereffect .overlay.static .info
{
	opacity:1;
}


/* always show on smaller/mobile which usually don't have hover */
/* bootstrap small */
@media only screen and (max-width: 576px)
{
	.page-template-page-flexible #main
	{
		margin-top:180px;

	}

	.hovereffect .overlay {
		opacity:1;
	}

	.hovereffect .info {
		font-size:1rem;
		opacity:1;
	}

	.hovereffect .info .heading
	{
		font-size:1.4rem;
	}

}