/*============================*/
/*	PROCESS
/*============================*/
.process-list
	margin: 0
	padding: 0

	li
		&:first-child
			.process
				&:after
					display: none

	&.style-2
		li
			&:nth-child(even)
				.process
					&.style-2
						margin: 240px 0 0

						span
							border-width: 1px 0 0 1px
							bottom: auto
							top: -110px

							&:after
								right: auto
								left: -5px

							&:before
								left: auto
								right: -5px

			&:last-child
				.process
					&.style-2
						span
							display: none

.process
	position: relative
	text-align: center
	margin-bottom: 25px

	.process-img , span
		width: 200px
		height: 200px
		display: block
		position: relative
		margin: 0 auto

	.process-img
		border-radius: 50%
		background: #000
		@extend .transition
		
		img
			width: 100%
			height: 100%
			border-radius: 50%
			@extend .transition

		&:after
			content: ""
			position: absolute
			top:  -7px
			left: -7px
			right: -7px
			bottom:  -7px
			border: 4px solid #fff
			z-index: -1
			border-radius: 50%
			opacity: 0
			+transform(scale(1.03))
			@extend .transition

	&.style-1

		.heading
			margin: -25px 0 0

		span
			width: 70px
			height: 70px
			line-height: 70px
			font-size: 30px
			font-style: italic
			background: $main-color
			color: #333
			top: -45px

		&:after
			content: ""
			position: absolute
			bottom:  -25px
			left: -61%
			width: 111%
			height: 3px
			background: #333

		&:before
			background: #333
			border-radius: 50%
			bottom: -25px
			content: ""
			height: 10px
			margin-bottom: -2.5px
			margin-right: -5px
			position: absolute
			right: 50%
			width: 10px
			z-index: 2
			@extend .transition

		&:hover
			&:before
				background: $main-color
			.process-img
				&:after
					opacity: 1
					+transform(scale(1))



	&.style-2

		margin: 0 0 120px

		@media (max-width: 990px)
			margin: 0 !important

		.process-img , .heading
			width: 260px
			height: 260px
			margin: 0 auto
			display: block

		.heading
			line-height: 260px
			margin: 0
			position: absolute
			top: 0
			left: 0
			right: 0
			width: 100%
			color: #fff
			border-radius: 50%
			@extend .transition

		&:hover
			.process-img
				img
					opacity: 0.4
		span
			height: 100px
			width: 150px
			border: 1px solid $main-color
			display: block
			border-width: 0 0 1px 1px
			position: absolute
			bottom: -110px
			left: 50%

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

			&:before , &:after
				content: ""
				background: $main-color
				border-radius: 50%
				width: 10px
				height: 10px
				position: absolute
				left: -5px
				top: -5px
				z-index: 2

			&:after
				left: auto
				right: -5px
				top: auto
				bottom: -5px





@media (max-width: 990px)

	.process-list
		li
			&:nth-child(3n)
				.process
					&.style-1
						&:after
							display: none
	.process
		&.style-1
			margin-bottom: 50px
			&:after
				left: -60%
				width: 110%


@media (max-width: 765px)

	.process
		margin-bottom: 25px
		
		&:after , &:before
			display: none
