/* Plugin styles*/

/* =========== Mixins ========== */

@mixin transition($transition...)
	-moz-transition:    $transition
	-o-transition:      $transition
	-webkit-transition: $transition
	transition:         $transition


@keyframes fadeIn
	from
		opacity: 0


/* =========== Styles ========== */

.wpcf7 form .trx_mscf_step.trx_hidden,
.wpcf7 form .trx_hidden
	display: none
	@include transition(height .5s)

.wpcf7 form .trx_mscf_step
	display: block

.wpcf7 form .trx_mscf_step ~ .trx_mscf_step
	display: none
	&.trx_mscf_active
		display: block
		animation: fadeIn .8s
.wpcf7
	/* NEXT PREV */
	.trx_mscf_next,
	.trx_mscf_prev
		display: inline-block

	/* PROGRESSBAR */
	.trx_mscf_progressbar
		overflow: hidden
		/*CSS counters to number the steps*/
		counter-reset: step
		z-index: 0

		li
			text-align: center
			z-index: 1
		li.trx_mscf_numbers
			list-style-type: none
			color: grey
			text-transform: uppercase
			font-size: 9px
			width: 33.33%
			float: left
			position: relative
			&:after
				content: ""
				width: 100%
				height: 2px
				background: #808177
				position: absolute
				left: calc(-50% + 10px)
				top: 9px
				z-index: -1
			/*put it behind the numbers*/
			&:before
				content: counter(step)
				counter-increment: step
				width: 20px
				line-height: 20px
				display: block
				font-size: 10px
				color: #fefefe
				background: #808177
				border-radius: 3px
				margin: 0 auto 5px auto
				z-index: 2
			&.active
				color: #27AE60
			&:first-child:after
				content: none
			&.active:before,
			&.active:after
				background: #27AE60
				color: #fff
		li.trx_mscf_bullets
			list-style-type: none
			color: grey
			text-transform: uppercase
			font-size: 9px
			width: 33.33%
			float: left
			position: relative
			&:after
				content: ""
				width: 100%
				height: 2px
				background: #808177
				position: absolute
				left: calc(-50% + 7px)
				top: 6px
				z-index: -1
			/*put it behind the numbers*/
			&:before
				content: ' '
				width: 14px
				height: 14px
				line-height: 14px
				display: block
				color: #fefefe
				background: #808177
				border-radius: 50%
				margin: 0 auto 5px auto
				z-index: 2
			&.active
				color: #27AE60
			&:first-child:after
				content: none
			&.active:before,
			&.active:after
				background: #27AE60
				color: #fff
		li.trx_mscf_line
			list-style-type: none
			position: relative
			padding-top: 10px
			color: grey
			text-transform: uppercase
			font-size: 10px
			width: 33.33%
			float: left
			&:after
				content: ""
				width: 100%
				height: 3px
				background: #808177
				position: absolute
				left: -50%
				top: 6px
				z-index: -1
			/*put it behind the numbers*/
			&:before
				content: ' '
				display: block
				color: #fefefe
				background: #808177
				margin: 0 auto 5px auto
				z-index: 2
			&:first-child:after
				content: none
			&.active
				color: #27AE60
			&.active:before,
			&.active:after
				background: #27AE60
				color: #fff