/* -------------------------------------
CSS: Index Page
----------------------------------------

#Fonts
#Global styles
#Spacing
#Content
#Typography
#Image

---------------------------------------- */


/* --------------------------
#Fonts
----------------------------- */

@font-face {
	font-family: 'Montserrat Light';
	src: url('../fonts/montserrat-300-light-webfont.woff2') format('woff2'), url('../fonts/montserrat-300-light-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat Regular';
	src: url('../fonts/montserrat-400-regular-webfont.woff2') format('woff2'), url('../fonts/montserrat-400-regular-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat Medium';
	src: url('../fonts/montserrat-500-medium-webfont.woff2') format('woff2'), url('../fonts/montserrat-500-medium-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat Semibold';
	src: url('../fonts/montserrat-600-semibold-webfont.woff2') format('woff2'), url('../fonts/montserrat-600-semibold-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}


/* --------------------------
#Global styles
----------------------------- */

* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
	box-sizing: border-box;
}

:focus {
	outline: -webkit-focus-ring-color auto 0;
}

html,
body {
	height: 100%;
	font-family: "Montserrat Light", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	letter-spacing: 0.6px;
	line-height: 1.7em;
	font-size: 12.5px;
	font-size: 1vw;
	color: #757880;
}

@media (max-width: 1200px) {
	html,
	body {
		font-size: 1.2vw;
	}
}

@media (max-width: 980px) {
	html,
	body {
		font-size: 1.8vw;
	}
}

@media (max-width: 750px) {
	html,
	body {
		font-size: 2.2vw;
	}
}

@media (max-width: 480px) {
	html,
	body {
		font-size: 3vw;
	}
}


/* All content fade in. */

@keyframes fadein {
	from {opacity: 0;}
	to {opacity: 1;}
}

@-moz-keyframes fadein {
	/* Firefox */
	from {opacity: 0;}
	to {opacity: 1;}
}

@-webkit-keyframes fadein {
	/* Safari and Chrome */
	from {opacity: 0;}
	to {opacity: 1;}
}

@-o-keyframes fadein {
	/* Opera */
	from {opacity: 0;}
	to {opacity: 1;}
}

@-ms-keyframes fadein {
	/* IE */
	from {opacity: 0;}
	to {opacity: 1;}
}

.animation-fadein {
	animation: fadein 2s;
	-moz-animation: fadein 2s;
	-webkit-animation: fadein 2s;
	-o-animation: fadein 2s;
	-ms-animation: fadein 2s;
}


/* --------------------------
#Content
----------------------------- */

.content-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

content {
    display: table-cell;
    vertical-align: middle;
	position: relative;
}


/* --------------------------
#Typography
----------------------------- */

h1 {
	position: absolute;
	margin: 2% 10% 2% 47%;
	font-family: "Montserrat Semibold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: normal;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.1em;
	color: #2f3033;
	font-size: 5.5em;
	font-size: 4.5vw;
	text-align: left;
}

@media (max-width: 1600px) {
	h1 {
		font-size: 4.5vw;
	}
}

@media (max-width: 1200px) {
	h1 {
		font-size: 4em;
		font-size: 4.5vw;
	}
}

@media (max-width: 980px) {
	h1 {
		position: relative;
		margin: 1% 10% 2%;
		text-align: center;
		font-size: 9vw;
	}
}

@media (max-width: 560px) {
	h1 {
		font-size: 3em;
		font-size: 9vw;
	}
}

@media (max-width: 480px) {
	h1 {
		margin: 1% 2% 2%;
		font-size: 2.5em;
		font-size: 10.5vw;
	}
}

section {
	position: absolute;
	top: 14.5vw;
	left: 71%;
	width: 40%;
}

@media (max-width: 1200px) {
	section {
		top: 14vw;
	}
}

@media (max-width: 980px) {
	section {
		position: static;
		top: auto;
		left: auto;
		margin-top: 2%;
		width: auto;
		text-align: center;
	}
}


/* --------------------------
#Image
----------------------------- */

.construction-site-image,
svg#construction-site-wrapper {
	position: relative;
    max-width: 80%;
}

@media (max-width: 980px) {
	.construction-site-image,
	svg#construction-site-wrapper {
		max-width: 100%;
	}
}


/* Excavator rolling movement. */

@keyframes excavator-roll {
    0%   {transform: translate(-90%,0);}
    50%  {transform: translate(10%,0);}
    100% {transform: translate(0,0);}
}

@-moz-keyframes excavator-roll {
	/* Firefox */
    0%   {transform: translate(-90%,0);}
    50%  {transform: translate(10%,0);}
    100% {transform: translate(0,0);}
}

@-webkit-keyframes excavator-roll {
	/* Safari and Chrome */
    0%   {transform: translate(-90%,0);}
    50%  {transform: translate(10%,0);}
    100% {transform: translate(0,0);}
}

@-o-keyframes excavator-roll {
	/* Opera */
    0%   {transform: translate(-90%,0);}
    50%  {transform: translate(10%,0);}
    100% {transform: translate(0,0);}
}

@-ms-keyframes excavator-roll {
	/* IE */
    0%   {transform: translate(-90%,0);}
    50%  {transform: translate(10%,0);}
    100% {transform: translate(0,0);}
}

#excavator {
	animation: excavator-roll 15s ease-in-out;
	-webkit-animation: excavator-roll 15s ease-in-out;
	-moz-animation: excavator-roll 15s ease-in-out;
	-o-animation: excavator-roll 15s ease-in-out;
	-ms-animation: excavator-roll 15s ease-in-out;
}


/* Excavator wobble. */

@keyframes excavator-wobble {
    0%   {transform: translate(0,0);}
    50%  {transform: translate(0,0.3%);}
    100% {transform: translate(0,0);}
}

@-moz-keyframes excavator-wobble {
	/* Firefox */
    0%   {transform: translate(0,0);}
    50%  {transform: translate(0,0.3%);}
    100% {transform: translate(0,0);}
}

@-webkit-keyframes excavator-wobble {
	/* Safari and Chrome */
    0%   {transform: translate(0,0);}
    50%  {transform: translate(0,0.3%);}
    100% {transform: translate(0,0);}
}

@-o-keyframes excavator-wobble {
	/* Opera */
    0%   {transform: translate(0,0);}
    50%  {transform: translate(0,0.3%);}
    100% {transform: translate(0,0);}
}

@-ms-keyframes excavator-wobble {
	/* IE */
    0%   {transform: translate(0,0);}
    50%  {transform: translate(0,0.3%);}
    100% {transform: translate(0,0);}
}

#excavator-wheels {
	animation: excavator-wobble 0.25s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.08s 60;
	-webkit-animation: excavator-wobble 0.25s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.08s 60;
	-moz-animation: excavator-wobble 0.25s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.08s 60;
	-o-animation: excavator-wobble 0.25s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.08s 60;
	-ms-animation: excavator-wobble 0.25s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.08s 60;
}

