/* Fonts */

@font-face {
	/* http://www.elegantthemes.com/blog/resources/elegant-icon-font */

	font-family: "ElegantIcons";
	src:url("../fonts/ElegantIcons.eot");
	src:url("../fonts/ElegantIcons.eot?#iefix") format("embedded-opentype"),
		url("../fonts/ElegantIcons.woff") format("woff"),
		url("../fonts/ElegantIcons.ttf") format("truetype"),
		url("../fonts/ElegantIcons.svg#ElegantIcons") format("svg");
	font-weight: normal;
	font-style: normal;
}

/* Layout */

body {
	min-width: 320px;
	font: 1.4rem "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
	background: #fcfaf5;
	margin: 0;
	-webkit-font-smoothing: antialiased;
}

/* Generic Components */

h1,
h2 {
	margin-bottom: -10px;
}

h1 {
	font-size: 3.5rem;
	font-weight: 500;
	color: #000;
	text-transform: uppercase;
}

h2 {
	font-size: 2.5rem;
	font-weight: 400;
}

a {
	color: inherit;
	text-decoration: none; /* TODO: update since links become invisible! */
	transition: color .2s, border-color .2s;
}

a:hover {
	color: #fff;
}

.link {
    color: #000;
    border-bottom: solid 1px transparent;
}

.link:hover {
    color: inherit;
    border-color: #000;
}

.button {
	font-size: 1.4rem;
	font-weight: 300;
	color: inherit;
	background: none;
	border: solid 1px #444;
	border-radius: 4px;
	padding: 10px 50px;
	cursor: pointer;

	transition: color .2s,
				background-color .2s,
				border-color .2s;
}

.button:hover {
	color: #fcfaf5;
	background-color: #444;
}

.button:active {
	color: #fcfaf5;
	border-color: #000;
	background-color: #000;
}

.divider {
	width: 20px;
	border-bottom: solid 1px #939393;
	margin: 40px auto 30px;
}

.divider.long {
	width: 200px;
	border-color: #ddd;
}

.container {
	max-width: 900px;
	padding: 20px;
	margin: 0 auto;
	overflow: hidden;
}

.content {
	max-width: 400px;
	float: left;
}

header p,
.content p {
	color: #777;
}

/* Icons */

.icon {
	color: #e8e8e8;
	font-family: "ElegantIcons";
	font-size: 4rem;
}

.icon.scroll-action {
	transition: opacity .4s;
}

.icon.scroll-action:after {
	content: "\33";
}

.started .icon.scroll-action,
.no-js .icon.scroll-action {
	opacity: 0;
}

/* Header */

header {
	font-size: 1.6rem;
	text-align: center;
}

header .logo {
	width: 25%;
	min-width: 140px;
	margin-bottom: 30px;
}

header h1 {
	margin-top: -20px;
}

/* Content */

main {
	margin-top: -95px;
}

section {
	margin: 50px;
}

section aside {
	width: 400px;
	height: 400px;
	float: right;

	/* Animation properties */
	margin-right: -60px;
	transform: rotate(30deg);
}

section:nth-child(even) .content {
	float: right;
}

section:nth-child(even) aside {
	float: left;

	/* Animation properties */
	margin-right: 0;
	margin-left: -60px;
	transform: rotate(-30deg)
}

/* Footer */

footer {
	color: #939393;
	text-align: center;
	background: #272727;
	border-top: solid 1px #ddd;
}

footer .contact .button {
	border-color: #939393;
}

footer .contact .button:hover {
	color: #272727;
	border-color: #fcfaf5;
	background-color: #fcfaf5;
}

footer .contact .button:active {
	color: #272727;
	border-color: #fff;
	background-color: #fff;
}

footer .container > p {
	font-size: 1rem;
}

footer .logo {
	width: 40px;
	height: 40px;
	fill: #939393;

	transition: fill .2s;
}

footer .logo:hover {
	fill: #fff;
}

/* Animations */

section .content h2,
section .content p,
section .content .button,
section .divider,
section aside {
	opacity: 0;
	transition: opacity 1s,
				padding .8s,
				margin .8s,
				transform .8s,
				color .2s,
				border-color .1s,
				background .1s;
}

section.loaded .content h2,
section.loaded .content p,
section.loaded .content .button,
section.loaded .divider,
section.loaded aside,
.no-js section .content h2,
.no-js section .content p,
.no-js section .content .button,
.no-js section .divider,
.no-js section aside {
	opacity: 1;
}

section .content h2,
section .content p {
	padding-top: 20px;
}

section.loaded .content h2,
section.loaded .content p,
.no-js section .content h2,
.no-js section .content p {
	padding-top: 0;
}

section.loaded aside,
.no-js section aside {
	margin-right: 0;
	margin-left: 0;
	transform: rotate(0deg);
}

/* Consulting */

section.consulting aside {
	background: url(../img/connect-logo.svg) no-repeat 50%;
	background-size: 80%;
}

/* Platforms */

section.platforms aside {
	/* Animation properties */
	margin-right: 0;
	margin-left: 0;
	transform: rotate(0deg);
	transform: scale(1.2);
}

section.platforms.loaded aside,
.no-js section.platforms aside {
	transform: scale(1);
}

section.platforms aside .pass {
	width: 250px;
	height: 100%;
	background-repeat: no-repeat;
	background-size: contain;
	margin-left: -125px;
	position: absolute;
	left: 50%;

	transition: left 1s;
}

section.platforms aside .pass.one {
	background-image: url(../img/pass-01.png);
	z-index: 1;
}

section.platforms aside .pass.two {
	background-image: url(../img/pass-02.png);
}

