
  
.column-1,
.column-10,
.column-11,
.column-12,
.column-2,
.column-3,
.column-4,
.column-5,
.column-7,
.column-8,
.column-9 {
	float: left;
	padding: 15px
}
  
.column-1 {
	width: 8.333333333333333%
}

.column-2 {
	width: 16.66666666666667%
}

.column-3 {
	width: 25%
}

.column-4 {
	width: 33.33333333333333%
}

.column-5 {
	width: 41.66666666666667%
}

.column-6 {
	width: 50%;
	float: left;
	padding: 15px
}

.column-7 {
	width: 58.33333333333333%
}

.column-8 {
	width: 66.66666666666667%
}

.column-9 {
	width: 75%
}

.column-10 {
	width: 83.33333333333333%
}

.column-11 {
	width: 91.66666666666667%
}

.column-12,
.wrapper-full {
	width: 100%
}
 
.custom-row::after {
	content: "";
	display: table;
	clear: both
}

.wrapper {
	max-width: 1140px;
	margin: 0 auto;
	position: relative
}

 
 
 

.box-tab {
	margin: 10px 0
}

.effect {
	margin: auto;
	/* box-shadow: 0 0 15px 5px rgba(0, 0, 0, 20%); */
	box-shadow: 0 0 6px 2px rgba(0, 0, 0, 20%);
	background-color: #fff;
	border: 5px solid #ffffff
}

.tab-container {
	padding: 50px 0
}

.tab-head {
	text-align: center;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto
}

.tab .effect {
	position: relative;
	overflow: hidden;
	max-height: 240px;
	max-width: 350px;
	background: #3085a3;
	text-align: center;
	cursor: pointer
}

.grid-width3,
.grid-width6 {
	max-height: 270px!important;
	max-width: 530px!important
}

.grid-width8 {
	max-width: 700px!important
}

.tab .effect img {
	position: relative;
	display: block;
	min-height: 100%;
	opacity: .8
}
 
.tab .effect .tab-text {
	padding: 1.0em;
	color: #fff;
	text-transform: uppercase;
	font-size: .02rem;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

.tab-text h2 {
	color: #fff;
	margin: 0;
	font-size: 1.1rem
}

.tab-text p {
	color: #fff;
	margin: 0;
	font-size: 1rem
}

.hide {
	display: none
}

@media (max-width:575px) {
	.column-xs-1,
	.column-xs-10,
	.column-xs-11,
	.column-xs-12,
	.column-xs-2,
	.column-xs-3,
	.column-xs-4,
	.column-xs-5,
	.column-xs-7,
	.column-xs-8,
	.column-xs-9 {
		float: left;
		padding: 15px
	}
	 
	.column-xs-12 {
		width: 100%
	}
	.hide-xs {
		display: none
	}
	.effectTab-header .title::before {
		width: 125%;
		left: 15%
	}
	.tab-container {
		padding-top: 25px;
		padding-bottom: 25px
	}
}

@media (min-width:576px) and (max-width:767px) {
	.column-sm-1,
	.column-sm-10,
	.column-sm-11,
	.column-sm-12,
	.column-sm-2,
	.column-sm-3,
	.column-sm-4,
	.column-sm-5,
	.column-sm-7,
	.column-sm-8,
	.column-sm-9 {
		float: left;
		padding: 15px
	}
	.column-sm-1 {
		width: 8.333333333333333%
	}
	.column-sm-2 {
		width: 16.66666666666667%
	}
	.column-sm-3 {
		width: 25%
	}
	.column-sm-4 {
		width: 33.33333333333333%
	}
	.column-sm-5 {
		width: 41.66666666666667%
	}
	.column-sm-6 {
		width: 50%;
		float: left;
		padding: 15px
	}
	.column-sm-7 {
		width: 58.33333333333333%
	}
	.column-sm-8 {
		width: 66.66666666666667%
	}
	.column-sm-9 {
		width: 75%
	}
	.column-sm-10 {
		width: 83.33333333333333%
	}
	.column-sm-11 {
		width: 91.66666666666667%
	}
	.column-sm-12 {
		width: 100%
	}
	.hide-sm {
		display: none
	}
	.visible-sm {
		display: block
	}
	.tab-container {
		padding-top: 25px;
		padding-bottom: 25px
	}
}

@media (max-width:1000px) {
	.header h1 {
		padding-left: 70px
	}
	.rotate {
		left: 30px
	}
	@media (min-width:768px) and (max-width:991px) {
		.column-md-1,
		.column-md-10,
		.column-md-11,
		.column-md-12,
		.column-md-2,
		.column-md-3,
		.column-md-4,
		.column-md-5,
		.column-md-7,
		.column-md-8,
		.column-md-9 {
			float: left;
			padding: 15px
		}
		.column-md-1 {
			width: 8.333333333333333%
		}
		.column-md-2 {
			width: 16.66666666666667%
		}
		.column-md-3 {
			width: 25%
		}
		.column-md-4 {
			width: 33.33333333333333%
		}
		.column-md-5 {
			width: 41.66666666666667%
		}
		.column-md-6 {
			width: 50%;
			float: left;
			padding: 15px
		}
		.column-md-7 {
			width: 58.33333333333333%
		}
		.column-md-8 {
			width: 66.66666666666667%
		}
		.column-md-9 {
			width: 75%
		}
		.column-md-10 {
			width: 83.33333333333333%
		}
		.column-md-11 {
			width: 91.66666666666667%
		}
		.column-md-12 {
			width: 100%
		}
		.hide-md {
			display: none
		}
		.visible-md {
			display: block
		}
	}
}
.effect.effect-two .tab-text {
	top: auto;
	bottom: 0;
	padding: 1em;
	height: 3em;
	background: rgba(105, 114, 125 , .95);
	color: #3c4a50;
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0)
}