/* Discarded animation. */

/* #excavator-back {
	animation: excavator-wobble-back 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 50, excavator-wobble-back 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.5s 40, excavator-wobble-back 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-webkit-animation: excavator-wobble-back 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 50, excavator-wobble-back 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.5s 40, excavator-wobble-back 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-moz-animation: excavator-wobble-back 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 50, excavator-wobble-back 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.5s 40, excavator-wobble-back 0.1s cubic-bezier(0.250, 0.20, 0.750, 0.750) 15s 10;
	-o-animation: excavator-wobble-back 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 50, excavator-wobble-back 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.5s 40, excavator-wobble-back 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-ms-animation: excavator-wobble-back 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 50, excavator-wobble-back 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.5s 40, excavator-wobble-back 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
}

#excavator-arm {
	animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.025s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.525s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-webkit-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.025s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.525s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-moz-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.025s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.525s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-o-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.025s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.525s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-ms-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.025s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.525s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
}

#excavator-cab {
	animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.05s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.55s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-webkit-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.05s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.55s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-moz-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.05s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.55s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-o-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.05s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.55s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
	-ms-animation: excavator-wobble 0.15s cubic-bezier(0.250, 0.250, 0.750, 0.750) 0.05s 50, excavator-wobble 0.2s cubic-bezier(0.250, 0.250, 0.750, 0.750) 7.55s 40, excavator-wobble 0.1s cubic-bezier(0.250, 0.250, 0.750, 0.750) 15s 10;
} */