body {
		/* background-image: url(assets/images/background-top.jpg); */
	}

	header {
		-webkit-transition: margin-top 400ms ease-out;
	    -moz-transition: margin-top 400ms ease-out;
	    -ms-transition: margin-top 400ms ease-out;
	    -o-transition: margin-top 400ms ease-out;
	    transition: margin-top 400ms ease-out;
	}

	header.hide-header {
		margin-top: -200px !important;
	}


	/* override for IE8 width */

	main.container {
		max-width: 100% !important;
	}


	/*************************************************************
		PRELOADER
	*************************************************************/

	.preloader-overlay {
		position: fixed; 
		top: 0; right: 0; bottom: 0; left: 0; 
		z-index: 999;
		background-color: #a7e1c7; 
	}

	.preloader {
		width: 200px;
		height: 80px;
		line-height: 80px;
		position: fixed;
		top: 50%;
		left: 50%;
		margin-top: -40px;
		margin-left: -100px;

		font-family: 'knockout', 'Knockout 48 A', 'Knockout 48 B'; 
		font-size: 5em;
		font-weight: 400; 
		font-style: normal;
		text-align: center; 
		color: #FFF;

		-webkit-font-smoothing: antialiased;
		text-shadow: 0px 0px 14px #68c4a1;

	}

	.lt-ie10 .preloader {
		background-color: #cccccc;
		padding: 20px 0;
        /* filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
        		dropshadow(color=#68c4a1, offx=1, offy=1); */
        filter: progid:DXImageTransform.Microsoft.Chroma(color=#cccccc) progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#68c4a1, offx=1, offy=1) !important;
	}


	/*************************************************************
		MAIN PARALLAX STYLES
	*************************************************************/

	/*------------- GENERAL CLASSES --------------*/


	.animated-elements {
		width: 1000px;
		margin: 0 auto;
	}
	/* add backface if it's not an iOS device to prevent memory crash stuff. May have to do the same in the js for Android */
	.backface .animated-elements *, .no-backface .tree, .no-backface .bindi, .no-backface .hand, .no-backface .bin-back {
		-webkit-backface-visibility: hidden; /* Chrome and Safari */
		-moz-backface-visibility: hidden; /* Firefox */
		-ms-backface-visibility: hidden; /* Internet Explorer */
		backface-visibility: hidden;
		-webkit-perspective: 1000;
		perspective: 1000; 
	}
	.backface .background-container {
		-webkit-backface-visibility: visible; /* Chrome and Safari */
		-moz-backface-visibility: visible; /* Firefox */
		-ms-backface-visibility: visible; /* Internet Explorer */
		backface-visibility: visible;
	}

	.sky {
		background-color: #9ee3c7;
	}

	.rotate-center-bottom {
		transform-origin: center bottom;
		-ms-transform-origin: center bottom; /* IE 9 */
		-webkit-transform-origin: center bottom; /* Safari and Chrome */
	}

	.rotate-left-center {
		transform-origin: left center;
		-ms-transform-origin: left center; /* IE 9 */
		-webkit-transform-origin: left center; /* Safari and Chrome */
	}

	.plastic-bag {
		transform-origin: 13px 70px;
		-ms-transform-origin: 13px 70px; /* IE 9 */
		-webkit-transform-origin: 13px 70px; /* Safari and Chrome */
	}

	.flip {
	    -moz-transform: scaleX(-1) !important;
	    -o-transform: scaleX(-1) !important;
	    -webkit-transform: scaleX(-1) !important;
	    transform: scaleX(-1) !important;
	    /* filter: FlipH;
	    -ms-filter: "FlipH"; */
	}


	/*---------- TEXT BOX AND GENERAL TEXT ----------*/

	h2 {
		font-family: 'knockout', 'Knockout 48 A', 'Knockout 48 B'; font-weight: 400; font-style: normal;
		font-size: 1.8em;
		margin: 0;
	}

	h3 {
		font-family: 'knockout', 'Knockout 48 A', 'Knockout 48 B'; font-weight: 400; font-style: normal;
		font-size: 3.2em;
		margin: 0;
	}

	h4 {
		font-family: 'knockout', 'Knockout 48 A', 'Knockout 48 B'; font-weight: 400; font-style: normal;
		font-size: 1.3em;
		margin: 0 0 15px 0;
	}

	p {
		font-family: 'Open Sans', sans-serif;
		font-size: 1em;
		margin-bottom: 0;
	}

	h2 a {
		color: #FFF;
	}
	h2 a:hover {
		color: #ccec9f;
	}

	.councils {
		width: 700px;
		left: 50%;
		margin-left: -350px;
		text-align: center;
		font-size: 1.7em;

		position: fixed; 
		top: 160%;
		bottom: -160%;
		margin-top: -180px; 
		z-index: 99999999;
	}

	.councils img {
		-webkit-backface-visibility: visible; /* Chrome and Safari */
		-moz-backface-visibility: visible; /* Firefox */
		-ms-backface-visibility: visible; /* Internet Explorer */
		backface-visibility: visible;
	}

	@media only screen and (max-height: 650px and max-width: 500px) {
		.councils {
			max-width: 500px;
			left: 50%;
			margin-left: -250px;
		}
	}

	@media only screen and (max-width: 760px) {
		.councils {
			width: 90% !important;
			margin-left: -45% !important;
		}
	}

	.final-text {
		width: 600px;
		left: 50%;
		margin-left: -240px;
		text-align: center;
		font-size: 1.7em;

		position: fixed; 
		top: 160%; 
		margin-top: -180px; 
		z-index: 99999999;
	}

	.final-text p {
		font-size: 0.7em;
		color: #FFF;
	}

	.final-text a {
		color: #FFF;
	}

	.final-text h2, .final-text h3, .councils h2 {
		color: #FFF;
		line-height: 1em;
		-webkit-font-smoothing: antialiased;
	}

	.final-text h3 {
		line-height: 0.9em;
		margin-bottom: 10px;
	}

	.text-box.solid h2 {
		color: #149503;
	}

	.text-box.feature h2 {
		color: #767476;
		font-size: 2.5em;
		line-height: 0.84em;
		-webkit-font-smoothing: antialiased;
		text-shadow: 0px 0px 14px #68c4a1;
		padding-top: 20px;
	}

	.text-box.feature p {
		font-size: 0.9em;
		line-height: 1.4em;
		margin-top: 14px;
		color: #767476;
		text-shadow: 0px 0px 5px #68c4a1;
		font-weight: 500;
	}

	.lt-ie10 .text-box.feature p, .lt-ie10 .text-box.feature h2 {
		background-color: #cccccc;
        /* filter: progid:DXImageTransform.Microsoft.Chroma(Color=#cccccc)
        		dropshadow(color=#68c4a1, offx=1, offy=1); */
        filter: progid:DXImageTransform.Microsoft.Chroma(color=#cccccc) progid:DXImageTransform.Microsoft.Alpha(opacity=100) progid:DXImageTransform.Microsoft.dropshadow(color=#68c4a1, offx=1, offy=1) !important;
	}

	.text-box {
		padding: 22px;
		-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
		-moz-box-sizing: border-box;    /* Firefox, other Gecko */
		box-sizing: border-box;         /* Opera/IE 8+ */
	}

	.text-box.solid {
		width: 280px;
		position: absolute;
		background-color: rgb(255,255,255); 
		background-color: rgba(255,255,255,0.9); 
		z-index: 99999;
		text-align: center;
		font-size: 0.8em;
	}

	.text-box.left {
		left: 50%; 
		margin-left: -40%;
	}

	.text-box.right {
		right: 50%; 
		margin-right: -40%;
	}

	.text-box.center {
		left: 50%; 
		margin-left: -140px;
	}

	.float-left {
		left: 50%; 
		margin-left: -448px;
	}

	.text-box.feature {
		width: 100%;
		position: absolute;
		top: 40px; 
		text-align: center;
		font-size: 1.5em;
		padding-top: 0px;
	}

	.lt-ie9 .final-text-box {
		position: relative !important;
		top: 8740px !important;
		left: 50% !important; 
		margin-left: -55% !important;
	}

	@media only screen and (max-width: 1100px) {
		.float-left {
			left: 50%; 
			margin-left: -40%;
		}
	}

	.ie8-media-1100 .lt-ie9 .final-text-box {
		left: 50% !important; 
		margin-left: -55% !important;
	}

	@media only screen and (max-width: 480px) { 
		.text-container .text-box.solid  {
			left: 50%;
			right: auto;
			margin-left: -140px;
			margin-right: 0;
		}

		.text-container .text-box.feature {
			top: 88px !important;
		}

		.text-container .text-box.feature br  {
			display: none;
		}
		.final-text-box {
			left: 50%;
			margin-left: -140px !important;
		}
		.final-text {
			width: 280px;
			margin-left: -140px;
			font-size: 1.7em;
			margin-top: -40%; 
		}
		.mobile-fact {
			top: 1000px !important;
		}
	}

	.fadein {
		opacity: 0;
		-webkit-transition: opacity 0.5s ease; /* Safari 4+ */
		-moz-transition:    opacity 0.5s ease; /* Fx 5+ */
		-o-transition:      opacity 0.5s ease; /* Opera 12+ */
		transition:         opacity 0.5s ease; /* IE 10+ */
	}

	.fadein.display {
		opacity: 1;
	}

	.back-to-top-container {
		position: fixed;
		width: 100%;
		height: 80px;
		bottom: 0;
		cursor: pointer;
		display: none;
	}

	.back-to-top-container:hover > .back-to-top {
		opacity: 1 !important;
	}

	.back-to-top {
		width: 110px;
		position: fixed;
		left: 50%;
		bottom: 30px;
		margin-left: -55px;
		font-size: 1.45em;
		line-height: 18px;
		color: #FFFFFF;
		-webkit-font-smoothing: antialiased;
		font-family: 'knockout', 'Knockout 48 A', 'Knockout 48 B'; font-weight: 400; font-style: normal;
		opacity: 0;
	}

	.back-to-top img {
		width: 20px;
		vertical-align: top;
		margin-right: 6px;
	}


	@media only screen and (max-width: 1000px) {
		.factory {
			background-image: none !important;
		}
	}

	.lt-ie9 .background-container {
		overflow-x: hidden;
		height: 10560px !important;
	}

	.lt-ie9 .ie8-crop {
		width: 100%; 
		height: 10560px; 
		position: absolute; 
		overflow: hidden;
	}

	.ie8-grass {
		display: none;
	}

	.lt-ie9 .ie8-grass {
		display: block;
		filter: FlipV;
	    -ms-filter: "FlipV";
	    DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
	}

	/* Mobile image override test */
	@media only screen and (max-width: 400px) {
		.start-grass, .final-grass { background-image: url(../../images/animation/grass-mobile.jpg) !important; }
		.factory-middle { background-image: url(../../images/animation/background-middle-mobile.jpg) !important; }
	}

	/* Quick fix to alow the menu to display in full. */
	section.body {
		min-height: 310px !important;
	}

	/*************************************************************
		Super quick TEXT ONLY overrides
	*************************************************************/

	.text-only .animated-elements, .text-only .background-container, .text-only .text-container, .text-only .text-display {
		position: relative !important;
	}

	.text-only .text-display, .text-only .text-display > div {
		width: auto !important;
		background-color: transparent;
		position: relative !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		margin-top: auto !important;
		margin-left: 10px !important;
		margin-right: 10px !important;
		text-align: left;
	}

	.text-only .final-text-box, .text-only .final-text {
		margin-left: auto !important;
		margin-right: auto !important;
		max-width: 1120px;
	}

	.text-only .final-text > * {
		padding: 0 30px;
	}

	.text-only .text-box.feature.text-display {
		position: relative !important;
		top: auto !important;
		margin-top: auto !important;
	}

	.text-only h2, .text-only h3, .text-only p, .text-only a {
		text-shadow: none !important;
		background-color: transparent;
        filter: none;
        color: #000 !important;
	}

	.text-only h2 {
		font-size: 3em;
	}

	.text-only p {
		font-size: 1.5em;
	}

	.text-only .final-text p {
		font-size: 1em;
		padding-bottom: 40px;
		margin-top: 10px;
	}

	.text-only .background-container {
		height: auto !important;
		overflow: auto !important;
		position: relative !important;
	}

	.text-only .animated-elements {
		overflow: hidden;
	}

	.text-only .councils {
		padding: 20px;
	}

	.lt-ie9 .text-only .ie8-crop, .lt-ie9.text-only .ie8-crop {
		width: 100%; 
		height: auto; 
		position: relative !important;
	}

	.text-alternative {
		width: 20px; 
		height: 20px; 
		position: absolute; 
		top: -102px;
		left: 50%; 
		margin-left: 300px; 
		z-index: 9999999999999;
	}

	.text-alternative img {
		cursor: pointer;
	}

	.text-alternative .grey {
		display: none;
		width: 17px;
	}

	.text-alternative .brown {
		display: block;
		width: 10px;
	}

	.lt-ie9 .text-alternative {
		top: -74px !important;
	}

	@media only screen and (max-width: 767px) {
		.text-alternative {
			top: -71px;
			left: 50px !important;
			right: 40px;
			margin-left: 0 !important;
		}
		.text-alternative .grey {
			display: block;
		}
		.text-alternative .brown {
			display: none;
		}
	}

	@media only screen and (max-width: 991px) {
		.text-alternative {
			left: 50%; 
			margin-left: 174px; 
		}
	}



	/*************************************************************
		KEYFRAME ANIMATIONS
	*************************************************************/

	/*---------- CLASSES ----------*/

	.sway {
		-webkit-animation: SWAY 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Safari 4+ */
		-moz-animation:    SWAY 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Fx 5+ */
		-o-animation:      SWAY 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Opera 12+ */
		animation:         SWAY 8s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* IE 10+ */
	}
	.sway-slower {
		-webkit-animation: SWAY 12s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Safari 4+ */
		-moz-animation:    SWAY 12s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Fx 5+ */
		-o-animation:      SWAY 12s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* Opera 12+ */
		animation:         SWAY 12s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite; /* IE 10+ */
	}
	.sway-reverse {
		-webkit-animation: SWAY-REVERSE 6s infinite; /* Safari 4+ */
		-moz-animation:    SWAY-REVERSE 6s infinite; /* Fx 5+ */
		-o-animation:      SWAY-REVERSE 6s infinite; /* Opera 12+ */
		animation:         SWAY-REVERSE 6s infinite; /* IE 10+ */
	}
	.move-plant {
		-webkit-animation: MOVE-PLANT 10s infinite; /* Safari 4+ */
		-moz-animation:    MOVE-PLANT 10s infinite; /* Fx 5+ */
		-o-animation:      MOVE-PLANT 10s infinite; /* Opera 12+ */
		animation:         MOVE-PLANT 10s infinite; /* IE 10+ */
	}
	.bindi .wing .disabled {
		-webkit-animation: WING 6s infinite; /* Safari 4+ */
		-moz-animation:    WING 6s infinite; /* Fx 5+ */
		-o-animation:      WING 6s infinite; /* Opera 12+ */
		animation:         WING 6s infinite; /* IE 10+ */

		transform-origin: right 26px;
		-ms-transform-origin: right 26px; /* IE 9 */
		-webkit-transform-origin: right 26px; /* Safari and Chrome */
	}

	/*---------- KEYFRAMES ----------*/

	/* SWAY */
	@-webkit-keyframes SWAY {
		0%, 100% { 
		  	-webkit-transform: translateX(-10px) rotate(0deg);
		  	transform: translateX(-10px) rotate(0deg); 
		}
		50% { 
		  	-webkit-transform: translateX(10px) rotate(-1deg); 
			transform: translateX(10px) rotate(-1deg); 
		}
	}
	@-moz-keyframes SWAY {
		0%, 100% { 
		  	-moz-transform: translateX(-10px) rotate(0deg); 
			transform: translateX(-10px) rotate(0deg); 
		}
		50% { 
		  	-moz-transform: translateX(10px) rotate(-1deg);  
			transform: translateX(10px) rotate(-1deg); 
		}
	}
	@-o-keyframes SWAY {
		0%, 100% { 
			-o-transform: translateX(-10px) rotate(0deg); 
			transform: translateX(-10px) rotate(0deg); 
		}
		50% { 
			-o-transform: translateX(10px) rotate(-1deg); 
			transform: translateX(10px) rotate(-1deg); 
		}
	}
	@keyframes SWAY {
		0%, 100% { 
		  	-webkit-transform: translateX(-10px) rotate(0deg); 
		  	-moz-transform: translateX(-10px) rotate(0deg); 
			-ms-transform: translateX(-10px) rotate(0deg); 
			-o-transform: translateX(-10px) rotate(0deg); 
			transform: translateX(-10px) rotate(0deg); 
		}
		50% { 
		  	-webkit-transform: translateX(10px) rotate(-1deg); 
		  	-moz-transform: translateX(10px) rotate(-1deg); 
			-ms-transform: translateX(10px) rotate(-1deg); 
			-o-transform: translateX(10px) rotate(-1deg); 
			transform: translateX(10px) rotate(-1deg); 
		}
	}

	/* SWAY REVERSE */
	@-webkit-keyframes SWAY-REVERSE {
		0%, 100% { 
		  	-webkit-transform: translateX(-10px) rotate(-3deg); 
			transform: translateX(-10px) rotate(-3deg); 
		}
		50% { 
		  	-webkit-transform: translateX(10px) rotate(3deg); 
			transform: translateX(10px) rotate(3deg); 
		}
	}
	@-moz-keyframes SWAY-REVERSE {
		0%, 100% { 
		  	-moz-transform: translateX(-10px) rotate(-3deg); 
			transform: translateX(-10px) rotate(-3deg); 
		}
		50% { 
		  	-moz-transform: translateX(10px) rotate(3deg); 
			transform: translateX(10px) rotate(3deg); 
		}
	}
	@-o-keyframes SWAY-REVERSE {
		0%, 100% { 
			-o-transform: translateX(-10px) rotate(-3deg); 
			transform: translateX(-10px) rotate(-3deg); 
		}
		50% { 
			-o-transform: translateX(10px) rotate(3deg); 
			transform: translateX(10px) rotate(3deg); 
		}
	}
	@keyframes SWAY-REVERSE {
		0%, 100% { 
		  	-webkit-transform: translateX(-10px) rotate(-3deg); 
		  	-moz-transform: translateX(-10px) rotate(-3deg); 
			-ms-transform: translateX(-10px) rotate(-3deg); 
			-o-transform: translateX(-10px) rotate(-3deg); 
			transform: translateX(-10px) rotate(-3deg); 
		}
		50% { 
		  	-webkit-transform: translateX(10px) rotate(3deg); 
		  	-moz-transform: translateX(10px) rotate(3deg); 
			-ms-transform: translateX(10px) rotate(3deg); 
			-o-transform: translateX(10px) rotate(3deg); 
			transform: translateX(10px) rotate(3deg); 
		}
	}

	/* MOVE PLANT */
	@-webkit-keyframes MOVE-PLANT {
		0%, 100% { 
		  	-webkit-transform: rotate(-2deg); 
			transform: rotate(-2deg); 
		}
		50% { 
		  	-webkit-transform: rotate(2deg); 
			transform: rotate(2deg); 
		}
	}
	@-moz-keyframes MOVE-PLANT {
		0%, 100% { 
		  	-moz-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
		  	-moz-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}
	@-o-keyframes MOVE-PLANT {
		0%, 100% { 
			-o-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
			-o-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}
	@keyframes MOVE-PLANT {
		0%, 100% { 
		  	-webkit-transform: rotate(-3deg); 
		  	-moz-transform: rotate(-3deg); 
			-ms-transform: rotate(-3deg); 
			-o-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
		  	-webkit-transform: rotate(3deg); 
		  	-moz-transform: rotate(3deg); 
			-ms-transform: rotate(3deg); 
			-o-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}

	/* BINDI WING */
	@-webkit-keyframes WING {
		0%, 100% { 
	        -webkit-transform: scale(1,1);
	        transform: scale(1,1);
		}
		50% { 
		  	-webkit-transform: scale(0.8,-1);
	        transform: scale(0.8,-1);
		}
	}
	@-moz-keyframes MOVE-PLANT {
		0%, 100% { 
		  	-moz-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
		  	-moz-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}
	@-o-keyframes MOVE-PLANT {
		0%, 100% { 
			-o-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
			-o-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}
	@keyframes MOVE-PLANT {
		0%, 100% { 
		  	-webkit-transform: rotate(-3deg); 
		  	-moz-transform: rotate(-3deg); 
			-ms-transform: rotate(-3deg); 
			-o-transform: rotate(-3deg); 
			transform: rotate(-3deg); 
		}
		50% { 
		  	-webkit-transform: rotate(3deg); 
		  	-moz-transform: rotate(3deg); 
			-ms-transform: rotate(3deg); 
			-o-transform: rotate(3deg); 
			transform: rotate(3deg); 
		}
	}