/* CSS Document */

/* --------------------------
	Base Styles
--------------------------- */
/* Paste this css to your style sheet file or under head tag */
/* This only works with JavaScript, 
if it's not present, don't show loader */
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999999;
	background: #fafafa;
}

.square {
	width: 2em;
	height: 2em;
	border: 4px solid #2B2E4A;
	position: relative;
	top: 50%;
	left: 50%;
	margin-left: -1em;
	animation: introLoading 4s ease infinite;
	-webkit-animation: introLoading 4s ease infinite;	
	-moz-animation: introLoading 4s ease infinite;
	-o-animation: introLoading 4s ease infinite;
}
.square-inner {
	width: 100%;
	background-color: #2B2E4A;
	display: inline-block;
	vertical-align: top;
	-webkit-animation: introLoadingInner 4s ease-in infinite;	
	-moz-animation: introLoadingInner 4s ease-in infinite;
	-o-animation: introLoadingInner 4s ease-in infinite;
	animation: introLoadingInner 4s ease-in infinite;
}
.animating-section {
	  opacity: 0;
	  -moz-transition: all 700ms ease-out;
	  -webkit-transition: all 700ms ease-out;
	  -o-transition: all 700ms ease-out;
	  transition: all 700ms ease-out;
	  -moz-transform: translate3d(0px, 200px, 0px);
	  -webkit-transform: translate3d(0px, 200px, 0px);
	  -o-transform: translate(0px, 200px);
	  -ms-transform: translate(0px, 200px);
	  transform: translate3d(0px, 200, 0px);
	  -webkit-backface-visibility: hidden;
	  -moz-backface-visibility: hidden;
	  backface-visibility: hidden;
}
.animating-section.in-view {
	  opacity: 1;
	  -moz-transform: translate3d(0px, 0px, 0px);
	  -webkit-transform: translate3d(0px, 0px, 0px);
	  -o-transform: translate(0px, 0px);
	  -ms-transform: translate(0px, 0px);
	  transform: translate3d(0px, 0px, 0px);
}


* {
	box-sizing: border-box;
}

body {
	margin: 0;
	color: #333;
}

form,
input,
textarea,
h1,
h2,
h3
{
	font-family: 'Montserrat', sans-serif;
	/*font-family: Arial, Helvetica, sans-serif;*/
	/*font-family: 'Source Sans Pro', sans-serif;*/
	/*font-family: 'Droid Sans', sans-serif;*/
	/*font-family: 'PT Sans', sans-serif;*/
	text-decoration: none;
}
p,
span {
	font-family: 'PT Serif', serif;
}
.red-text {
	color : #E84545;
}

.white-text {
	line-height: 1.2em;
	font-size: 4em;
	letter-spacing: 0.05em;
	color: #fff;
}

h2 {
	line-height: 1.35em;
	font-size: 1.6em;
}

.sans-serif {
	font-family: 'Montserrat', sans-serif;
	/*line-height: 1.2em;
	font-size: 1em;*/
	margin: 0;
}
.serif {
	font-family: 'PT Serif', serif;
	/*line-height: 1.2em;
	font-size: 1em;*/
	margin: 0;
}

a {
	cursor: pointer;
	text-decoration: none;
	color: #000;
}

.bg {
	background: rgba(54,68,91,.8);
}
.intro-wrapper {
	/*background: rgb(5,26,55);
	/*background: rgb(52,73,93);*/
}
.intro-wrapper-2 {
	/*background: rgb(189,195,199);*/
}

#menu-list,
#test {

}



/* --------------------------
	Scrollbar
--------------------------- */

/*
.scrollbar {
    position: fixed;
    z-index: 9999;
    white-space: nowrap;
    font-size: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.scrollbar li a {
	width: 5px;
	display: block;
	height: 100%;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: none;
}
.scrollbar li.active a {
	background: #ff303f;
}
*/
/* --------------------------
	Overlay Menu
--------------------------- */
.modal-menu{
	display:none;
	background-color: #FFFFFF;
	position:fixed;
	left:0;
	top:0;
	bottom:0;
	right:0;
	border: 1em solid #E84545;
	z-index: 98;
}

.modal-menu nav {
	position: relative;
	top: 0%;
	height: 50%;
	text-align: center;
	z-index: 11;
	-webkit-transform: translateY(50%);
    transform: translateY(50%);
}