.effect.effect-two .col3 {
	height: 5.5rem!important
}

.effect.effect-two h2 {
	float: left;
	font-size: 1.1rem;
	font-weight: 600;
	word-break: break-all;
	width: 80%;
	text-align: left;
	display: inline-block
}

.effect-two .col3-head {
	width: 100%!important;
	padding-bottom: 10px
}

.effect-two .icon-links a {
	font-size: 1.2rem!important
}

.effect.effect-two p.icon-links a {
	float: right;
	color: #f1f8ff;
	font-size: 1.4em;
	line-height: 20px
}

.effect.effect-two:hover p.icon-links a:focus,
.effect.effect-two:hover p.icon-links a:hover {
	color: #252d31
}

.effect.effect-two p.description {
	position: absolute;
	font-size: 1rem!important;
	bottom: 7em;
	color: #fff;
	text-transform: none;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-webkit-transition: opacity .35s;
	transition: opacity .35s;
	line-height: 18px;
	padding: 15px 50px;
	background-color: rgba(0, 0, 0, .5);
	right: 30px;
	left: 30px;
	-webkit-clip-path: polygon(25% 0, 100% 0, 75% 100%, 0 100%);
	clip-path: polygon(7% 0, 100% 0, 93% 100%, 2% 100%)
}

.effect.effect-two p.col6 {
	left: 80px!important;
	right: 80px!important;
	bottom: 8rem
}

.effect.effect-two h2,
.effect.effect-two p.icon-links a {
	-webkit-transition: -webkit-transform .35s;
	transition: transform .35s;
	-webkit-transform: translate3d(0, 200%, 0);
	transform: translate3d(0, 200%, 0)
}

.effect.effect-two:hover p.description {
	opacity: 1
}

.effect.effect-two:hover .tab-text,
.effect.effect-two:hover h2,
.effect.effect-two:hover p.icon-links a {
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	padding-right: 10px
}

.effect.effect-two:hover h2 {
	-webkit-transition-delay: 50ms;
	transition-delay: 50ms
}

.effect.effect-two:hover p.icon-links a:nth-child(3) {
	-webkit-transition-delay: .1s;
	transition-delay: .1s
}

