.grid {
    position: relative;
    clear: both;
    margin: 0 auto;
    padding: 1em 0 4em;
    max-width: 1130px;
    list-style: none;
    text-align: center;
}
@media only screen and(max-width:620px)
{
.grid {
	position: relative;
	clear: both;
	margin: 0 auto;
	padding: 1em 0 4em;
	max-width: 1000px;
	list-style: none;
	text-align: center;
}
}

/* Common style */
.grid figure {
    position: relative;
    float: left;
    overflow: hidden;
    margin: 10px 1%;
          min-width: 314px;
    max-width: 354px;
    max-height: 271px;
    width: 100%;
    height: auto;
    background: #3085a3;
    text-align: center;
    cursor: pointer;
}

@media only screen and(max-width:620px)
{
.grid figure {
	position: relative;
	float: left;
	overflow: hidden;
	margin: 10px 1%;
	        min-width: 336px !important;
    max-width: 354px;
    max-height: 271px;

	width: 48%;
	height: auto;
	background: #3085a3;
	text-align: center;
	cursor: pointer;
}
}

.grid figure img {
	position: relative;
	display: block;
	min-height: 100%;
	max-width: 100%;
	
	opacity: 0.8;
}

.grid figure figcaption {
	padding: 2em;
	color: #fff;
	text-transform: uppercase;
	    border: 3px solid #d6cccc;

	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 h2 {
	word-spacing: -0.15em;
	font-weight: 300;
}

.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%;
}

/* Individual effects */

/*---------------*/
/***** Julia *****/
/*---------------*/

figure.effect-julia {
	background: #2f3238;
}

figure.effect-julia img {
	max-width: none;
	height: 400px;
	-webkit-transition: opacity 1s, -webkit-transform 1s;
	transition: opacity 1s, transform 1s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-julia figcaption {
	text-align: left;
}

figure.effect-julia h2 {
	position: relative;
	padding: 0.5em 0;
}

figure.effect-julia p {
	display: inline-block;
	margin: 0 0 0.25em;
	padding: 0.4em 1em;
	background: rgba(255,255,255,0.9);
	color: #2f3238;
	text-transform: none;
	font-weight: 500;
	font-size: 75%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-360px,0,0);
	transform: translate3d(-360px,0,0);
}