.modal-menu ul{
	width: 100%;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	display: inline-block;
	height: 100%;
	position: relative;
}

.modal-menu ul li {
	width: 100%;
	display: table;
/*	min-height: 60px;*/
}
.modal-menu ul li:hover {
	background-color: #2B2E4A;
	-webkit-transition: all 0.55s ease-in-out;
	transition: all 0.55s ease-in-out;
}

.modal-menu ul li a {
	width: 100%;
	display: inline-block;
    vertical-align: middle;
    font-size: 3em;
    text-decoration: none;
/*    transition: transform .2s ease-in-out;*/
}
.modal-menu ul li:first-child {
	-webkit-animation: links-1 .8s ease-in;
	-moz-animation: links-1 .8s  ease-in;
	-o-animation: links-1 .8s  ease-in;
	animation: links-1 .8s  ease-in;
}
.modal-menu ul li:nth-child(2) {
	-webkit-animation: links-2 .8s  ease-in;
	-moz-animation: links-2 .8s  ease-in;
	-o-animation: links-2 .8s  ease-in;
	animation: links-2 .8s  ease-in;
}
.modal-menu ul li:nth-child(3) {
	-webkit-animation: links-3 .8s  ease-in;
	-moz-animation: links-3 .8s  ease-in;
	-o-animation: links-3 .8s  ease-in;
	animation: links-3 .8s  ease-in;
}
.modal-menu ul li a:hover {
	color: #FFFFFF;
	text-decoration: line-through;	
	-webkit-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
/*	transform: translate3d();
	transform: translate3d(0px, -150px, 0px);*/
}
.modal-menu ul li a:active {
	text-decoration: line-through;
}


/* --------------------------
	Float Clearfix
--------------------------- */

.group:after {
  content: " ";
  display: table;
  clear: both;
}

/* --------------------------
	Main Layout
--------------------------- */

.main-wrapper {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
    z-index: 9;
	overflow: hidden;
}
.wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
/*.project-wrapper {
	position: absolute;
	z-index: 15;
}*/
.text-container {
	opacity: 1;
	/*transform: translateY(100%);*/
	transition: transform 1s 1s, opacity 1s;
	position: relative;
	top: 35%;
	left: 7.5%;
	max-width: 75%;
}
.text-container h2 {
	text-transform: uppercase;
	color: #E84545;
}
.text-container p {
	margin-left: 1em;
	margin-bottom: 1.2em;
	color: #fafafa;
}
.border {
	position: fixed;
	height: 100%;
	width: 100%;
	background: transparent;
	padding: 1em;
}
.inner-border {
	width: 100%;
	height: 100%;
	/*border: 1px solid #53354A;*/
	border: 1px solid #AB9E62;
	opacity: .80;
}
#slide-1{
/*	background-color: #2B2E4A;*/
	/*background:linear-gradient(140deg, #2B2E4A 70%, #53354A 30%);	*/
	/*background-color: #181a1b;
	/*background:linear-gradient(140deg, #665178 70%, #A9CDC3 30%);*/
	/*background-color: #665178;*/
	background: url(../img/bg-7.jpg) center center no-repeat;
	background-size: cover;
}
#slide-2 {
	background: url(../img/bg-limbo-2.jpg) center center no-repeat;
	background-size: cover;
}
#slide-3 {
	background: url(../img/bg-granacontrol-4.jpg) center center no-repeat;
	background-size: cover;
}
#slide-4 {
	background: url(../img/bg-casarural-3.jpg) center center no-repeat;
	background-size: cover;
}
.bg-scaled {
	-webkit-animation: bgScaled 15s ease-out infinite;
	-moz-animation: bgScaled 15s ease-out infinite;
	-o-animation: bgScaled 15s ease-out infinite;
	animation: bgScaled 15s ease-out infinite;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}
/*
.inner-wrapper-intro {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 15px;
}
.intro-wrapper {
	position: relative;
	display: table;
    width: 100%;
    height: 100vh;
	background: #000 url(../img/bg.jpg) center center no-repeat;
	background-size: cover;
    text-align: center;
    overflow: hidden;
}
.portfolio-wrapper {
	position: relative;
	display: table;
    width: 100%;
    height: 100vh;
	background: #000 url(../img/bg-limbo.png) center center no-repeat;
	background-size: cover;
    text-align: center;
    overflow: hidden;
}
*/