.effect.effect-two:hover p.icon-links a:nth-child(2) {
	-webkit-transition-delay: .15s;
	transition-delay: .15s
}

.effect.effect-two:hover p.icon-links a:first-child {
	-webkit-transition-delay: .2s;
	transition-delay: .2s
}

 
  /*Zoom In*/
.column#zoomIn img {
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}
.column#zoomIn:hover img {
	-webkit-transform: scale(1.3);
	transform: scale(1.3);
}









/* 9 effect ----------------------------------*/

.effect.effect-nine {
	background: linear-gradient(-180deg, #fff 10%, #000 100%)
	}


.effect.effect-nine img {
	transition: all .3s ease-in-out;
	transform: translate3d(0, 0, 0) scale(1, 1);
	-webkit-transition: all .3s ease-in-out;
	-webkit-transform: translate3d(0, 0, 0) scale(1, 1)
}

.effect.effect-nine:hover img {
	opacity: .6;
	transform: translate3d(-20px, 0, 0) scale(1.1, 1.1);
	-webkit-transform: translate3d(-20px, 0, 0) scale(1.1, 1.1)
}

.effect.effect-nine .tab-text h2 {
	/* font-family: Oswald; */
	transform: scale3d(.9, .9, 1);
	transition: all .5s ease-in-out;
	-webkit-transform: scale3d(.9, .9, 1);
	-webkit-transition: all .5s ease-in-out;
	z-index: 2;
	position: relative;
	padding-top: 56%;	
    text-align: left;
	padding-left: 10px;
}

.effect.effect-nine:hover h2 {
	transform: scale3d(1, 1, 1);
	transition: all .5s ease-in-out;
	-webkit-transform: scale3d(1, 1, 1);
	-webkit-transition: all .5s ease-in-out
}

.effect.effect-nine p {
	font-size: .8rem;
	padding: 10px 5px;
	transform: scale3d(.8, .8, 1);
	-webkit-transform: scale3d(.8, .8, 1);
	opacity: 0;
	-webkit-transition: all .35s;
	transition: all .35s;
	font-family: Poppins;
	z-index: 2;
	position: relative
}

.effect.effect-nine:hover p {
	transform: scale3d(1, 1, 1);
	-webkit-transform: scale3d(1, 1, 1);
	opacity: 1
}

.effect.effect-nine .tab-text:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: calc(100% - 0px);
	height: inherit;
	border-top: 10px solid transparent;
	border-left: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid transparent;
	transition: all .4s ease-in-out;
	-webkit-transition: all .4s ease-in-out
}

.effect.effect-nine:hover .tab-text:after {
	opacity: 1;
	top: 0;
	left: 0;
	/* border-top: 111px solid rgba(0, 0, 0, .5);
	border-bottom: 111px solid rgba(0, 0, 0, .5); 
	border-left: 111px solid rgba(0, 0, 0, .5);
	border-right: 111px solid rgba(0, 0, 0, .5); */
	border-bottom: 111px solid rgba(255, 255, 255, .5);  
}

.effect.effect-nine .icons-block {
	z-index: 1000;
	position: absolute;
	top: 10px;
	width: 100%;
	left: 0;
	text-align: left;
	padding-left: 15px;
	padding-top: 10px
}

.effect.effect-nine .icons-block .social-icon-1,
.effect.effect-nine .icons-block .social-icon-2,
.effect.effect-nine .icons-block .social-icon-3 {
	transition: all .5s ease-in-out;
	opacity: 0
}

.effect.effect-nine:hover .social-icon-1 {
	opacity: 1;
	transition-delay: .3s;
	transition-duration: .5s
}

.effect.effect-nine:hover .social-icon-2 {
	opacity: 1;
	transition-delay: .4s;
	transition-duration: .5s
}

.effect.effect-nine:hover .social-icon-3 {
	opacity: 1;
	transition-delay: .5s;
	transition-duration: .5s
}

.effect.effect-nine .icons-block i {
	color: rgba(255, 255, 255, .9);
	padding-left: 7px;
	font-size: 1.2rem
}