$separator-color:			$theme-color !default
$social-icon-color:			#d5d5d5 !default
$social-icon-hover-color:	#fff !default
$social-icon-hover-bg:		$theme-color !default

$list-bullet-color:			$theme-highlight-color !default

// helpers classes
.amy-flex
	display: flex

.amy-show
	display: block

.amy-hide
	display: none

.amy-inner
	float: left
	position: relative
	width: 100%

.amy-align-left
	text-align:	left

.amy-align-right
	text-align: right

.amy-align-center
	text-align: center

.amy-inline-block
	display: inline-block

.amy-float-none
	float: none

// padding
.amy-no-padding
	padding-top: 0
	padding-bottom: 0

.amy-xs-padding
	padding-top: 10px
	padding-bottom: 10px

.amy-sm-padding
	padding-top: 20px
	padding-bottom: 20px

.amy-md-padding
	padding-top: 40px
	padding-bottom: 40px

.amy-lg-padding
	padding-top: 80px
	padding-bottom: 80px

.amy-xl-padding
	padding-top: 160px
	padding-bottom: 160px

.amy-padding-30
	padding-top: 30px
	padding-bottom: 30px

.amy-padding-50
	padding-top: 50px
	padding-bottom: 50px

.amy-padding-60
	padding-top: 60px
	padding-bottom: 60px

.amy-padding-100
	padding-top: 100px
	padding-bottom: 100px

// margin
.amy-no-margin
	margin-top: 0
	margin-bottom: 0

.amy-xs-margin
	margin-top: 10px
	margin-bottom: 10px

.amy-sm-margin
	margin-top: 20px
	margin-bottom: 20px

.amy-md-margin
	margin-top: 40px
	margin-bottom: 40px

.amy-lg-margin
	margin-top: 80px
	margin-bottom: 80px

.amy-xl-margin
	margin-top: 160px
	margin-bottom: 160px

.amy-margin-30
	margin-top: 30px
	margin-bottom: 30px

.amy-margin-50
	margin-top: 50px
	margin-bottom: 50px

.amy-margin-60
	margin-top: 60px
	margin-bottom: 60px

.amy-margin-100
	margin-top: 100px
	margin-bottom: 100px

// sections
.amy-dark-bg
	background-color: $theme-color

.amy-section
	background-repeat: no-repeat
	background-position: center center

.amy-section-curved
	position: relative

	&:after
		position: absolute
		left: 0
		right: 0
		bottom: 0
		background: url(../images/frontend/curved-bg.png) no-repeat bottom center
		content: ""
		height: 30px

// lists
.amy-social-icons a
	font-size: 13px
	display: inline-block
	color: $social-icon-color
	border: 1px solid $social-icon-color
	border-radius: 50%
	width: 30px
	height: 30px
	line-height: 30px
	text-align: center
	vertical-align: middle

	&:hover
		color: $social-icon-hover-color
		background: $social-icon-hover-bg
		border-color: $social-icon-hover-color

ul,
ol
	padding-left: 15px

	li
		margin-bottom: 10px
		position: relative

.amy-list,
.amy-list-with-icon,
.amy-list-with-image
	&, ul
		list-style: none
		padding: 0

	li
		padding-left: 15px
		margin-bottom: 10px

		&:before
			position: absolute
			left: 0
			content: '•'
			color: $list-bullet-color


ol.amy-list
	counter-reset: li

	li
		padding-left: 25px

		&:before
			content: counter(li, decimal-leading-zero)
			counter-increment: li


.amy-list-with-icon li:before,
.amy-list-with-image li:before
	content: ""

.amy-list-with-icon li
	padding-left: 20px

	a
		margin-left: 10px

	i.fa
		color: $list-bullet-color
		position: absolute
		left: 0
		font-size: 14px
		line-height: $line-height-base

.amy-list-with-image li
	position: relative
	min-height: 30px
	padding-left: 50px
	margin-bottom: 10px

	a
		display: block

		img
			position: absolute
			left: 0
			top: 0
			max-height: 100%
			max-width: 30px



// effects
@keyframes amyFadeIn
	from
		opacity: 0
	to
		opacity: 1

@keyframes amyFadeOut
	from
		opacity: 1
	to
		opacity: 0

.amy-fade-in
	@include animation(amyFadeIn ease-in .3s)

.amy-fade-out
	opacity: 0
	@include animation(amyFadeOut ease-out .5s)