.inner-wrapper-intro {
	max-width: 80%;
	position: absolute;
	left: 7.5%;
	top: 30%;
	text-align: left;
}

.header {
	position: fixed;
	z-index: 99;
	width: 100%;
	padding: 1em 0px;
	margin: 0 auto;
}


.icon-menu,
.icon-logo {
	margin: 18px auto;
	text-align: center;
	display: inline-block;
}

.icon-logo {
	margin-left: 7.5%;
}
.icon-menu {
	float: right;
    margin-top: 30px;
	margin-right: 7.5%;
}

.logo-outline {
	stroke: #FFFFFF;
	stroke-width: 10;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	-webkit-animation: offset 3s linear 1s forwards;
	-moz-animation: offset 3s linear 1s forwards;
	-o-animation: offset 3s linear 1s forwards;
	animation: offset 3s linear 1s forwards;
}

.logo-letters-header {
	stroke: #FFFFFF;
	stroke-width: 1;
  	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	-webkit-animation: offset 1.5s linear forwards,fill-it 1.5s .5s forwards;
	-moz-animation: offset 1.5s linear forwards,fill-it 1.5s .5s forwards;
	-o-animation: offset 1.5s linear forwards,fill-it 1.5s .5s forwards;
	animation: offset 1.5s linear forwards,fill-it 1.5s .5s forwards;
}

.logo-line {
	stroke: #FFFFFF;
	stroke-width: 10;
  	stroke-dasharray: 400;
	stroke-dashoffset: 400;
	-webkit-animation: offset 4s linear .75s forwards;
	-moz-animation: offset 4s linear .75s forwards;
	-o-animation: offset 4s linear .75s forwards;
	animation: offset 4s linear .75s forwards;
}

.logo-intro {
	-webkit-animation: loadingLogo 1s linear forwards;
	-moz-animation: loadingLogo 1s linear forwards;
	-o-animation: loadingLogo 1s linear  forwards;
	animation: loadingLogo 1s linear forwards;
}

/* --------------------------
	Next-page Button
--------------------------- */
/*.scrollbar nav{
    position: fixed;
    z-index: 9999;
    white-space: nowrap;
    font-size: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

.scrollbar li a {
	width: 5px;
	display: block;
	height: 100%;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: none;
}
.scrollbar li.active a {
	background: #ff303f;
}

*/
a {
    text-decoration: none;
}

.scrollbar nav {
    position: absolute;
    display: block;
    top: 12%;
    width: 1px;
    bottom: 0;
    right: 7.8%;
    z-index: 10;
}

.scrollbar nav ul {
    list-style: none;
    text-align: center;
    height: 100%;
}

.scrollbar nav ul li {
    margin-right: 20px;
    height: 20%;
}

.scrollbar nav ul li:first-child {
	width: 1px;
	background: #E84545;
	margin-bottom: 10px;
	margin-left: -10px;
}

.scrollbar nav ul li:last-child {
    margin-right: 0;
}

#back-to-tutorial {
    margin-left: 100px;
}

.scrollbar nav a {
    font-weight: normal;
    text-align: center;
    display: block;
    width: 20px;
	padding: 15px 0;
	border-top: 1px solid #CCC;
    right: 7.75%;
    position: absolute;

}

.scrollbar nav a.active {
    border-top: 1px solid #E84545;
    width: 100px;
    padding: 10px;
	margin-right: -40px;
}

/*
.scrollbar nav a.active.nth-child(1):before {
	color: #fafafa;
	width: 100px;
	position: absolute;
	right: -50%;
	content:"0";
}
*/
a#limbo.active:before {
	color: #E84545;
	content:"Mr.Limbo";
	-webkit-animation: fade 1s  ease-in;
	-moz-animation: fade 1s  ease-in;
	-o-animation: fade 1s  ease-in;
	animation: fade 1s  ease-in;
}

a#granacontrol.active:before {
	color: #E84545;
	content:"Granacontrol";
	-webkit-animation: fade 1s  ease-in;
	-moz-animation: fade 1s  ease-in;
	-o-animation: fade 1s  ease-in;
	animation: fade 1s  ease-in;
}