section.platforms aside .pass.three {
	background-image: url(../img/pass-03.png);
}

section.platforms aside .pass:not(.one) {
	transform: scale(.9);
}

section.platforms.loaded aside .pass.two,
.no-js section.platforms aside .pass.two {
	left: 25%;
}

section.platforms.loaded aside .pass.three,
.no-js section.platforms aside .pass.three {
	left: 75%;
}

/* Apps */

section.apps aside {
	width: 320px;
	height: 320px;
	background: url(../img/apps.png);
	background-size: 250%;
	background-position-x: 0%;
	border-radius: 50%;
}

section.apps.loaded aside,
.no-js section.apps aside {
	animation: appsScroll 20s linear infinite;
}

@keyframes appsScroll {
	100% {
		background-position-x: 167%;
	}
}

/* Responsive */

@media (max-width: 1000px) {
	body {
		font-size: 1.3rem;
	}

	h1 {
		font-size: 2.5rem;
	}

	h2 {
		font-size: 1.6rem;
	}

	.button {
		font-size: 1.2rem;
	}

	header {
		font-size: 1.4rem;
	}

	section aside {
		width: 220px;
		height: 220px;
		margin-top: 30px;
	}

	section.platforms aside .pass {
		margin-left: -80px;
	}

	section.apps aside {
		width: 180px;
		height: 180px;
	}
}

@media (max-width: 800px) {
	.container {
		display: -webkit-box;
		display: -moz-box;
		display: box;

		-webkit-box-orient: vertical;
		-moz-box-orient: vertical;
		box-orient: vertical;
	}

	.divider {
		margin: 30px auto 20px;
	}

	section {
		margin: 40px 20px;
	}

	section .content {
		text-align: center;
		margin: 0 auto;
		float: none !important;

		-webkit-box-ordinal-group: 2;
		-moz-box-ordinal-group: 2;
		box-ordinal-group: 2;
	}

	section .content h2 {
		margin: 0;
	}

	section aside,
	section:nth-child(even) aside {
		float: none;
	}

	section aside {
		margin-top: 30px;
		transition: opacity 1s,
					margin .8s;

		-webkit-box-ordinal-group: 1;
		-moz-box-ordinal-group: 1;
		box-ordinal-group: 1;
	}

	section.loaded aside,
	.no-js section aside {
		margin: 0 auto 30px;
	}

	section.consulting aside {
		background-size: 100%;
	}

	section.apps aside {
		width: 250px;
		height: 250px;
	}

	footer .copyright {
		margin: 0;
	}
}

/* Page */

.page h2 {
	font-size: 1.17em;
	font-weight: bold;
}

.page h3 {
	font-size: 1.1rem;
	font-weight: bold;
	color: #777;
	margin-top: 30px;
}

.page header .container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.page header .title h2 {
	font-size: 1.1rem;
	font-weight: 400;
	color: #777;
	margin-top: -15px;
}

.page header h1 {
	margin: 0;
}

.page header .logo {
	min-width: 80px;
	width: 80px;
	height: 80px;
	background-image: url('../img/icon-1.png');
	background-size: 100%;
	border-radius: 16px;
	margin-right: 20px;
	margin-bottom: 0;
}

.page header .logo,
.page header h1 {
	display: inline-block;
}

.page header h2 {
	margin-top: -10px;
}

.page main {
	margin: 0;
}

.page .content {
	max-width: none;
}

.page .content p {
	font-size: 1.1rem;
}

.page section.loaded {
	margin: 20px;
}

.page section.loaded .divider.long {
	margin: 0 auto;
}

.page p.image {
	width: 80%;
	border-radius: 4px;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
	padding: 0;
	margin: 0 auto;
	text-align: center;
	overflow: hidden;
}

.page p.image img {
	width: 100%;
}

/* Page — Responsive */

@media (max-width: 800px) {
	.page h3 {
		margin: 0 0 -10px;
	}

	.page header .container {
		flex-direction: column;
	}

	.page header .logo {
		margin: 0;
	}

	.page header h1 {
		font-size: 2.1rem;
	}

	.page header .title h2 {
		margin-top: -5px;
	}

	.page section .content {
		text-align: left;
	}

	.page section.loaded .divider.long {
		margin: -25px auto 0;
	}
}

/* Shout It */

.shout-it header .logo {
	background-image: url('../img/icon-2.png');
}

.shout-it section {
    text-align: center;
}

.shout-it section.loaded {
    margin-top: 0;
}

.shout-it section.loaded .content p {
    padding: 20px 0;
}

.shout-it .container {
    max-width: 500px;
}

.shout-it .ribbon {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 500;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);
    padding: 5px 40px;
    display: inline-block;
    box-sizing: border-box;
}

.shout-it .ribbon:hover {
    color: inherit;
}

.shout-it footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}

/* Shout It — Responsive */

@media (max-height: 800px) {
	.shout-it footer {
        position: relative;
    }
}

@media (max-width: 800px) {
	.shout-it section .content {
		text-align: center;
	}
}


/* Not Found */

.not-found header .logo {
	background-image: url('../img/logo.svg');
}

.not-found section {
    text-align: center;
}

.not-found section.loaded {
    margin-top: 0;
}

.not-found section.loaded .content p {
    padding: 20px 0;
}

.not-found .container {
    max-width: 500px;
}

.not-found footer {
    width: 100%;
    position: absolute;
    bottom: 0;
}

/* Not Found — Responsive */

@media (max-height: 700px) {
	.not-found footer {
        position: relative;
    }
}

@media (max-width: 800px) {
	.not-found section .content {
		text-align: center;
	}
}