//
//	Aerial by HTML5 UP
//	html5up.net | @n33co
//	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
//

$bg:						#348cb2 url("images/bg.jpg") bottom left;
$bg-width:					1500px;

$color-bg:					#fff;
$color-fg:					#fff;
$color-nav-icon-hover-bg:	rgba(255,255,255,0.175);
$color-nav-icon-hover-fg:	#fff;
$color-nav-icon-active-bg:	rgba(255,255,255,0.35);
$color-nav-icon-active-fg:	#fff;

$duration-bg:				60s;
$duration-wrapper:			3s;
$duration-overlay:			1.5s;
$duration-header:			1s;
$duration-nav-icons:		0.5s;

$delay-wrapper:				$duration-wrapper - 1s;
$delay-overlay:				$delay-wrapper - 0.5s;
$delay-header:				$delay-overlay + $duration-overlay - 0.75s;
$delay-nav-icons:			$delay-header + $duration-header - 1s;
$delay-nav-icon:			0.25s;

$size-nav-icon-wrapper:		5.35em;
$size-nav-icon:				1.75em;

@mixin bg($width) {
	@include vendor-keyframes('bg') {
		0%		{ @include vendor-property('transform', 'translate3d(0,0,0)'); }
		100%	{ @include vendor-property('transform', 'translate3d(#{$width * -1},0,0)'); }
	}

	#bg {
		background-size: $width auto;
		width: ($width * 3);
	}
}