figure.effect-julia p:first-child {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

figure.effect-julia p:nth-of-type(2) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia p:nth-of-type(3) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:first-child {
	-webkit-transition-delay: 0s;
	transition-delay: 0s;
}

figure.effect-julia:hover p:nth-of-type(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-julia:hover p:nth-of-type(3) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-julia:hover img {
	opacity: 0.4;
	-webkit-transform: scale3d(1.1,1.1,1);
	transform: scale3d(1.1,1.1,1);
}

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

/*-----------------*/
/***** Goliath *****/
/*-----------------*/

figure.effect-goliath {
	background: #df4e4e;
}

figure.effect-goliath img,
figure.effect-goliath h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-goliath img {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-goliath h2,
figure.effect-goliath p {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 30px;
}

figure.effect-goliath p {
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-goliath:hover img {
	-webkit-transform: translate3d(0,-80px,0);
	transform: translate3d(0,-80px,0);
}

figure.effect-goliath:hover h2 {
	-webkit-transform: translate3d(0,-100px,0);
	transform: translate3d(0,-100px,0);
}

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

/*-----------------*/
/***** Hera *****/
/*-----------------*/

figure.effect-hera {
	background: #303fa9;
}

figure.effect-hera h2 {
	font-size: 158.75%;
}

figure.effect-hera h2,
figure.effect-hera p {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera figcaption::before {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 200px;
	height: 200px;
	border: 2px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(0,0,1);
	-webkit-transform-origin: 50%;
	transform-origin: 50%;
}

figure.effect-hera p {
	width: 100px;
	text-transform: none;
	font-size: 121%;
	line-height: 2;
}

figure.effect-hera p a {
	color: #fff;
}

figure.effect-hera p a:hover,
figure.effect-hera p a:focus {
	opacity: 0.6;
}

figure.effect-hera p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-hera p a:first-child i {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-hera p a:nth-child(2) i {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

figure.effect-hera p a:nth-child(3) i {
	-webkit-transform: translate3d(-60px,60px,0);
	transform: translate3d(-60px,60px,0);
}

figure.effect-hera p a:nth-child(4) i {
	-webkit-transform: translate3d(60px,60px,0);
	transform: translate3d(60px,60px,0);
}

figure.effect-hera:hover figcaption::before {
	opacity: 1;
	-webkit-transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
	transform: translate3d(-50%,-50%,0) rotate3d(0,0,1,-45deg) scale3d(1,1,1);
}

figure.effect-hera:hover h2 {
	opacity: 0;
	-webkit-transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
	transform: translate3d(-50%,-50%,0) scale3d(0.8,0.8,1);
}

figure.effect-hera:hover p i:empty {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0); /* just because it's stronger than nth-child */
	opacity: 1;
}

/*-----------------*/
/***** Winston *****/
/*-----------------*/

figure.effect-winston {
	background: #162633;
	text-align: left;
}

figure.effect-winston img {
	-webkit-transition: opacity 0.45s;
	transition: opacity 0.45s;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-winston figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.45s, -webkit-transform 0.45s;
	transition: opacity 0.45s, transform 0.45s;
	-webkit-transform: rotate3d(0,0,1,45deg);
	transform: rotate3d(0,0,1,45deg);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}

figure.effect-winston h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-winston p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 7% 0;
}

figure.effect-winston a {
	margin: 0 10px;
	color: #5d504f;
	font-size: 170%;
}

figure.effect-winston a:hover,
figure.effect-winston a:focus {
	color: #cc6055;
}

figure.effect-winston p a i {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,50px,0);
	transform: translate3d(0,50px,0);
}

figure.effect-winston:hover img {
	opacity: 0.6;
}

figure.effect-winston:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-winston:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: rotate3d(0,0,1,20deg);
	transform: rotate3d(0,0,1,20deg);
}

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

figure.effect-winston:hover p a:nth-child(3) i {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-winston:hover p a:nth-child(2) i {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

figure.effect-winston:hover p a:first-child i {
	-webkit-transition-delay: 0.15s;
	transition-delay: 0.15s;
}

/*-----------------*/
/***** Selena *****/
/*-----------------*/

figure.effect-selena {
	background: #fff;
}

figure.effect-selena img {
	opacity: 0.95;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-selena:hover img {
	-webkit-transform: scale3d(0.95,0.95,1);
	transform: scale3d(0.95,0.95,1);
}

figure.effect-selena h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-selena p {
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,90deg);
	transform: perspective(1000px) rotate3d(1,0,0,90deg);
	-webkit-transform-origin: 50% 0%;
	transform-origin: 50% 0%;
}

figure.effect-selena:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-selena:hover p {
	opacity: 1;
	-webkit-transform: perspective(1000px) rotate3d(1,0,0,0);
	transform: perspective(1000px) rotate3d(1,0,0,0);
}

/*-----------------*/
/***** Terry *****/
/*-----------------*/

figure.effect-terry {
	background: #34495e;
}

figure.effect-terry figcaption {
	padding: 1em;
}

figure.effect-terry figcaption::before,
figure.effect-terry figcaption::after {
	position: absolute;
	width: 200%;
	height: 200%;
	border-style: solid;
	border-color: #101010;
	content: '';
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-terry figcaption::before {
	right: 0;
	bottom: 0;
	border-width: 0 70px 60px 0;
	-webkit-transform: translate3d(70px,60px,0);
	transform: translate3d(70px,60px,0);
}

figure.effect-terry figcaption::after {
	top: 0;
	left: 0;
	border-width: 15px 0 0 15px;
	-webkit-transform: translate3d(-15px,-15px,0);
	transform: translate3d(-15px,-15px,0);
}

figure.effect-terry img,
figure.effect-terry p a {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-terry img {
	opacity: 0.85;
}

figure.effect-terry h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0.4em 10px;
	width: 50%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(100%,0,0);
	transform: translate3d(100%,0,0);
}

@media screen and (max-width: 920px) {
	figure.effect-terry h2 {
		padding: 0.75em 10px;
		font-size: 120%;
	}
}

figure.effect-terry p {
	float: right;
	clear: both;
	text-align: left;
	text-transform: none;
	font-size: 111%;
}

figure.effect-terry p a {
	display: block;
	margin-bottom: 1em;
	color: #fff;
	opacity: 0;
	-webkit-transform: translate3d(90px,0,0);
	transform: translate3d(90px,0,0);
}

figure.effect-terry p a:hover,
figure.effect-terry p a:focus {
	color: #f3cf3f;
}

figure.effect-terry:hover figcaption::before,
figure.effect-terry:hover figcaption::after {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover img {
	opacity: 0.6;

}

figure.effect-terry:hover h2,
figure.effect-terry:hover p a {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-terry:hover p a {
	opacity: 1;
}

figure.effect-terry:hover p a:first-child {
	-webkit-transition-delay: 0.025s;
	transition-delay: 0.025s;
}

figure.effect-terry:hover p a:nth-child(2) {
	-webkit-transition-delay: 0.05s;
	transition-delay: 0.05s;
}

figure.effect-terry:hover p a:nth-child(3) {
	-webkit-transition-delay: 0.075s;
	transition-delay: 0.075s;
}

figure.effect-terry:hover p a:nth-child(4) {
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/*-----------------*/
/***** Phoebe *****/
/*-----------------*/

figure.effect-phoebe {
	background: #675983;
}

figure.effect-phoebe img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-phoebe:hover img {
	opacity: 0.6;
}

figure.effect-phoebe figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: url(../img/triangle2.svg) no-repeat center center;
	background-size: 100% 100%;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(5,2.5,1);
	transform: scale3d(5,2.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-phoebe:hover figcaption::before {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-phoebe h2 {
	margin-top: 1em;
	-webkit-transition: transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,40px,0);
	transform: translate3d(0,40px,0);
}

figure.effect-phoebe:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-phoebe p a {
	color: #fff;
	font-size: 140%;
	opacity: 0;
	position: relative;
	display: inline-block;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-phoebe p a:first-child {
	-webkit-transform: translate3d(-60px,-60px,0);
	transform: translate3d(-60px,-60px,0);
}

figure.effect-phoebe p a:nth-child(2) {
	-webkit-transform: translate3d(0,60px,0);
	transform: translate3d(0,60px,0);
}

figure.effect-phoebe p a:nth-child(3) {
	-webkit-transform: translate3d(60px,-60px,0);
	transform: translate3d(60px,-60px,0);
}

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

/*-----------------*/
/***** Apollo *****/
/*-----------------*/

figure.effect-apollo {
	background: #3498db;
}

figure.effect-apollo img {
	opacity: 0.95;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-apollo figcaption::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.5);
	content: '';
	-webkit-transition: -webkit-transform 0.6s;
	transition: transform 0.6s;
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,-100%,0);
}

figure.effect-apollo p {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 3em;
	padding: 0 1em;
	max-width: 150px;
	border-right: 4px solid #fff;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-apollo h2 {
	text-align: left;
}

figure.effect-apollo:hover img {
	opacity: 0.6;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-apollo:hover figcaption::before {
	-webkit-transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
	transform: scale3d(1.9,1.4,1) rotate3d(0,0,1,45deg) translate3d(0,100%,0);
}

figure.effect-apollo:hover p {
	opacity: 1;
	-webkit-transition-delay: 0.1s;
	transition-delay: 0.1s;
}

/*-----------------*/
/***** Kira *****/
/*-----------------*/

figure.effect-kira {
	background: #fff;
	text-align: left;
}

figure.effect-kira img {
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-kira figcaption {
	z-index: 1;
}

figure.effect-kira p {
	padding: 2.25em 0.5em;
	font-weight: 600;	
	font-size: 100%;
	line-height: 1.5;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,-10px,0);
	transform: translate3d(0,-10px,0);
}

figure.effect-kira p a {
	margin: 0 0.5em;
	color: #101010;
}

figure.effect-kira p a:hover,
figure.effect-kira p a:focus {
	opacity: 0.6;
}

figure.effect-kira figcaption::before {
	position: absolute;
	top: 0;
	right: 2em;
	left: 2em;
	z-index: -1;
	height: 3.5em;
	background: #fff;
	content: '';
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,4em,0) scale3d(1,0.023,1) ;
	transform: translate3d(0,4em,0) scale3d(1,0.023,1);
	-webkit-transform-origin: 50% 0;
	transform-origin: 50% 0;
}

figure.effect-kira:hover img {
	opacity: 0.5;
}

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

figure.effect-kira:hover figcaption::before {
	opacity: 0.7;
	-webkit-transform: translate3d(0,5em,0) scale3d(1,1,1) ;
	transform: translate3d(0,5em,0) scale3d(1,1,1);
}

/*-----------------*/
/***** Steve *****/
/*-----------------*/

figure.effect-steve {
	z-index: auto;
	overflow: visible;
	background: #000;
}

figure.effect-steve:before,
figure.effect-steve h2:before {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background: #000;
	content: '';
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-steve:before {
	box-shadow: 0 3px 30px rgba(0,0,0,0.8);
	opacity: 0;
}

figure.effect-steve figcaption {
	z-index: 1;
}

figure.effect-steve img {
	opacity: 1;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: perspective(1000px) translate3d(0,0,0);
	transform: perspective(1000px) translate3d(0,0,0);
}

figure.effect-steve h2,
figure.effect-steve p {
	background: #fff;
	color: #2d434e;
}

figure.effect-steve h2 {
	position: relative;
	margin-top: 2em;
	padding: 0.25em;
}

figure.effect-steve h2:before {
	box-shadow: 0 1px 10px rgba(0,0,0,0.5);
}

figure.effect-steve p {
	margin-top: 1em;
	padding: 0.5em;
	font-weight: 800;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(0.9,0.9,1);
	transform: scale3d(0.9,0.9,1);
}

figure.effect-steve:hover:before {
	opacity: 1;
}

figure.effect-steve:hover img {
	-webkit-transform: perspective(1000px) translate3d(0,0,21px);
	transform: perspective(1000px) translate3d(0,0,21px);
}

figure.effect-steve:hover h2:before {
	opacity: 0;
}

figure.effect-steve:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/*-----------------*/
/***** Moses *****/
/*-----------------*/

figure.effect-moses {
	background: -webkit-linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
	background: linear-gradient(-45deg, #EC65B7 0%,#05E0D8 100%);
}

figure.effect-moses img {
	opacity: 0.85;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-moses h2,
figure.effect-moses p {
	padding: 20px;
	width: 50%;
	height: 50%;
	border: 2px solid #fff;
}

figure.effect-moses h2 {
	padding: 20px;
	width: 50%;
	height: 50%;
	text-align: left;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
}

figure.effect-moses p {
	float: right;
	padding: 20px;
	text-align: right;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(-50%,-50%,0);
	transform: translate3d(-50%,-50%,0);
}

figure.effect-moses:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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

figure.effect-moses:hover img {
	opacity: 0.6;
}

/*---------------*/
/***** Jazz *****/
/*---------------*/

figure.effect-jazz {
	background: -webkit-linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
	background: linear-gradient(-45deg, #f3cf3f 0%,#f33f58 100%);
}

figure.effect-jazz img {
	opacity: 0.9;
}

figure.effect-jazz figcaption::after,
figure.effect-jazz img,
figure.effect-jazz p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-jazz figcaption::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	content: '';
	opacity: 0;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,0,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-jazz h2,
figure.effect-jazz p {
	opacity: 1;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
}

figure.effect-jazz h2 {
	padding-top: 26%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-jazz p {
	padding: 0.5em 2em;
	text-transform: none;
	font-size: 0.85em;
	opacity: 0;
}

figure.effect-jazz:hover img {
	opacity: 0.7;
	-webkit-transform: scale3d(1.05,1.05,1);
	transform: scale3d(1.05,1.05,1);
}

figure.effect-jazz:hover figcaption::after {
	opacity: 1;
	-webkit-transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
	transform: rotate3d(0,0,1,45deg) scale3d(1,1,1);
}

figure.effect-jazz:hover h2,
figure.effect-jazz:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

/*---------------*/
/***** Ming *****/
/*---------------*/

figure.effect-ming {
	background: #030c17;
}

figure.effect-ming img {
	opacity: 0.9;
	-webkit-transition: opacity 0.35s;
	transition: opacity 0.35s;
}

figure.effect-ming figcaption::before {
	position: absolute;
	top: 30px;
	right: 30px;
	bottom: 30px;
	left: 30px;
	border: 2px solid #fff;
	box-shadow: 0 0 0 30px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale3d(1.4,1.4,1);
	transform: scale3d(1.4,1.4,1);
}

figure.effect-ming h2 {
	margin: 20% 0 10px 0;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
}

figure.effect-ming p {
	padding: 1em;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.5);
	transform: scale(1.5);
}

figure.effect-ming:hover h2 {
	-webkit-transform: scale(0.9);
	transform: scale(0.9);
}

figure.effect-ming:hover figcaption::before,
figure.effect-ming:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

figure.effect-ming:hover figcaption {
	background-color: rgba(58,52,42,0);
}

figure.effect-ming:hover img {
	opacity: 0.4;
}

/*---------------*/
/***** Lexi *****/
/*---------------*/

figure.effect-lexi {
	background: -webkit-linear-gradient(-45deg, #000 0%,#fff 100%);
	background: linear-gradient(-45deg, #000 0%,#fff 100%);
}

figure.effect-lexi img {
	margin: -10px 0 0 -10px;
	max-width: none;
	width: -webkit-calc(100% + 10px);
	width: calc(100% + 10px);
	opacity: 0.9;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(10px,10px,0);
	transform: translate3d(10px,10px,0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

figure.effect-lexi figcaption::before,
figure.effect-lexi p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-lexi figcaption::before {
	position: absolute;
	right: -100px;
	bottom: -100px;
	width: 300px;
	height: 300px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 900px rgba(255,255,255,0.2);
	content: '';
	opacity: 0;
	-webkit-transform: scale3d(0.5,0.5,1);
	transform: scale3d(0.5,0.5,1);
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
}

figure.effect-lexi:hover img {
	opacity: 0.6;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

figure.effect-lexi h2 {
	text-align: left;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(5px,5px,0);
	transform: translate3d(5px,5px,0);
}

figure.effect-lexi p {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 0 1.5em 1.5em 0;
	width: 140px;
	text-align: right;
	opacity: 0;
	-webkit-transform: translate3d(20px,20px,0);
	transform: translate3d(20px,20px,0);
}

figure.effect-lexi:hover figcaption::before {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}

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

/*---------------*/
/***** Duke *****/
/*---------------*/

figure.effect-duke {
	background: -webkit-linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
	background: linear-gradient(-45deg, #34495e 0%,#cc6055 100%);
}

figure.effect-duke img,
figure.effect-duke p {
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

figure.effect-duke:hover img {
	opacity: 0.1;
	-webkit-transform: scale3d(2,2,1);
	transform: scale3d(2,2,1);
}

figure.effect-duke h2 {
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% 100%;
	transform-origin: 50% 100%;
}

figure.effect-duke p {
	position: absolute;
	bottom: 0;
	left: 0;
	margin: 20px;
	padding: 30px;
	border: 2px solid #fff;
	text-transform: none;
	font-size: 90%;
	opacity: 0;
	-webkit-transform: scale3d(0.8,0.8,1);
	transform: scale3d(0.8,0.8,1);
	-webkit-transform-origin: 50% -100%;
	transform-origin: 50% -100%;
}

figure.effect-duke:hover h2,
figure.effect-duke:hover p {
	opacity: 1;
	-webkit-transform: scale3d(1,1,1);
	transform: scale3d(1,1,1);
}



figure.effect-ruby {
	background-color: #17819c;
}

figure.effect-ruby img {
	opacity: 0.7;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: scale(1.15);
	transform: scale(1.15);
}

figure.effect-ruby:hover img {
	opacity: 0.5;
	-webkit-transform: scale(1);
	transform: scale(1);
}

figure.effect-ruby h2 {
	margin-top: 20%;
	-webkit-transition: -webkit-transform 0.35s;
	transition: transform 0.35s;
	-webkit-transform: translate3d(0,20px,0);
	transform: translate3d(0,20px,0);
}

figure.effect-ruby p {
	margin: 1em 0 0;
	padding: 3em;
	border: 1px solid #fff;
	opacity: 0;
	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
	-webkit-transform: translate3d(0,20px,0) scale(1.1);
	transform: translate3d(0,20px,0) scale(1.1);
} 

figure.effect-ruby:hover h2 {
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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

/* Media queries */
@media screen and (max-width: 50em) {
	.content {
		padding: 0 10px;
		text-align: center;
	}
	.grid figure {
		display: inline-block;
		float: none;
		margin: 10px auto;
		width: 100%;
	}
}
 
 
 
/* Table of Content
==================================================
	1.0 - Transition
	1.1 - Number Counter
	1.2 - Browser Css
	1.3 - Default Color*/

	/*--------------------------------------------------------------
	1.0 - Transition
	--------------------------------------------------------------*/
	.dt-sc-counter.type6 .dt-sc-couter-icon-holder:before, .dt-sc-counter.type2 .dt-sc-couter-icon-holder, .dt-sc-counter.type4 .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4 .dt-sc-couter-icon-holder, .dt-sc-counter.type5:before, .dt-sc-counter.type5:after, .dt-sc-counter.type3 .icon-wrapper, .dt-sc-counter.type1 .icon-wrapper span, .dt-sc-counter.type1 .dt-sc-counter-number, .dt-sc-counter.type1 .dt-sc-counter-number:before, .dt-sc-counter.type1 .icon-wrapper span:after, .dt-sc-counter.type1 { -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s linear; -o-transition:all 0.3s linear; -ms-transition:all 0.3s linear; transition:all 0.3s linear; }
	
	
	/*--------------------------------------------------------------
	1.1 - Number Counter
	--------------------------------------------------------------*/
	.dt-sc-counter { float:left; clear:both; width:100%; margin:0px; padding:0px; }
	
	.dt-sc-counter.type1 { border-right:2px solid; margin-top:0; padding:20px 30px; }
	.dt-sc-counter.type1 .icon-wrapper { width:100%; clear:both; position:relative; margin-bottom: 60px; }
	.dt-sc-counter.type1 .icon-wrapper span { font-size:40px; }
	.dt-sc-counter.type1 .dt-sc-counter-number { font-size: 50px; margin-bottom: 15px; padding-bottom: 22px; position: relative; font-weight: bold; }
	.dt-sc-counter.type1 h4 { font-size:16px; text-transform:uppercase; margin-bottom:5px; }

	.dt-sc-counter.type1 .dt-sc-counter-number:before { content:""; position:absolute; left:0px; bottom:0px; width:34px; height: 3px; }
	.dt-sc-counter.type1.aligncenter .dt-sc-counter-number:before { left: 0; right: 0; margin: 0 auto; }
	.dt-sc-counter.type1.alignright .dt-sc-counter-number:before { right:0px; left:inherit; }
	
	
	.secondary-skin-highlight .dt-sc-counter.type1 .dt-sc-counter-number:before { background: #fff; }
	
	.secondary-skin-highlight .dt-sc-counter.type1 .icon-wrapper span.fa:after, 
	.secondary-skin-highlight .dt-sc-counter.type1 .icon-wrapper span.zmdi:after, 
	.secondary-skin-highlight .dt-sc-counter.type1 .icon-wrapper span.icon-moon:after, 
	.secondary-skin-highlight .dt-sc-counter.type1 .icon-wrapper span.pe-icon:after, 
	.secondary-skin-highlight .dt-sc-counter.type1 .icon-wrapper span.icon:after { border-color: #fff; z-index: 0; }
	
	.secondary-skin-highlight .dt-sc-counter.type1:hover .dt-sc-counter-number,
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.fa, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.zmdi, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.icon-moon, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.pe-icon, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.icon { color: #fff; }
	
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.fa:after, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.zmdi:after, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.icon-moon:after, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.pe-icon:after, 
	.secondary-skin-highlight .dt-sc-counter.type1:hover .icon-wrapper span.icon:after { border-color: #fff; background: none; }
		
	.dt-sc-counter.type1.alignleft .icon-wrapper span.fa:after, 
	.dt-sc-counter.type1.alignleft .icon-wrapper span.zmdi:after, 
	.dt-sc-counter.type1.alignleft .icon-wrapper span.icon-moon:after, 
	.dt-sc-counter.type1.alignleft .icon-wrapper span.pe-icon:after, 
	.dt-sc-counter.type1.alignleft .icon-wrapper span.icon:after { left: -15px; right: auto; }
	
	.last .dt-sc-counter.type1 { border-right: none; }
	
	.dt-sc-counter.type1:hover .dt-sc-counter-number:before { width: 60px; }
		
	.dt-sc-counter.type2 { text-align:center; }
	.dt-sc-counter.type2 .icon-wrapper span.pe-icon, .dt-sc-counter.type2 .icon-wrapper span.icon, .dt-sc-counter.type2 .icon-wrapper span.fa { font-size:30px; display:inline-block; margin-bottom:10px; }
	.dt-sc-counter.type2 .dt-sc-couter-icon-holder { display:inline-block; width:120px; height: 120px; padding:30px 0px; }
	.dt-sc-counter.type2 .dt-sc-counter-number, .dt-sc-counter.type2 h4 { font-size:20px; }
	.dt-sc-counter.type2 h4 { font-size:20px; margin:20px 0px 0px; }
	
	.dt-sc-counter.type2.alignleft { text-align: left; }
	.dt-sc-counter.type2.alignright { text-align: right; }
	
	.dt-sc-counter.type2.alignleft .dt-sc-couter-icon-holder, .dt-sc-counter.type2.alignright .dt-sc-couter-icon-holder { text-align: center; }
	
	.dt-sc-counter.type3 { text-align:center; border-right:1px solid; }
	.dt-sc-counter.type3.last, .last .dt-sc-counter.type3 { border-right-width: 0; }
	.dt-sc-counter.type3 .dt-sc-couter-icon-holder { display:inline-block; padding:0px; margin:-32px 0px 0px; }
	.dt-sc-counter.type3 .dt-sc-couter-icon-holder .icon-wrapper { width:70px; height:70px; border:5px solid; border-radius:50%; margin:0px 0px 20px; position:relative; text-align:center; }
	.dt-sc-counter.type3 .dt-sc-couter-icon-holder span { line-height:60px; font-size:32px; margin-bottom:20px; }
	.dt-sc-counter.type3 .dt-sc-counter-number { font-size:30px; }
	.dt-sc-counter.type3 h4 { font-size:14px; margin:10px 0px 0px; text-transform:uppercase; padding:0px 0px 40px; }
	.dt-sc-counter.type3 .icon-wrapper:before { border-radius: 50%; content: ""; height: 72px; left: -6px; margin: 0 auto; position: absolute; right: 0; top: -6px; width: 72px; border:1px solid; }
		
	.dt-sc-counter.type3.diamond-square { border-right-style:dashed; }
	.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder { margin-top:0px; }
	.dt-sc-counter.type3.diamond-square h4 { font-size:14px; text-transform:uppercase; letter-spacing:1px; padding-bottom:10px; }
	.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper { background:none; width:100px; height:65px; }
	.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:before { content:""; position:absolute; left:-2px; right:0px; top:-1px; margin:auto; width:65px; height:65px; transform:rotate(37deg) skewX(-17deg) skewY(-3deg); -ms-transform:rotate(37deg) skewX(-17deg) skewY(-3deg); -webkit-transform:rotate(37deg) skewX(-17deg) skewY(-3deg); }
	.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after { content:""; position:absolute; 	left:-3px; right:0px; top:3px; margin:auto; border:1px solid; width:57px; height:57px; transform:rotate(37deg) skewX(-17deg) skewY(-3deg); -ms-transform:rotate(37deg) skewX(-17deg) skewY(-3deg); -webkit-transform:rotate(37deg) skewX(-17deg) skewY(-3deg); }
	.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper span { position:relative; line-height:65px; }
	
	.dt-sc-counter.type3.diamond-square .icon-wrapper:before { border-radius:0; }
	
	.dt-sc-counter.type3.alignright { text-align: right; padding-right: 30px; }
	.dt-sc-counter.type3.alignleft { text-align: left; padding-left: 30px; }
	
	.dt-sc-counter.type4 { text-align:center; }
	.dt-sc-counter.type4 .dt-sc-couter-icon-holder { display:inline-block; width:140px; height:140px; border:5px solid; border-radius:50%; position:relative; }
	.dt-sc-counter.type4 .dt-sc-couter-icon-holder .icon-wrapper { width:70px; height:70px; border:5px solid; border-radius:50%; position:absolute; left:-40px; top:-10px; line-height:60px; }
	.dt-sc-counter.type4 .dt-sc-couter-icon-holder span { line-height:60px; font-size:32px; }
	.dt-sc-counter.type4 .dt-sc-counter-number { font-size:30px; line-height:135px; }
	.dt-sc-counter.type4 h4 { font-size:14px; margin:15px 0px 0px; text-transform:uppercase; padding:0px; }
	
	.dt-sc-counter.type4.alignright .dt-sc-couter-icon-holder .icon-wrapper { left: auto; right: -40px; }
	.dt-sc-counter.type4.aligncenter .dt-sc-couter-icon-holder .icon-wrapper { left: 0; right: 0; top: -30px; margin: 0 auto; }
	
	.dt-sc-dark-bg .dt-sc-counter.type4 .dt-sc-counter-number { color:#000000; }
	.dt-sc-dark-bg .dt-sc-counter.type4:hover .dt-sc-counter-number { color: #fff; }
	
	.dt-sc-counter.type4.blue .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.blue:hover .dt-sc-couter-icon-holder { background:#008bd3; }
	.dt-sc-counter.type4.brown .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.brown:hover .dt-sc-couter-icon-holder { background:#795548; }
	.dt-sc-counter.type4.cadetblue .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.cadetblue:hover .dt-sc-couter-icon-holder { background:#3c939d; }
	.dt-sc-counter.type4.chillipepper .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.chillipepper:hover .dt-sc-couter-icon-holder { background:#c10841; }
	.dt-sc-counter.type4.cyan .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.cyan:hover .dt-sc-couter-icon-holder { background:#00bcd4; }
	.dt-sc-counter.type4.darkgolden .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.darkgolden:hover .dt-sc-couter-icon-holder { background:#b48b3c; }
	.dt-sc-counter.type4.deeporange .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.deeporange:hover .dt-sc-couter-icon-holder { background:#ff5722; }
	.dt-sc-counter.type4.deeppurple .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.deeppurple:hover .dt-sc-couter-icon-holder { background:#673ab7; }
	.dt-sc-counter.type4.green .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.green:hover .dt-sc-couter-icon-holder { background:#6ca04a; }
	.dt-sc-counter.type4.lime .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.lime:hover .dt-sc-couter-icon-holder { background:#cddc39; }
	.dt-sc-counter.type4.magenta .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.magenta:hover .dt-sc-couter-icon-holder { background:#cb506d; }
	.dt-sc-counter.type4.orange .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.orange:hover .dt-sc-couter-icon-holder { background:#ff9800; }
	.dt-sc-counter.type4.pink .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.pink:hover .dt-sc-couter-icon-holder { background:#fd6ca3; }
	.dt-sc-counter.type4.purple .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.purple:hover .dt-sc-couter-icon-holder { background:#9c27b0; }
	.dt-sc-counter.type4.red .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.red:hover .dt-sc-couter-icon-holder { background:#da0000; }
	.dt-sc-counter.type4.skyblue .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.skyblue:hover .dt-sc-couter-icon-holder { background:#0eb2e7; }
	.dt-sc-counter.type4.teal .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.teal:hover .dt-sc-couter-icon-holder { background:#009688; }
	.dt-sc-counter.type4.yellow .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.yellow:hover .dt-sc-couter-icon-holder { background:#ffe401; }
	.dt-sc-counter.type4.turquoise .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.turquoise:hover .dt-sc-couter-icon-holder { background:#32ccbd; }
	.dt-sc-counter.type4.wisteria .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.wisteria:hover .dt-sc-couter-icon-holder { background:#9b59b6; }
	.dt-sc-counter.type4.black .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4.black:hover .dt-sc-couter-icon-holder { background:#000000; }
	
	.dt-sc-counter.type5 { float:left; text-align:center; min-height:335px; padding:110px 0px 0px; position:relative; }
	.dt-sc-counter.type5:before { content:""; position:absolute; left:0px; right:0; margin:auto; top:66px; width:200px; height:200px; border:1px solid; z-index:1; -webkit-transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); -ms-transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); }
	.dt-sc-counter.type5:after { content:""; position:absolute; left:0px; right:0; margin:auto; top:76px; width:180px; height:180px; border: none; z-index:1; -webkit-transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); -ms-transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); transform:rotate3d(1, 1, 5, 47deg) skewX(10deg) skewY(10deg); }
	.dt-sc-counter.type5 .dt-sc-couter-icon-holder span { font-size:32px; }
	.dt-sc-counter.type5 .dt-sc-counter-number { font-size:20px; font-weight:bold; margin:5px 0px; }
	.dt-sc-counter.type5 h4 { font-size:16px; letter-spacing:1px; }
	.dt-sc-counter.type5 .dt-sc-couter-icon-holder, .dt-sc-counter.type5 h4 { position:relative; z-index:9; }
	
	.dt-sc-counter.type6 { text-align:center; border:1px solid rgba(0,0,0,0.05); margin:75px -1px 0px 0px; padding:0px 0px 40px; }
	.dt-sc-counter.type6 .dt-sc-couter-icon-holder { width:140px; height:80px; display:inline-block; position:relative; margin:-6px 0px 15px; }
	
	.dt-sc-counter.type6 .dt-sc-couter-icon-holder:before { border:1px solid; content:""; position:absolute; left:0px; right:0px; top:-45px; margin:auto; width:100px; height:100px; border-radius:5px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg);  transform:rotate(45deg); z-index:1; }

	.dt-sc-counter.type6 .dt-sc-couter-icon-holder .icon-wrapper { position:absolute; font-size:20px; z-index:1; left:0px; right:0px; top:-45px; margin:auto; }
	.dt-sc-counter.type6 .dt-sc-counter-number { font-size:34px; font-weight:bold; position:relative; top:-9px; z-index:1; }
	.dt-sc-counter.type6 h4 { font-size:16px; font-weight:bold; text-transform:uppercase; letter-spacing:1px; margin-bottom:0px; position:relative; padding:0px 10px; }
	.dt-sc-counter.type6 h4:before { content:""; position:absolute; right:-6px; top:6px; margin:auto; width:12px; height:12px; -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -ms-transform:rotate(45deg);  transform:rotate(45deg); z-index:1; }
	.dt-sc-counter.type6.last h4:before { background:none; }
	
	
	
	/*--------------------------------------------------------------
	1.2 - Browser Css
	--------------------------------------------------------------*/
	@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
		
		.dt-sc-counter.type5:before, .dt-sc-counter.type5:after { transform: rotate(45deg) skew(10deg, 10deg); -ms-transform: rotate(45deg) skew(10deg, 10deg); }
		
		
	}
	
	/* IE9 and above */	
	@media screen and (min-width:0\0) { 
			
		.type4.dt-sc-counter .dt-sc-couter-icon-holder .icon-wrapper { border: none; box-shadow: 0 0 0 5px #fff; -ms-box-shadow: 0 0 0 5px #fff; }
		
		.diamond-square.type3.dt-sc-counter .dt-sc-couter-icon-holder .icon-wrapper::after { top: 0; }
		.diamond-square.type3.dt-sc-counter .dt-sc-couter-icon-holder .icon-wrapper::before { top: -3px; }
	
	}
	
	
	
	/*--------------------------------------------------------------
	1.3 - Default Colors
	--------------------------------------------------------------*/
	.dt-sc-counter { color:#000000; }
	
	.dt-sc-counter.type2 .dt-sc-couter-icon-holder, .dt-sc-counter.type3 .dt-sc-couter-icon-holder span, .dt-sc-counter.type4 .dt-sc-couter-icon-holder span, .dt-sc-counter.type4:hover .dt-sc-counter-number,  .dt-sc-counter.type6:hover .dt-sc-counter-number, .dt-sc-counter.type5:hover h4, .dt-sc-counter.type5:hover .dt-sc-couter-icon-holder, .dt-sc-dark-bg .dt-sc-counter { color:#ffffff; }
	
	.dt-sc-counter.type3 .dt-sc-couter-icon-holder .icon-wrapper { background:#000000; }
	
	.dt-sc-counter.type4 .dt-sc-couter-icon-holder, .dt-sc-counter.type6, .dt-sc-counter.type6 .dt-sc-couter-icon-holder:before { background:#ffffff; }	
	.dt-sc-counter.type4 .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type4:hover .dt-sc-couter-icon-holder .icon-wrapper { background:#333333; }
	
	.dt-sc-counter.type1 { border-right-color:rgba(0, 0, 0, 0.1); }
	.dt-sc-dark-bg .dt-sc-counter.type1 { border-color:rgba(255, 255, 255, 0.1); }
	
	.secondary-skin-bg .dt-sc-counter.type1:hover .dt-sc-counter-number { color: #fff; }
	.secondary-skin-bg .dt-sc-counter.type1 .dt-sc-counter-number:before { background: #fff; }
	
	.dt-sc-counter.type3 .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after, .dt-sc-counter.type4 .dt-sc-couter-icon-holder .icon-wrapper, .dt-sc-dark-bg .dt-sc-counter.type5:before, .dt-sc-dark-bg .dt-sc-counter.type5:after { border-color:#ffffff; }
.dt-sc-counter.type3 { border-color:rgba(0, 0, 0, 0.1); }

	.dt-sc-counter.type1:hover{border-color:#000;}	

	.dt-sc-counter.type4 .dt-sc-couter-icon-holder { border:5px solid rgba(0, 0, 0, 0.07); }
	
	.dt-sc-counter.type5:before, .dt-sc-counter.type5:after { border-color:#000000; }
	
	
	/* Note: Design for a width of 960px */	
    @media only screen and (min-width:992px) and (max-width:1199px) {
		/** Counters **/
		.vc_col-md-6 .dt-sc-counter.type1 { margin-bottom: 25px; }
		
		*.dt-sc-counter.type3, .vc_row-no-padding .dt-sc-counter.type3 { padding: 0; }
		
		.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:before,
		.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after,
		.vc_row-no-padding .dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:before,
		.vc_row-no-padding .dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after { left: -2px; }		
				
		.dt-sc-counter.type5::before { height: 180px; width: 180px; }
		.dt-sc-counter.type5::after { height: 160px; width: 160px; }
	
	}
	
	
	/* Note: Design for a width of 768px */
    @media only screen and (min-width:768px) and (max-width:991px) {
		
		/** Counters **/
		.dt-sc-counter.type3, .vc_row-no-padding .dt-sc-counter.type3 { padding: 0; }
		
		.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:before,
		.dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after,
		.vc_row-no-padding .dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:before,
		.vc_row-no-padding .dt-sc-counter.type3.diamond-square .dt-sc-couter-icon-holder .icon-wrapper:after { left: -2px; }
		
		.dt-sc-counter.type4 .dt-sc-couter-icon-holder { height: 120px; width: 120px; }
		.dt-sc-counter.type4 .dt-sc-counter-number { font-size: 28px; line-height: 125px; }
		.dt-sc-counter.type4 .dt-sc-couter-icon-holder .icon-wrapper { height: 60px; line-height: 60px; left: -30px; width: 60px; }
		.dt-sc-counter.type4 .dt-sc-couter-icon-holder span { font-size: 28px; line-height: 50px; }
		
		.dt-sc-counter.type5 { padding: 90px 0 0; }
		.dt-sc-counter.type5::before { height: 150px; width: 150px; }
		.dt-sc-counter.type5::after { height: 130px; width: 130px; }

		.dt-sc-counter.type6 h4 { font-size: 14px; }
	
	}
	
	
	/*----*****---- << Mobile (Landscape) >> ----*****----*/	
	
	/* Common Styles for the devices below 767px width */
	@media only screen and (max-width: 767px) { 
	
		/** Counters **/
		.dt-sc-counter { margin-bottom: 15px; }
		
		.dt-sc-counter.type1 { border-right: none; }
		
		.dt-sc-counter.type3 { border-left-style: solid; border-left-width: 1px; }
		.dt-sc-counter.type3.diamond-square { border-left-style: dashed; }
		.dt-sc-counter.type3.last, .last .dt-sc-counter.type3 { border-width: 0 1px; }
		
		.dt-sc-counter.type6 { display: block; float: none; margin-left: auto; margin-right: auto; width: 92%; }
		.dt-sc-counter.type6 h4::after { content: ""; height: 12px; margin: auto; position: absolute; left: -6px; top: 6px; transform: rotate(45deg); width: 12px; z-index: 1; }
	
	}
		
	
	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 319px) {	
		.dt-sc-counter.type5::before { height: 180px; width: 180px; }
		.dt-sc-counter.type5::after { height: 160px; width: 160px; }
	}  
	
	
	

.sec
{
background-size: cover;
margin-top:70px;
    background-repeat: repeat;
    background-color: rgba(0, 0, 0, 0);
    background-image: url(../images/counter.jpg);
    background-attachment: scroll;
    left: 0px;
   padding:70px 0px;
    background-position: 50% 9px;
}
@media only screen and (max-width:620px)
{
  .sec {
    background-size: cover;
    margin-top: -57px !important;
    background-repeat: repeat;
    background-color: rgba(0, 0, 0, 0);
    background-image: url(../images/10-2.jpg);
    background-attachment: scroll;
    left: 0px;
    padding: 70px 0px;
    background-position: 50% 9px;
}
}