/*-- gallery --*/
.gallery .col-md-3{ float:left;}
.gallery { padding:35px 0 50px;}
.gallery .stit{ margin-bottom:50px;}
.grid {

	position: relative;

	clear: both;

	margin: 0 auto;

	max-width: 1000px;

	list-style: none;

	text-align: center;

}



/* Common style */

.grid figure {

	position: relative;	

	overflow: hidden;

	margin: 0;

	text-align: center;

	cursor: pointer;

}



.gallery-grid {

    padding: 10px 5px 0px;

}



.grid figure img {

	position: relative;

	width: 100%;

	opacity: 0.8;

	height:auto;

}



.grid figure figcaption {

	padding: 2em;

	color: #fff;

	text-transform: uppercase;

	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,

.grid figure figcaption > a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

}



/* Anchor will cover the whole item by default */

/* For some effects it will show as a button */

.grid figure figcaption > a {

	z-index: 1000;

	text-indent: 200%;

	white-space: nowrap;

	font-size: 0;

	opacity: 0;

}



.grid figure h3 {

    font-weight: 300;

    margin: 0 0 10px 0;

    text-align: left;

    font-size: 22px;
	
	color:#FFFFFF;

    line-height: 36px;

}



.grid figure h2 span {

	font-weight: 800;

}



.grid figure h2,

.grid figure p {

	margin: 0;

}



.grid figure p {

	letter-spacing: 1px;

	font-size: 68.5%;

}

.grid figure h3 span {

    font-weight: 800;

}

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

/***** Roxy *****/

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



figure.effect-roxy {

	background: -webkit-linear-gradient(45deg, #ff89e9 0%, #05abe0 100%);

	background: linear-gradient(45deg, #ff89e9 0%,#05abe0 100%);

}

figure.effect-roxy {

    background: -webkit-linear-gradient(45deg, #CDDC39 0%, #4CAF50 100%);

    background: linear-gradient(45deg, #CDDC39 0%,#4CAF50 100%);

}

figure.effect-roxy {

    background: -webkit-linear-gradient(45deg, #000000 0%, #292222 100%);

    background: linear-gradient(45deg, #000000 0%,#292222 100%);

}

figure.effect-roxy img {

	min-width:113%;

	width: -webkit-calc(100% + 60px);

	width: calc(100% + 60px);

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

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(-50px,0,0);

	transform: translate3d(-50px,0,0);

}



figure.effect-roxy figcaption::before {

	position: absolute;

	top: 30px;

	right: 30px;

	bottom: 30px;

	left: 30px;

	border: 1px solid #fff;

	content: '';

	opacity: 0;

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

	transition: opacity 0.35s, transform 0.35s;

	-webkit-transform: translate3d(-20px,0,0,0);

	transform: translate3d(-20px,0,0,0);

}



figure.effect-roxy figcaption {

    padding: 40px;

    text-align: left;

}



figure.effect-roxy h2 {

	padding: 30% 0 10px 0;

}



figure.effect-roxy p {

    opacity: 0;

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

    transition: opacity 0.35s, transform 0.35s;

    -webkit-transform: translate3d(-10px,0,0);

    transform: translate3d(-10px,0,0);

    line-height: 24px;
	
	color:#FFFFFF;

}



figure.effect-roxy:hover img {

	opacity: 0.7;

	-webkit-transform: translate3d(0,0,0);

	transform: translate3d(0,0,0);

}



figure.effect-roxy:hover figcaption::before,

figure.effect-roxy:hover p {

    opacity: 1;

    -webkit-transform: translate3d(0,0,0);

    transform: translate3d(0,0,0);

    line-height: 24px;

}

/*-- gallery --*/
@media only screen and (max-width: 1279px)  {
figure.effect-roxy h3 span{ display:block;}
}
@media only screen and (max-width: 1080px)  {
.gallery .col-md-3{-ms-flex:0 0 50%;flex:0 0 50%;max-width:50%}

}
@media only screen and (max-width: 568px)  {
.gallery .col-md-3{-ms-flex:0 0 100%;flex:0 0 100%;max-width:100%}

}