.ct-contact-info1 {
	font-size: 14px;
	.ct-contact-icon {
		font-size: 18px;
		line-height: 1;
		margin-right: 8px;
		min-width: 14px;
	}
	.ct-contact-content {
		font-weight: 700;
	}
	.item--contact-info {
		display: flex;
		flex-wrap: nowrap;
		position: relative;
		a {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 99;
		}
		+ .item--contact-info {
			margin-top: 15px;
		}
	}
	&.style1 {
		.item--contact-info {
			a.ct-contact-content {
				position: static;
			}
		}
	}
	&.style2 {
		.ct-contact-icon {
			width: 45px;
			min-width: 45px;
			height: 45px;
			background-color: #e6eefb;
			border-radius: 5px;
			line-height: 45px;
			text-align: center;
			font-size: 26px;
			color: $primary_color;
			margin-right: 26px;
			display: inline-block;
			@media #{$max-xs} {
				margin-right: 0;
				margin-bottom: 14px;
			}
		}
		.ct-contact-content {
			font-weight: 500;
			font-size: 18px;
			color: #333;
			line-height: 1.36;
			@media #{$max-xs} {
				display: block;
			}
		}
		.item--contact-info {
			align-items: center;
			@media #{$max-xs} {
				display: block;
				+ .item--contact-info {
					margin-top: 34px;
				}
			}
 		}
	}
}
.ct-contact-info2 {
	.item-meta {
		font-size: 15px;
		label {
			color: $secondary_color;
			display: block;
			@include font-family-heading($heading_default_font);
		}
		span {
			color: $third_color;
			a {
				color: inherit;
				&:hover {
					color: $primary_color;
				}
			}
		}
	}
	.item--contact-info {
		display: flex;
		align-items: center;
		&:hover {
			.ct-contact-icon {
				a {
					color: $primary_color;
				}
				&.icon-bounce {
					img, i {
						@include animation(icon-bounce 0.5s linear 1);
					}
				}
				&.icon-bounce-right {
					img, i {
						@include animation(icon-bounce-right 0.5s linear 1);
					}
				}
				&.icon-shakeThatBooty {
					img, i {
						@include animation(shakeThatBooty 0.3s linear 1);
					}
				}
				&.icon-right-from-Left {
					img, i {
						@include animation(toRightFromLeft 0.3s linear 1);
					}	
				}
				&.icon-flipX {
					img, i {
						@include animation(flipX 0.3s linear 1);
					}		
				}
				&.icon-Scale-Delay {
					img, i {
						@include animation(ct-cubeGridScaleDelay 0.9s linear 1);
					}			
				}
			}
		}
	}
	&.style1 {
		.ct-contact-icon {
			padding-left: 5px;
			padding-right: 5px;
			font-size: 29px;
			overflow: hidden;
			color: $primary_color;
			+ .item-meta {
				margin-left: 12px;
			}
		}
	}
	&.style2 {
		.ct-contact-icon {
			width: 59px;
			height: 59px;
			background-color: rgba( $third_color, 0.09 );
			@include border-radius(59px);
			font-size: 28px;
			overflow: hidden;
			color: #000;
			display: flex;
			align-items: center;
			margin-right: 20px;
			justify-content: center;
			i {
				display: flex;
				align-items: center;
				line-height: 1;
			}
			a {
				color: #000;
				&:hover {
					color: $primary_color;
				}
			}
			&:hover {
				color: $primary_color;
			}
		}
		.item-meta {
			label {
				color: $third_color;
				font-size: 15px;
				display: block;
				@include font-family-heading($heading_default_font);
			}
			span {
				font-size: 20px;
				font-weight: bold;
				color: $secondary_color;
				@include font-family-heading($heading_default_font);	
				a {
					color: inherit;
					&:hover {
						color: $primary_color;
					}
				}
			}
		}
		&:hover {
			.ct-contact-icon {

			}
		}
	}
	&.style3 {
		.ct-contact-icon {
			width: 50px;
			height: 50px;
			background-color: rgba( $third_color, 0.09 );
			@include border-radius(5px);
			font-size: 26px;
			overflow: hidden;
			color: #000;
			display: flex;
			align-items: center;
			margin-right: 20px;
			justify-content: center;
			a {
				color: #000;
				&:hover {
					color: $primary_color;
				}
			}
			&:hover {
				color: $primary_color;
			}
		}
		.item-meta {
			label {

			}
			.ct-contact-content {
				color: $third_color;
				font-size: 15px;
				display: block;
				@include font-family-heading($heading_default_font);				
			}
			a.ct-contact-content {
				color: $third_color;
				&:hover {
					color: $primary_color;
				}
			}
		}
		&:hover {
			.ct-contact-icon {

			}
		}
	}
	&.style4 {
		.ct-contact-icon {
			width: 60px;
			height: 60px;
			min-width: 60px;
			background-color: rgba( #fff, 0.2 );
			@include border-radius(5px);
			font-size: 40px;
			overflow: hidden;
			color: #000;
			display: flex;
			align-items: center;
			margin-right: 20px;
			justify-content: center;
			a {
				color: #000;
				&:hover {
					color: $primary_color;
				}
			}
			&:hover {
				color: $primary_color;
			}
		}
		.item-meta {
			label {
				font-size: 24px;
				margin-bottom: 6px;
				font-weight: 800;
				@include font-family-heading($heading_default_font);
			}
			.ct-contact-content {
				color: $third_color;
				font-size: 15px;
				font-weight: 400;
				display: block;
			}
			a.ct-contact-content {
				color: $third_color;
				&:hover {
					color: $primary_color;
				}
			}
		}
		&:hover {
			.ct-contact-icon {

			}
		}
	}
	&.style5 {
		.ct-contact-icon {
			width: 70px;
			height: 75px;
			background-color: rgba( $third_color, 0.09 );
			font-size: 30px;
			overflow: hidden;
			color: $secondary_color;
			display: flex;
			align-items: center;
			margin-right: 23px;
			justify-content: center;
			a {
				color: $secondary_color;
			}
			&:hover {
				background-color: $primary_color;
				color: #fff;
				a {
					color: #fff;
				}
			}
		}
		.item-meta {
			label {
				font-size: 18px;
			}
			.ct-contact-content {
				color: $third_color;
				font-size: 15px;
				display: block;
				@include font-family-heading($heading_default_font);				
			}
			a.ct-contact-content {
				color: $third_color;
				&:hover {
					color: $primary_color;
				}
			}
		}
		&:hover {
			.ct-contact-icon {

			}
		}
	}
}
.ct-contact-info3 {
	.item--icon {
		width: 65px;
		height: 65px;
		background-color: rgba( #f30030, 0.1 );
	    display: flex;
	    align-items: center;
	    justify-content: center;
		@include border-radius(7px);
		overflow: hidden;
		i, img {

		}
		i {
			font-size: 35px;
			color: #fff;
		}
		img {
			max-height: 36px;
		} 
		@media #{ $min-xl2 } {
			+ .item--body {
				margin-left: 20px;
			}
		}
		@media #{ $max-lg2 } {
			margin-bottom: 25px;
		}
	}
	.item--title {
		margin-bottom: 15px;
	}
	.item--body {

	}
	.inner-box {
		@include border-radius(7px);
		padding: 18px 15px 18px 21px;
		background-color: #06034f;
		@media #{ $min-xl2 } {
			display: flex;
			align-items: center;
		}
		&:hover {
			.item--icon {
				&.icon-bounce {
					img, i {
						@include animation(icon-bounce 0.5s linear 1);
					}
				}
				&.icon-bounce-right {
					img, i {
						@include animation(icon-bounce-right 0.5s linear 1);
					}
				}
				&.icon-shakeThatBooty {
					img, i {
						@include animation(shakeThatBooty 0.3s linear 1);
					}
				}
				&.icon-right-from-Left {
					img, i {
						@include animation(toRightFromLeft 0.3s linear 1);
					}	
				}
				&.icon-flipX {
					img, i {
						@include animation(flipX 0.3s linear 1);
					}		
				}
				&.icon-Scale-Delay {
					img, i {
						@include animation(ct-cubeGridScaleDelay 0.9s linear 1);
					}			
				}
			}
		}
	}
}
.contact-info-custom {
	.ct-contact-info1.style1 {
		@media #{ $min-xl } {
			padding-right: 40px;
			margin-right: 40px;
			position: relative;
			&:after {
				position: absolute;
				content: "";
				width: 1px;
				background-color: #4a423d;
				height: 60px;
				display: block;
				right: 0;
				top: 50%;
				@include transform(translate(0%, -50%) rotateZ(15deg));
			}
		}
		@media #{ $max-xl } {
			margin-right: 30px;
		}
	}
}
.contact-info-custom2 {
	.ct-contact-info2.style2 {
		.ct-contact-icon {
			i {
				  @include animation(coccoc-alo-circle-img-anim 1s infinite ease-in-out);
			}
		}
	}
}

@-moz-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-webkit-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@-o-keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes coccoc-alo-circle-img-anim {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    10% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    20% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    30% {
        transform: rotate(-25deg) scale(1) skew(1deg)
    }
    40% {
        transform: rotate(25deg) scale(1) skew(1deg)
    }
    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }
    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}