/*============================*/
/*	Shortcodes
/*============================*/

.btn
	display: inline-block
	padding: 8px 20px
	margin-bottom: 0
	font-size: 13px
	font-weight: normal
	text-align: center
	vertical-align: middle
	cursor: pointer
	white-space: nowrap
	border-radius: 0px
	border: 1px solid transition
	text-transform: uppercase
	@extend .transition

	&.btn-lg
		padding: 12px 30px
		font-size: 13px

	&.btn-sm
		padding: 4px 15px
		font-size: 12px

	&.btn-xs
		padding: 3px 10px
		font-size: 12px

	i
		margin-right: 10px

	&.btn-primary
		color: #fff
		background-color: $main-color
		border-color: $main-color

		&:hover, &:focus, &:active, &.active
			color: #fff
			background-color: #333
			border-color: #333

	&.btn-default
		color: #777
		background-color: #fff
		border-color: #ededed
		&:hover, &:focus, &:active, &.active
			color: #fff
			background-color: #333
			border-color: #333

	&.btn-success
		background-color: #5cb85c
		border-color: #4cae4c
		color: #fff
		&:hover, &:focus, &:active, &.active
			background-color: darken(#5cb85c, 8%)
			border-color: darken(#4cae4c, 8%)
			color: #fff

	&.btn-info
		background-color: #5bc0de
		border-color: #46b8da
		color: #fff
		&:hover, &:focus, &:active, &.active
			background-color: darken(#5bc0de, 8%)
			border-color: darken(#46b8da, 8%)
			color: #fff

	&.btn-warning
		background-color: #f0ad4e
		border-color: #eea236
		color: #fff
		&:hover, &:focus, &:active, &.active
			background-color: darken(#f0ad4e, 8%)
			border-color: darken(#eea236, 8%)
			color: #fff

	&.btn-danger
		background-color: #d9534f
		border-color: #d43f3a
		color: #fff
		&:hover, &:focus, &:active, &.active
			background-color: darken(#d9534f, 8%)
			border-color: darken(#d43f3a, 8%)
			color: #fff

/* Form controls */

.form-control
	font-family: inherit
	display: block
	width: 100%
	height: 40px
	padding: 10px 15px
	font-size: 15px
	line-height: 20px
	color: #333
	vertical-align: middle
	background-color: transparent
	border: 1px solid #ededed
	border-radius: 0px
	box-shadow: 0 0px 0px rgba(0, 0, 0, 0)

	&:focus
		border-color: #ededed
		box-shadow: 0 0px 0px rgba(0, 0, 0, 0)
		outline: 0
		
textarea.form-control
	height: auto
	min-height: 100px
	resize: vertical

.input-group
	.form-control , .btn
		border-radius: 0 !important


.newsletter
	.btn
		margin-left: 10px !important
	.form-control
		border-color: #fff
		color: #fff
		+placeholder
			color: #fff


.pagination
	border-radius: 0
	> li
		> a , > span
			color: inherit
			border: 1px solid #ededed
			padding: 8px 14px

			&:hover , &:focus
				color: #fff
				background-color: #333
				border-color: #333

		&:first-child , &:last-child
			> a , > span
				border-radius: 0

	> .active
		> a , > a:hover , > a:focus , > span , > span:hover , > span:focus
			color: #fff
			background-color: #333
			border-color: #333

	> .disabled
		> a , > a:hover , > a:focus , > span , > span:hover , > span:focus
			background-color: #fafafa
			border-color: #ededed


/* list with icons */
.list-with-icons
	padding: 0
	li
		margin-bottom: 5px
		padding-left: 20px 
		position: relative
		
		.list-icon
			font-size: 14px
			left: 0
			position: absolute

/* progress bar */

.progress
	background-color: #fff
	border-radius: 0
	-webkit-box-shadow: inset 0 0 0 1px #ededed
	box-shadow: inset 0 0 0 1px #ededed

.progress-bar
	background-color: #333
	-webkit-box-shadow: none
	box-shadow: none

.progress-bar-info
	background-color: #5bc0de

.progress-bar-danger
	background-color: #d9534f

.progress-bar-warning
	background-color: #f0ad4e

.progress-bar-success
	background-color: #5cb85c

/* tags */
.tag
	background: #fff
	border: 1px solid #ededed
	color: #777
	cursor: pointer
	display: inline-block
	font-size: 12px
	margin: 0 5px 5px 0
	padding: 5px 15px
	text-align: center
	text-transform: capitalize
	vertical-align: middle
	white-space: nowrap

	&:hover
		color: #fff
		background-color: #333
		border-color: #333

.label
	padding: .2em .5em
	font-weight: 400
	border-radius: 0

.alert
	background: #fff
	border: 1px solid #ededed
	padding: 10px 15px
	margin: 0 0 15px
	color: #777
	display: block
	border-radius: 0

	i
		margin-right: 15px

	&.alert-info
		background-color: #5bc0de
		border-color: #46b8da
		color: #fff

	&.alert-danger
		background-color: #d9534f
		border-color: #d43f3a
		color: #fff

	&.alert-warning
		background-color: #f0ad4e
		border-color: #eea236
		color: #fff

	&.alert-success
		background-color: #5cb85c
		border-color: #4cae4c
		color: #fff

/* dropcap */
.dropcap
	display: inline-block
	float: left
	font-weight: bold
	height: 35px
	width: 35px
	line-height: 35px
	margin: 4px 10px 0 0
	font-size: 1.8em
	text-align: center

	&.box , &.round
		background-color: $main-color
		color: #fff
		
	&.round
		border-radius: 100%

.rotate
	+transform( rotate(45deg) )
	&:before
		display: inline-block
	> .fa , &:before
		+transform( rotate(-45deg) )


/* feature box */
.feature-box
	position: relative
	margin-bottom: 60px

	.fbox-icon
		position: relative
		display: inline-block
		width: 70px
		height: 70px
		line-height: 70px
		border: 1px solid #ddd
		color: $main-color
		text-align: center
		font-size: 32px
		float: left
		@extend .transition

		&.rotate
			top: 6px
			left: -6px

	.fbox-content
		padding-left: 90px


		h4
			margin: 0
			padding: 0 0 30px
			position: relative

			&:after
				content: ""
				position: absolute
				width: 20px
				height: 1px
				background: #ddd
				bottom: 15px
				left: 0



	&:hover
		.fbox-icon
			background: $main-color
			border-color: $main-color
			color: #fff


/* feature box 2 */
.feature-box.style-2
	text-align: center

	.fbox-icon
		float: none
		@extend .transition
		margin: 0 0 25px

		&.rotate
			top: 0
			left: 0


	.fbox-content
		padding: 0

		h4
			padding: 25px 0 20px
			position: relative

			&:after
				bottom: auto
				top: 0
				left: 50%
				margin-left: -10px


.feature-list
	margin: 0
	padding: 0

	li
		margin-top: 20px
		padding: 20px
		border: 1px solid #ddd
		position: relative
		@extend .transition

	h3
		padding: 0 0 30px 50px
		margin: 0
		@extend .transition

	.fbox-icon
		display: block
		width: 35px
		height: 40px
		line-height: 35px
		border-bottom: 1px solid #ddd
		color: $main-color
		text-align: center
		font-size: 32px
		position: absolute
		top: 15px
		left: 20px
		@extend .transition

	&.left
		text-align: right
		h3
			padding: 0 50px 30px 0

		.fbox-icon
			left: auto
			right: 20px

	li
		&:hover
			color: #fff
			background: $main-color
			border-color: $main-color
			h3 , .fbox-icon
				color: #fff

/* team member */
.team-member
	text-align: center

	img
		width: 100%

	.caption
		padding: 20px 5px
		position: relative
		@extend .transition

		h3 , span , p
			position: relative
			margin: 0 0 10px
			display: block
			top: 0
			@extend .transition

		span
			font-style: italic
			+opacity(0.8)
		p
			margin: 0
			

	.social-icons
		position: absolute
		top: 20px
		left: 0
		width: 100%
		+transform(scale(0))
		+opacity(0)
		@extend .transition


		a
			font-size: 24px
			color: #fff !important
			border: none
			background: transparent !important
			&:hover
				+opacity(0.8)

		&:after
			content: ""
			position: absolute
			width: 50px
			height: 1px
			background: #fff
			bottom: -10px
			left: 50%
			margin-left: -25px
			+opacity(0.8)


	&:hover
		.caption
			color: #fff
			background: $main-color

		.social-icons
			+transform(scale(1))
			+opacity(1)
		p
			+opacity(0)

		h3 , span
			top: 65px
			color: #fff


.twitter-carousel
	max-width: 750px
	margin: 0 auto
	text-align: center
	padding: 60px 0 50px
	position: relative

	&:before
		content: "\f099"
		font-family: "FontAwesome"
		font-size: 32px
		color: inherit
		position: absolute
		top: -10px
		left: 0
		width: 100%
		text-align: center

	p
		padding: 10px 60px
		margin: 0
		position: relative
		font-size: 16px

		&:before , &:after
			content: "\f10d"
			font-family: "FontAwesome"
			font-size: 32px
			color: inherit
			position: absolute
			top: 0 
			left: 10px

		&:after
			content: "\f10e"
			left: auto
			right: 10px

	.owl-controls
		bottom: 0


/* Testimonials */
.testimonial
	position: relative
	padding-left: 150px
	text-align: left
	margin-bottom: 30px

	.testimonial-image
		width: 100px
		position: absolute
		top: 0
		left: 0 

	.testimonial-content
		padding: 20px 25px
		border: 1px solid #e1e1e1
		background: #f7f7f7
		position: relative

		&:before , &:after
			position: absolute
			content: ''
			left: -33px
			top: -1px
			border: 33px solid transparent
			border-bottom-width: 0
			border-top-color: inherit

		&:after
			border-top-color: #f7f7f7
			margin: 1px 0 0 2px

	.testimonial-info
		margin: 0 0 15px
		h4
			margin: 0 0 4px
		small
			+opacity(0.8)

	&:last-child
		margin-bottom: 0


/* Facts */
.facts
	display: inline-block
	text-align: left
	.countup
		display: block
		font-size: 30px
		margin: 0 0 5px
		color: inherit
		padding: 0 0 0 40px

	strong

		padding: 0 0 0 40px
		text-transform: uppercase
		font-weight: normal

		i
			display: inline-block
			width: 30px
			height: 30px
			line-height: 30px
			text-align: center
			background: $main-color
			color: #fff
			font-size: 12px
			margin: 0 10px 0 -40px


/* skill */
.skill
	position: relative
	text-align: center

	.chart
		width: 200px
		height: 200px
		position: relative
		color: $main-color
		margin: 0 auto 20px
		border-color: rgba( $main-color ,  0.4 )

		span
			+position(absolute,0)
			display: block
			line-height: 200px
			text-align: center
			font-size: 50px
			margin: 0

			small
				font-size: 28px
				position: relative
				top: -10px

	h4
		margin: 0
		padding: 0 0 30px
		position: relative

		&:after
			content: ""
			position: absolute
			width: 20px
			height: 1px
			background: #ddd
			bottom: 15px
			left: 50%
			margin-left: -10px


/* accordion */
.accordion-item

	.accordion-title
		margin: 10px 0

		a
			color: #777
			background-color: #fff
			border: 1px solid #ededed
			padding: 10px 20px
			position: relative
			display: block

			&:hover
				border-color: $main-color
				color: $main-color

	.accordion-toggle
		position: absolute
		right: 15px
		top: 13px

	.accordion-content
		overflow: hidden

		> div
			padding: 15px

	&.active

		.accordion-title
			a
				background: $main-color
				border-color: $main-color
				color: #fff

		.accordion-toggle
			&:before
				content: "\f068"

.bg-secondary
	.accordion-item

		.accordion-title
			a
				background: #999
				border-color: #999
				color: #fff

				&:hover
					background: $main-color
					border-color: $main-color
					color: #fff
		&.active
			.accordion-title
				a
					background: $main-color
					border-color: $main-color
					color: #fff

/* Pricing table */
.pricing-table
	text-align: center
	background: #ebe9ea
	font-size: 16px
	color: rgba(#000, 0.6)

	ul
		margin: 0
		padding: 0

	li
		padding: 15px
		border-bottom: 1px solid rgba(#000, 0.1)

		&:first-child , &.pricing-details
			font-family: $primary-font
			letter-spacing: 2px
			text-transform: uppercase
			line-height: 1

		&:first-child
			font-size: 22px
			padding: 25px
			border-bottom-width: 2px

		&:last-child
			border-bottom: none
			padding: 20px

		&.pricing-details
			padding: 30px
			color: #333

			.pricing-price
				font-size: 28px
				display: block

			.pricing-time
				font-size: 14px
				display: block
				margin-top: 10px


	&.pricing-highlighted
		background: $main-color
		color: rgba(#fff, 0.8)
		li
			border-bottom-color: rgba(#fff, 0.2)
			&.pricing-details
				color: #fff

			.btn
				color:  $main-color
				background: #fff
				border-color: #fff
				&:hover
					color: #fff
					background-color: #333
					border-color: #333

/* clients */
.clients-carousel
	display: none
	padding: 0 0 50px
	position: relative

	.client
		text-align: center
		padding: 0 15px

		img
			display: inline-block
			width: auto
			max-width: 100%

	.owl-controls
		bottom: 0

.clients

	.clients-tabs
		margin: 0
		padding: 0
		font-size: 0
		text-align: center

		li
			display: inline-block
			+opacity(0.5)
			position: relative
			top: 0
			@extend .transition

			&.active
				+opacity(1)
				top: 20px
		img
			width: 120px

	.clients-content

		.tab-pane
			position: relative
			padding-top: 120px
			text-align: center

			&:before
				content: "\f10e"
				font-family: "FontAwesome"
				position: absolute
				top: 60px
				left: 0
				width: 100%
				color: $main-color
				font-size: 34px
				line-height: 1
				text-align: center