a#rural.active:before {
	color: #E84545;
	content:"CasaRural";
	-webkit-animation: fade .25s  ease-in;
	-moz-animation: fade .25s  ease-in;
	-o-animation: fade .25s  ease-in;
	animation: fade .25s  ease-in;	
}

div.text-container.active {
	opacity: 1;
	transform: translateY(0);
	transition: all 1s 1s;
}
.go-prev, .go-next {
    cursor: pointer;
    font-weight: bold;
	z-index: 100;
	color: #E84545;
}

.go-prev {
	width: 100px;
	background: transparent;
	position: absolute;
	text-align: center;
	top: 6%;
	left: 50%;
	margin-left: -50px;	
}
.go-next {
	width: 100px;
	height: 1px;
	background: transparent;
	position: absolute;
	left: 50%;
	top: 85%;
	text-align: center;
	margin-left: -50px;
	-webkit-animation: arrow 3s  ease-in-out infinite;
	-moz-animation: arrow 3s  ease-in-out infinite;
	-o-animation: arrow 3s  ease-in-out infinite;
	animation: arrow 3s  ease-in-out infinite;	
}
.go-next-projects {
	width: 40px;
	height: 1px;
	background: transparent;
	text-align: center;
	margin-left: -20px;
}
.go-next-projects svg {
	-webkit-animation: arrow 3s  ease-in-out infinite;
	-moz-animation: arrow 3s  ease-in-out infinite;
	-o-animation: arrow 3s  ease-in-out infinite;
	animation: arrow 3s  ease-in-out infinite;
}

.go-next-projects:hover {
	border: 1px solid #E84545;
	-webkit-transition: all 0.25s ease-in;
	transition: .25s ease-in;
	height: 75px;
}

span.projects {
	position: absolute;
	top: 88%;
	left: 50%;
	width: 40px;
	margin-left: -42px;
	letter-spacing: 0.05em;
	font-size: 1em;
	color: #666;
}
.hidden {
	visibility: hidden;
}
.visit-project {
	padding: 12px 20px;
	text-align: center;
	/*background-color: #AB9E62;*/
	border: 2px solid #FFFFFF;
	margin-left: 1em;
	color: #fafafa;
	font-family: 'Montserrat', sans-serif;
}
.visit-project:hover {
	background: #E84545;
	-webkit-transition: all .5s;
	transition: all .5s;
	border-color: #E84545;
}

/*.go-next:hover {
	border: 2px solid rgb(241, 90, 90);
	transition: .5s ease-in;
}
span.go-next svg:hover {
	stroke: #F15A5A;
	transition: .5s ease-in;
}

/*
.next-page {
	height: 50px;
	margin-left: -25px;
	position: absolute;
	bottom: 0;
	left: 50%;
	cursor: pointer;
}
.next-page i {
	color: #999;
	font-size: 4em;
}

.next-page i:hover {
	color: rgb(241, 90, 90);
	transition: .5s ease-in;
}

#work1 {

}


/* --------------------------
	Media Queries
--------------------------- */
@media (min-width: 1px) and (max-width: 479px) {
	#slide-1 {
		background: url(../img/bg-vertical.jpg) center center no-repeat;
		background-size: cover;
	}
	.white-text {
		line-height: 1.3em;
		font-size: 2em;
		letter-spacing: 0.05em;
		color: #fff;
	}
	.modal-menu ul li a {
		font-size: 2em;
	}
	.go-next-projects {
		position: absolute;
		left: 50%;
		top: 80%;
	}

	span.projects {
		position: absolute;
		top: 85%;
		left: 50%;
	}
	.icon-logo svg {
		width: 40px;
		height: 40px;
		margin: 5px auto 0px;
	}
	.scrollbar {
		display: none;
	}

}
@media (min-width: 480px) and (max-width: 767px) {
	.white-text {
		line-height: 1em;
		font-size: 2.1em;
		letter-spacing: 0.05em;
		color: #fff;
	}
	.modal-menu ul li a {
		font-size: 2.5em;
	}
	.inner-wrapper-intro {
		top: 40%;
	}
	.go-next-projects {
		top: 70%;
		left: 50%;
	}

	span.projects {
		top: 76%;
	}
	.scrollbar {
		display: none;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	h2 {
		font-size: 2em;
	}
	#slide-1 {
		background: url(../img/bg-vertical.jpg) center center no-repeat;
		background-size: cover;
	}	
	.inner-wrapper-intro {
		top: 40%;
	}
	.white-text {
		line-height: 1.2em;
		font-size: 4em;
		letter-spacing: 0.05em;
		color: #fff;
	}
	.go-next-projects {
		top: 80%;
		left: 50%;
	}

	span.projects {
		top: 80%;
	}
	.scrollbar {
		display: none;
	}
	.text-container {
		max-width: 50%;
		top: 50%;
	}
}

