*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { display: table; content: ''; }
.clearfix:after { clear: both; }


.grid {
	position: relative;
	width:100%;
	margin: 0 auto;
	padding: 0px;
	list-style: none;
	text-align: center;
	font:14px/15px 'Roboto-Regular', sans-serif, Arial;
	color:#ffffff !important;
}

/* Common style */
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	min-height: 300px;
	max-height: 300px;
	width: 100%;
	background: #1b324f;
	text-align: center;
	cursor: pointer;
	margin-bottom:10px;
	padding:10px;
}

.grid figure img {
	height:220px;
	width:auto;
	max-width:100%;
	max-height:220px;
	padding:20px;
	/*position: relative;
    top: 50%;
    -webkit-transform: translateY(40%);
    -ms-transform: translateY(40%);
    transform: translateY(40%);
	margin:auto;*/
	
	position: absolute;
    margin: auto;
    top: 15%;
    left: 0;
    right: 0;
    bottom: 0;
	-moz-box-sizing: border-box; 
	-webkit-box-sizing: border-box; 
	box-sizing: border-box; 
}

.grid figure figcaption {
	padding: 5px;
	color: #fff !important;
	font-size: 1.25em;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
	pointer-events: none;
}

.grid figure figcaption{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font:12px/16px 'Roboto-Regular', sans-serif, Arial;
}

.grid figure figcaption a {
	/*position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;*/
	color:#404043 !important;
	background:#edeef6;
	padding:3px 10px;
	border-radius:10px;
	font:14px/16px 'Roboto-Regular', sans-serif, Arial;
}

.grid figure h2 {
	word-spacing: 0.05em;
	font-weight: 300;
	font:18px/20px 'Roboto-Medium', sans-serif, Arial;
	text-transform: uppercase;
}

.grid figure h2,
.grid figure p {
	margin: 0;
}

.grid figure p {
	letter-spacing: 1px;
}

figure.effect-bubba {
	background: #1b324f;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	border-radius:10px;
	margin-bottom:30px;
	color:#ffffff !important;
}

figure.effect-bubba:hover {
	background:#000;
	border-radius:10px;
	box-shadow:0px 0px 45px #1b324f;
}

.grid figure.effect-bubba h2 {
	word-spacing: 0.05em;
	font-weight: 300;
	font:18px/20px 'Roboto-Medium', sans-serif, Arial;
	text-transform: uppercase;
	color:#FFF !important;
}

figure.effect-bubba img {
	/*opacity: 0.7;*/
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-bubba:hover img {
	opacity: 0.2;
}

figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after {
	position: absolute;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	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-radius:10px;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-bubba figcaption::after {
	border-radius:10px;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-bubba h2 {
	font:18px/20px 'Roboto-Regular', sans-serif, Arial;
	padding-top: 10%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
	color:#FFF !important;
}

figure.effect-bubba p {
	padding: 20px 2.5em 10px;
	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);
	font:14px/15px 'Roboto-Regular', sans-serif, Arial;
	color:#ffffff !important;
}

figure.effect-bubba:hover figcaption::before,
figure.effect-bubba:hover figcaption::after {
	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);
}


/*---------------------------------------------------------------------------------------------------------------------------------------*/

figure.effect-offer {
	background: #6e4127;
	-webkit-transition: all 0.35s;
	transition: all 0.35s;
	border-radius:10px;
	margin-bottom:30px;
	color:#FFF !important;
}

figure.effect-offer:hover {
	background:#000;
	border-radius:10px;
	box-shadow:0px 0px 45px #6e4127;
	color:#FFF !important;
}

.grid figure.offer-bubba h2 {
	word-spacing: 0.05em;
	font-weight: 300;
	font:18px/20px 'Roboto-Medium', sans-serif, Arial;
	text-transform: uppercase;
	color:#FFF !important;
}

figure.effect-offer img {
	height:100%;
	width:auto;
	max-width:100%;
	/*max-height:100%;*/
	padding:15px;
	
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-offer:hover img {
	opacity: 0.2;
}

figure.effect-offer figcaption::before,
figure.effect-offer 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;
}

figure.effect-offer figcaption::before {
	border-radius:10px;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
	-webkit-transform: scale(0,1);
	transform: scale(0,1);
}

figure.effect-offer figcaption::after {
	border-radius:10px;
	border-right: 2px solid #fff;
	border-left: 2px solid #fff;
	-webkit-transform: scale(1,0);
	transform: scale(1,0);
}

figure.effect-offer h2 {
	font:18px/20px 'Roboto-Regular', sans-serif, Arial;
	padding-top: 10%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,-20px,0);
	transform: translate3d(0,-20px,0);
	opacity: 0;
	color:#FFF !important;
}

figure.effect-offer p {
	padding: 20px 2.5em 10px;
	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);
	color:#FFF !important;
}

figure.effect-offer:hover figcaption::before,
figure.effect-offer:hover figcaption::after {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-offer:hover h2,
figure.effect-offer:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

@media screen and (max-width: 50em) {
	
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
	
.grid figure {
	min-height: 320px;
    max-height: 320px;
}
	
figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after,
figure.effect-offer figcaption::before,
figure.effect-offer figcaption::after {
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
}

.grid figure.effect-bubba h2, .grid figure.effect-offer h2 {
	font: 16px/18px 'Roboto-Medium', sans-serif, Arial;
}

figure.effect-bubba p, figure.effect-offer p {
    padding: 15px 2.5em 10px;
    font: 12px/13px 'Roboto-Regular', sans-serif, Arial;
}

	
}

@media only screen and (min-width: 0px) and (max-width: 435px) {
	
	
figure.effect-bubba figcaption::before,
figure.effect-bubba figcaption::after,
figure.effect-offer figcaption::before,
figure.effect-offer figcaption::after {
	top: 10px;
	right: 10px;
	bottom: 10px;
	left: 10px;
}

.grid figure.effect-bubba h2, .grid figure.effect-offer h2 {
	font: 16px/18px 'Roboto-Medium', sans-serif, Arial;
}

figure.effect-bubba p, figure.effect-offer p {
    padding: 15px 2.5em 10px;
    font: 12px/13px 'Roboto-Regular', sans-serif, Arial;
}


}