@import 'libs/vars';
@import 'libs/functions';
@import 'libs/mixins';
@import 'libs/vendor';
@import 'libs/breakpoints';
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,900');
@import url('font-awesome.min.css');

/*
	Big Picture by HTML5 UP
	html5up.net | @ajlkn
	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
*/

// Breakpoints.

	@include breakpoints((
		xxlarge: ( 1681px,  1920px ),
		xlarge:  ( 1281px,  1680px ),
		large:   ( 1001px,  1280px ),
		medium:  ( 737px,   1000px ),
		small:   ( 481px,   736px  ),
		xsmall:  ( null,    480px  )
	));

// Base.

	@import 'base/reset';
	@import 'base/page';
	@import 'base/typography';

// Component.

	@import 'components/box';
	@import 'components/button';
	@import 'components/form';
	@import 'components/icon';
	@import 'components/image';
	@import 'components/list';
	@import 'components/actions';
	@import 'components/icons';
	@import 'components/section';
	@import 'components/table';
	@import 'components/poptrox-popup';
	@import 'components/gallery';

// Layout.

	@import 'layout/header';
	@import 'layout/main';
	@import 'layout/footer';

/* Intro */

	#intro {
		background: url('images/overlay.png'), url('../../images/intro.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, bottom center;
		background-repeat: repeat, no-repeat;
	}

/* One */

	#one {
		background: url('images/overlay.png'), url('../../images/one.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
	}

/* Two */

	#two {
		background: url('images/overlay.png'), url('../../images/two.jpg');
		background-size: 256px 256px, cover;
		background-attachment: fixed, fixed;
		background-position: top left, center center;
	}

/* Contact */

	#contact {
		overflow: hidden;
		padding-bottom: 0;

		.box {
			@include vendor('transition', 'transform #{_duration(fade-in)} ease');
			@include vendor('transform', 'translateY(0)');
			position: relative;
		}

		&.inactive {
			.box {
				@include vendor('transform', 'translateY(100%)');
			}
		}

		@include breakpoint('<=small') {
			.box {
				padding: 1.5em 1.5em 2em 1.5em;
			}
		}

		@include breakpoint('<=xsmall') {
			.box {
				padding: 1em 1em 2em 1em;
			}
		}
	}