@media (min-width: 1024px) and (max-width: 1199px) {
	h2 {
		font-size: 2em;
	}	
	.inner-wrapper-intro {
		top: 40%;
	}
	.go-prev,
	.go-next {
		display: none;
	}	
	.go-next-projects {
		top: 80%;
		right: 7.5%;
		display: block !important;
	}

	span.projects {
		top: 80%;
	}
	.scrollbar nav {
    	top: 10%;
	}
	.text-container {
		max-width: 40%;
		top: 60%;
	}
	.modal-menu ul li a {
		padding: 10px;
	}
}

@media (min-width: 1200px) and (max-width: 1749px){
	h2 {
		font-size: 2.2em;
	}
	.inner-wrapper-intro {
		top: 40%;
	}
	.go-next-projects {
		top: 85%;
		right: 7.5%		
	}

	span.projects {
		top: 85%;
	}
	.go-prev,
	.go-next {
		display: none;
	}
	#projects {
		display: block;
	}
	.text-container {
		max-width: 30%;
		top: 65%;		
	}
	.modal-menu ul li a {
		padding: 10px;
		font-size: 3em;
	}
}

@media (min-width: 1750px) {
	h2 {
		font-size: 2.5em;
	}	
	.inner-wrapper-intro {
		top: 40%;
	}
	.go-next-projects {
		top: 85%;
		right: 7.5%;		
	}

	span.projects {
		top: 85%;
	}
	.go-prev,
	.go-next {
		display: none;
	}
	#projects {
		display: block;
	}
	.text-container {
		max-width: 25%;
		top: 70%;		
	}
	.modal-menu ul li a {
		padding: 10px;
		font-size: 3em;
	}	
}

/* --------------------------
	Keyframes
--------------------------- */

