/*============================*/
/*	INFOBOX
/*============================*/
/*  INFOBOX 1 */
.infobox
	position: relative
	.icon
		color: $main-color
		font-size: 32px
		position: absolute
		top: 0
		left: 0
		@extend .transition

	.heading
		padding: 4px 0 20px 50px
		margin: 0

	p
		color: #707070
		
	.btn
		margin-top: 40px


@media (max-width: 990px)
	.infobox
		.btn
			margin-top: 20px

/* END INFOBOX 1 */

/*  INFOBOX 2 */
.infobox
	&.style-2
		padding-bottom: 30px

		.heading
			padding: 0 0 15px 0

		.text
			padding-left: 120px

		.icon
			background: $main-color
			width: 100px
			height: 100px
			line-height: 100px
			color: #fff
			text-align: center
			
			&:after
				content: ""
				+position(absolute , 5px)
				border: 2px solid #fff

		&:hover
			.icon
				background: #333

@media (max-width: 990px)
	.infobox
		&.style-2
			padding-bottom: 25px

			.icon
				width: 90px
				height: 90px
				line-height: 90px
			.text
				padding-left: 110px

/* END INFOBOX 2 */

/*  INFOBOX 3 */
.infobox
	&.style-3

		.heading
			padding: 0 0 15px 0

		.text
			padding: 10px 0 0
			text-align: center
			font-size: 13px

		.icon
			text-align: center
			width: 140px
			height: 140px
			line-height: 130px
			color: #333
			position: relative
			margin: 0 auto
			+transition( all 0s)

			&:before
				font-family: "icomoon"
				content: "\e600"
				font-size: 138px
				color: $main-color
				position: absolute
				top: 0
				left: 0
				line-height: 1
				z-index: -1
				height: inherit
				width: inherit

		&:hover
			.icon
				color: #fff
				&:before
					content: "\e601"

/* END INFOBOX 3 */


/*  INFOBOX 4 */
.infobox
	&.style-4

		.heading
			padding: 20px 0 0 0
			text-align: center
			font-size: 20px
			text-transform: capitalize

		.icon
			text-align: center
			font-size: 64px
			position: relative
			margin: 0 auto
			line-height: 1

/* END INFOBOX 4 */


/* END INFOBOX 5 */

.infobox
	&.style-5
		color: #707070
		margin-bottom: 10px

		.heading
			padding: 0 0 10px 0

		p 
			font-size: 13px
			font-family:  $primary-font
			margin: 0
			color: inherit

		.text
			margin-left: 90px
			padding: 15px
			position: relative
			+transition(all 0.2s)

			&:before
				content: ""
				height: 0
				width: 0
				position: absolute
				top: 35px
				left: -20px
				border: 10px solid rgba(255, 255, 255, 0)
				+transition(all 0.2s)

		.icon
			background: #efefef
			width: 70px
			height: 70px
			line-height: 70px
			color: #333
			text-align: center
			border-radius: 50%
			margin: 10px 0 0


		&:hover
			color: #fff

			.text
				background: $main-color
				&:before
					border-right-color: $main-color

/* END INFOBOX 5 */


/* SERVICEBOX */
.servicebox
	background: $main-color
	padding: 25px 0
	position: relative
	+clearfix

	.icon
		width: 100px
		height: 80px
		line-height: 80px
		color: #333
		text-align: center
		border-right: 1px solid #333
		font-size: 32px
		float: left

	.text
		height: 80px
		width: auto
		padding: 0 0 0 25px

	.heading
		margin: 0
/* END SERVICEBOX */


/* SERVICEBOX */
.servicebox.style-2
	padding: 25px
	margin: 60px 0 0
	@extend .transition

	@media (max-width: 990px)
		margin: 20px 0 0
		text-align: center !important

	.text
		height: auto
		padding: 0
		color: #fff

	.heading
		margin: 0
		color: #fff

	p
		margin: 0

	span
		height: 50px
		width: 180px
		border: 1px solid $main-color
		display: block
		border-width: 1px 1px 0 0
		position: absolute
		top: 50%
		left: 100%
		z-index: 20
		@extend .transition

		@media (max-width: 990px)
			display: none

		&:after
			content: ""
			border: 2px solid $main-color
			border-radius: 50%
			width: 10px
			height: 10px
			position: absolute
			right: -5px
			bottom: -10px
			z-index: 21
			@extend .transition

	&.text-left
		span
			border-width: 1px 0 0 1px
			right: 100%
			left: auto

			&:after
				right: auto
				left: -5px

	&:hover
		background: #333
		span
			border-color: #333
			&:after
				border-color: #333


/* END SERVICEBOX */


/* CTA */
.call-to-action
	padding: 70px 0
	background: $main-color
	@extend .montserrat
	font-size: 20px
	color: #fff

	.btn
		color: #fff
		border-color: #fff
		padding: 10px 50px
		margin-top: -6px
		float: right

		&:hover
			background: #fff
			color: $main-color
	p 
		margin: 0
		display: inline-block

	@media (max-width: 990px)
		text-align: center

		.btn
			margin-top: 20px
			float: none
