.button
	display: inline-block
	border: none
	color: #fff
	text-decoration: none
	background-color: $accent
	padding: 15px 45px
	font-size: 13px
	text-transform: uppercase
	font-weight: 600
	letter-spacing: 3px
	border-radius: 3px
	text-align: center
	position: relative
	outline: none
	transition: background-color .1s ease
	&::after
		transition: background-color .2s ease
		padding: absolute
		content: ''
		height: 4px
		bottom: 0
		width: 100%
		background-color: darken($accent, 50%)
		opacity: .18
		border-bottom-left-radius: 2px
		border-bottom-right-radius: 2px
		left: 0
	&:focus, &:hover
		text-decoration: none
		color: #fff
	&:hover
		background-color: lighten($accent, 5%)
		&::after
			opacity: .22
	&:active
		background-color: darken($accent, 5%)
		&::after
			opacity: .32
	&.button-white
		background-color: #fff
		color: #444
		&::after
			background-color: #e6e6e6
		&:hover
			&::after
				background-color: rgba(#000, .2)

@import "vars"

/*==========  Desktop First  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px)
	/**/

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px)
	/**/


/* Small Devices, Tablets */
@media only screen and (max-width : 768px)
	/**/


/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px)
	/**/

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px)
	/**/

/*==========  Mobile First  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px)
	/**/


/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px)
	/**/


/* Small Devices, Tablets */
@media only screen and (min-width : 768px)
	/**/


/* Medium Devices, Desktops */
@media only screen and (min-width : 992px)
	/**/


/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px)
	/**/