@keyframes offset {
  100% { stroke-dashoffset: 0; }
}
@keyframes fill-it {
  100% { fill: #FFFFFF; }
}
@-webkit-keyframes arrow {
	0% { 
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
	50% { 		
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		-o-transform: translateY(-8px);
		transform: translateY(-8px);   
	}
	100% { 		
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
}
@-moz-keyframes arrow {
	0% { 
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
	50% { 		
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		-o-transform: translateY(-8px);
		transform: translateY(-8px);   
	}
	100% { 		
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
}
@-o-keyframes arrow {
	0% { 
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
	50% { 		
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		-o-transform: translateY(-8px);
		transform: translateY(-8px);   
	}
	100% { 		
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
}
@keyframes arrow {
	0% { 
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
	50% { 		
		-webkit-transform: translateY(-8px);
		-moz-transform: translateY(-8px);
		-o-transform: translateY(-8px);
		transform: translateY(-8px);   
	}
	100% { 		
		-webkit-transform: translateY(0);
		-moz-transform: translateY(0);
		-o-transform: translateY(0);
		transform: translateY(0);  
	}
}
@-webkit-keyframes links-1 {
	0% { 
		-webkit-transform: translateX(-40px); opacity: .1;
		-moz-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-moz-keyframes links-1 {
	0% { 
		-webkit-transform: translateX(-40px); opacity: .1;
		-moz-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-o-keyframes links-1 {
	0% { 
		-webkit-transform: translateX(-40px); opacity: .1;
		-moz-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}

@keyframes links-1 {
	0% { 
		-webkit-transform: translateX(-40px); opacity: .1;
		-moz-transform: translateX(-40px);
		-o-transform: translateX(-40px);
		transform: translateX(-40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}

@-webkit-keyframes links-2 {
	0% { 
		-webkit-transform: translateX(40px); opacity: .1;
		-moz-transform: translateX(40px);
		-o-transform: translateX(40px);
		transform: translateX(40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-moz-keyframes links-2 {
	0% { 
		-webkit-transform: translateX(40px); opacity: .1;
		-moz-transform: translateX(40px);
		-o-transform: translateX(40px);
		transform: translateX(40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-o-keyframes links-2 {
	0% { 
		-webkit-transform: translateX(40px); opacity: .1;
		-moz-transform: translateX(40px);
		-o-transform: translateX(40px);
		transform: translateX(40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}

@keyframes links-2 {
	0% { 
		-webkit-transform: translateX(40px); opacity: .1;
		-moz-transform: translateX(40px);
		-o-transform: translateX(40px);
		transform: translateX(40px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}

@-webkit-keyframes links-3 {
	0% { 
		-webkit-transform: translateX(-20px); opacity: .1;
		-moz-transform: translateX(-20px);
		-o-transform: translateX(-20px);
		transform: translateX(-20px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-moz-keyframes links-3 {
	0% { 
		-webkit-transform: translateX(-20px); opacity: .1;
		-moz-transform: translateX(-20px);
		-o-transform: translateX(-20px);
		transform: translateX(-20px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-o-keyframes links-3 {
	0% { 
		-webkit-transform: translateX(-20px); opacity: .1;
		-moz-transform: translateX(-20px);
		-o-transform: translateX(-20px);
		transform: translateX(-20px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}

@keyframes links-3 {
	0% { 
		-webkit-transform: translateX(-20px); opacity: .1;
		-moz-transform: translateX(-20px);
		-o-transform: translateX(-20px);
		transform: translateX(-20px); 
	}
	100% { 
		-webkit-transform: translateX(0px); opacity: 1;
		-moz-transform: translateX(0px);
		-o-transform: translateX(0px);
		transform: translateX(0px); 
	}
}
@-webkit-keyframes fade {
	0% { 
		opacity: 0; 
	}
	100% { 
		opacity: 1; 
	}
}
@-moz-keyframes fade {
	0% { 
		opacity: 0; 
	}
	100% { 
		opacity: 1; 
	}
}
@-o-keyframes fade {
	0% { 
		opacity: 0; 
	}
	100% { 
		opacity: 1; 
	}
}
@keyframes fade {
	0% { 
		opacity: 0; 
	}
	100% { 
		opacity: 1; 
	}
}
@-webkit-keyframes bgScaled {
	0% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
	50% {-webkit-transform: scale(1.1, 1.1);
		-moz-transform: scale(1.1, 1.1);
		-o-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1);
	}
	100% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
}
@-moz-keyframes bgScaled {
	0% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
	50% {-webkit-transform: scale(1.1, 1.1);
		-moz-transform: scale(1.1, 1.1);
		-o-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1);
	}
	100% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
}
@keyframes bgScaled {
	0% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
	}
	50% {-webkit-transform: scale(1.1, 1.1);
		-moz-transform: scale(1.1, 1.1);
		-o-transform: scale(1.1, 1.1);
		transform: scale(1.1, 1.1);
	}
	100% {-webkit-transform: scale(1,1);
		-moz-transform: scale(1,1);
		-o-transform: scale(1,1);
		transform: scale(1,1);
 	}
}

@-webkit-keyframes introLoading {
	0% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}	
	25% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% { 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-moz-keyframes introLoading {
	0% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}	
	25% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% { 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-o-keyframes introLoading {
	0% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}	
	25% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% { 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes introLoading {
	0% { 
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}	
	25% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	50% { 
		-webkit-transform: rotate(180deg);
		-moz-transform: rotate(180deg);
		-o-transform: rotate(180deg);
		transform: rotate(180deg);
	}
	75% { 
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes introLoadingInner {
	0% {
    	height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
    	height: 100%;
	}
  	75% {
    	height: 100%;
  	}
  	100% {
    	height: 0%;
  	}
}
@-moz-keyframes introLoadingInner {
	0% {
    	height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
    	height: 100%;
	}
  	75% {
    	height: 100%;
  	}
  	100% {
    	height: 0%;
  	}
}
@-o-keyframes introLoadingInner {
	0% {
    	height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
    	height: 100%;
	}
  	75% {
    	height: 100%;
  	}
  	100% {
    	height: 0%;
  	}
}
@keyframes introLoadingInner {
	0% {
    	height: 0%;
	}
	25% {
		height: 0%;
	}
	50% {
    	height: 100%;
	}
  	75% {
    	height: 100%;
  	}
  	100% {
    	height: 0%;
  	}
}