/* 
You are viewing the work of The Jedi knight designer Arvid over at Pinevision.se. 
This CSS document is divided into sections for easy navigation and editing.
- If you (yes, im looking at you!) are going to alter the content of this document, don't be an a-hole, comment your code!
- If you are unsure when editing, comment out the old code and save it for safe keeping.
- Remember to use the UI Style Guide for epage. It'll save alot of time.

Website version: R2D2 1.0

* Import fonts
* Html and body setup
* General text settings
* Wrappers and base grid setup
	* Wrappers & containers
	* Grid
* Preset colors
* General good to haves
* Sign-in bubble	
* Topbar
	* Topbar when scrolled
* Megaman-menu
* Screen one
* Screen two
* Screen three
* Screen four
* Screen five
* Make it responsive
* Jedi mind tricks
* Lets add some fonts
	
 */


/* *** Import fonts *** */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,800); /* Open sans goes for anyting and everything around epage */


/* *** Html and body setup *** */
html {
	background: #fff;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;	
}
body {
	width: 100%;
	font-family: 'Open Sans', Arial, Verdana,Tahoma,Sans-serif;
	color:#333;
	font-size: 18px;
	margin: 0 0 0 0;
	overflow-y: scroll; /* has to be scroll, not auto */
	-webkit-overflow-scrolling: touch;	
}
body * {
	margin: 0;
	padding: 0;
}


/* *** General text settings ***  */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Open Sans', Arial, Verdana,Tahoma,Sans-serif;
	font-weight: 800; 
	line-height: 120%; 
	padding: 0px 0px 20px 0px;
}
h1 {color: #3c85d6; font-size: 2.5em;}
h2 {color: #3c85d6; font-size: 1.8em;}
h3 {color: #3c85d6; font-size: 1.5em;}
h4 {color: #3c85d6; font-size: 1.2em;}
h5 {color: #3c85d6; font-size: 1em;}
h6 {color: #3c85d6; font-size: 0.80em;}
p {
	color: #333;
	font-size: 18px;
	line-height: 200%;
	font-weight: 300;
	padding: 0px 0px 30px 0px;
}
a {color: #666; text-decoration: none;}
b {font-weight: 400;}
.text-center {text-align: center;}
.text-justify {text-align: justify;}
.text-right {text-align: right;}
.text-left {text-align: left;}
.text-ingress {
	font-size: 1.2em; 
	font-family: 'Open Sans', Arial, Verdana,Tahoma,Sans-serif;
}
.text-big {font-size: 1.5em;}

::selection {background: #3c85d6; color: #fff;}
::-moz-selection {background: #3c85d6; color: #fff;}


/* *** Wrappers and base grid setup *** */
/* Wrappers & containers */
.wrapper {
	width: 100%;
	margin-top: 75px 0px 0px 0px;
	padding: 0px;
}
.pagecontainer {
	width: 100%;
	margin: 0px;
	padding: 0px;
}
.contentwrapper {
	padding: 3%
}

/* Grid.
This is pretty simple, 
One set with margins and one without.
Then use media querys to transfer nicely down to them small screens
*/
.onecol,
.twocol,
.threecol,
.fourcol,
.twothreecol,
.fivecol,
.sixcol,
.sevencol,
.eightcol {
	margin: 2% 2%;
}
.eighty {
	margin: 4% 4%;
}
.onecol {width: 96%;}
	.col-1 {width: 100%;}
.twocol {width: 46%; float: left;}
	.col-2 {width: 50%; float: left;}
.threecol {width: 29.33%; float: left;}
	.col-3 {width: 33.33%; float: left;}
.twothreecol {width: 62.66%; float: left;}
	.col-2-3 {width: 66.66%; float: left;}
.fourcol{width: 21%; float: left;}
	.col-4 {width: 25%; float: left;}
.fivecol {width: 16%; float: left;}
	.col-5 {width: 20%; float: left;}
.sixcol {width: 12.66%; float: left;}
	.col-6 {width: 16.66%; float: left;}
.sevencol {width: 10.28%; float: left;}
	.col-7 {width: 14.28%; float: left;}
.eightcol {width: 8.5%; float: left;}
	.col-8 {width: 12.5%; float: left;}
.ninecol {width: 7.11%; float: left;}
	.col-9 {width: 11.11%; float: left;}
.tencol {width: 6%; float: left;}
	.col-10 {width: 10%; float: left;}
.eighty, .col-80 {width: 80%; margin: 0 auto;}


/* *** Preset colors *** */
.white-bg {background: #fff;}
.white-color {color: #fff;}
.black-bg {background: #101010;}
.black-color {color: #101010;}
.red-bg { background: #e05d6f;}
.red-color { color: #e05d6f;}


/* *** General good to haves *** */
.imgresize {width: 100%; height: auto;}
img {border: 0; margin-bottom: -5px;}
.clear {clear: both;}
.imgcenter {
	margin: 0 auto;
	display: block;
	max-width: 100%;
	height: auto;
	margin-top: 2%;
	margin-bottom: 2%;
}
.align-center {margin: 0 auto; display:block;}


/* *** sign in bubble *** */
.sign-in-btn, .sign-up-btn {cursor: pointer;}
.sign-in-bubble, .sign-up-bubble {
	background: #4cdd98;
	position: fixed;
	z-index: 99999;
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: 0px 0px 100px rgba(0,0,0,0.2);	
}
.sign-in-bubble > .bubble-content, .sign-up-bubble > .bubble-content {
	display: none;
	height: 1px;
	width: 1px;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.show-bubble {
	display: block!important;
	height: 650px!important;
	height: 650px!important;
	opacity: 1!important;
	zoom: 1!important;
	-webkit-animation:	show-bubble 1s ease-in; /* Safari 4+ */
	-moz-animation:	show-bubble 1s ease-in; /* Fx 5+ */
	-o-animation:	show-bubble 1s ease-in; /* Opera 12+ */
	animation:	show-bubble 1s ease-in; /* IE 10+, Fx 29+ */	
}
.hide-bubble {
	height: 1px!important;
	width: 1px!important;
	opacity: 0!important;
	zoom: 0!important;
	-webkit-animation:	hide-bubble .5s ease-in; /* Safari 4+ */
	-moz-animation:	hide-bubble .5s ease-in; /* Fx 5+ */
	-o-animation:	hide-bubble .5s ease-in; /* Opera 12+ */
}

.bubble-content > .close-bubble {
	height: 20px;
	width: 20px;
	position: fixed;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
.bubble-content > .close-bubble:before {
	content:'';
	height: 20px;
	width: 2px;
	background: #fff;
	position: fixed;
	top: 10px;
	right: 20px;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ie-transform: rotate(-45deg);
	transform: rotate(-45deg);
}
.bubble-content > .close-bubble:after {
	content:'';
	height: 20px;
	width: 2px;
	background: #fff;
	position: fixed;
	top: 10px;
	right: 20px;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-ie-transform: rotate(45deg);
	transform: rotate(45deg);
}

.active {
	right: -100px;
	top: -100px;
	width: 630px;
	height: 630px;
	-webkit-animation:	bubble-up .8s ease-in; /* Safari 4+ */
	-moz-animation:	bubble-up .5s ease-in; /* Fx 5+ */
	-o-animation:	bubble-up .5s ease-in; /* Opera 12+ */
	animation:	bubble-up .5s ease-in; /* IE 10+, Fx 29+ */		
}
.unactive {
	right: -100px;
	top: -100px;
	width: 1px;
	height: 1px;
	-webkit-animation:	bubble-down .5s ease-in; /* Safari 4+ */
	-moz-animation:	bubble-down .5s ease-in; /* Fx 5+ */
	-o-animation:	bubble-down .5s ease-in; /* Opera 12+ */
	animation:	bubble-down .5s ease-in; /* IE 10+, Fx 29+ */		
}

.sign-in.bubble-content > .form {
	position: fixed;
	right: 50px;
	top: 90px;	
}
.sign-up.bubble-content > .form {
	position: fixed;
	right: 50px;
	top: 40px;	
}
.bubble-content > .form  input {
	width: 250px;
	padding: 1em 2em 1em 2em;
	margin: 0em 0em 1em 0em;
	background: #4cdd98;
	border: 1px solid #fff;
	font-family: 'Open Sans';
	font-size: 18px;
	color: #fff;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 150ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 150ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 150ms;		
}
.bubble-content > .form  input:focus {
	border: 1px solid #fff;
	border-bottom: 5px solid #fff;
	outline: none;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 150ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 150ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 150ms;		
}
.bubble-content > .form  input.input-error {
	border: 1px solid #e05d6f;		
}
.bubble-content > .form  input.input-error:focus {
	border-bottom: 5px solid #e05d6f;
}
.bubble-content > .form  .input-error-msg {
	font-size: 16px;
}

::-webkit-input-placeholder {
   color: #fff;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 50ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 50ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 50ms;	   
}
[placeholder]:focus::-webkit-input-placeholder {
  transition: text-indent 0.5s 0.5s ease; 
  text-indent: -100%;
  opacity: 1;
}

.bubble-content > .form .submit:hover, .bubble-content > .form .submit:focus {
	background: #fff;
	color: #2D9439;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 150ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 150ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 150ms;		
}

@-webkit-keyframes bubble-up {
	0%	{width:1px; height:1px;}
	30% {width:650px;}
	55% {height: 750px; width: 625px}
	65% {height: 550px; width: 650px;}
	75% {height: 625px; width: 600px;}
	85% {height: 575px; width: 610px;}
	100%   {width:630px; height:630px;}
}

@-webkit-keyframes bubble-down {
  0%   {width:630px; height:630px;}
  75%   {width:670px; height:670px;}  
  100%   {width:1px; height:1px;}
}
@-webkit-keyframes show-bubble {
  0%   {zoom: 0; opacity: 0; top: -5000px;}
  50%   {zoom: 1; opacity: 0; top: 0;}  
  100%   {opacity: 1;}
}
@-webkit-keyframes hide-bubble {
  0%   {zoom: 1; opacity: 1; top: 0;}
  50%   {zoom: 1; opacity: 0; top: 0;}  
  100%   {opacity: 0; zoom: 0; top: -5000px;}
}

/* *** Topbar *** */
.topbar * {
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 150ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 150ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 150ms;	
}
/* *** Topbar *** */
.topbar .logotype img {
	-webkit-transition-duration: 50ms;	
	-moz-transition-duration: 50ms;	
	-ie-transition-duration: 50ms;	
}
.topbar {
	top:0;
	left: 0;
	width: 100%;
	position: fixed;
	z-index: 9999;
	height: 80px;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}
.logotype {
	height: 160px;
	position: absolute;
	left: 25px;
	top: 14px;
	overflow: hidden;
}
.logotype img {
	height: 160px;
	width: auto;
}
.menu {
	height: 80px;
	position: absolute;
	right: 15px;
	top: 0;
}
.menu ul li{
	display: inline;
	height: 80px;
}
.menu ul li a {
	line-height: 80px;
	font-weight: 300;
	padding: 10px;
}
.menu ul li a.bold {
	font-weight: 800;
}
.menu ul li:hover a {color: #4cdd98;}


/* *** Topbar when scrolled *** */
.topbar-scrolled {
	height: 60px;
	box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
	background: #fff;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}
.topbar-scrolled .logotype {
	top: 10px;
	left: 25px;
	height: 60px;
	width: 160px;
}
.topbar-scrolled .logotype img {
	height: 40px;
}
.topbar-scrolled  .menu {
	height: 60px;
}
.topbar-scrolled .menu ul li{
	height: 60px;
}
.topbar-scrolled .menu ul li a {
	line-height: 60px;
	padding: 10px;
}


/* ***  Megaman-menu   *** */
.megaman-menu-btn {cursor: pointer;}
.megaman-menu {
	position: fixed;
	top: -99999px;
	right: -99999px;
	z-index: 999999;
	background: #4cdd98;
	opacity: 0;	
}
.megaman-menu.open {
	height: 100%;
	width: 100%;
	height: 100vh;
	width: 100vw;
	right: 0;
	top: 0;
	opacity: 0.9;
	-webkit-animation:	show-megaman .6s ease-in; /* Safari 4+ */
	-moz-animation:	show-megaman .6s ease-in; /* Fx 5+ */
	-o-animation:	show-megaman .6s ease-in; /* Opera 12+ */
	animation:	show-megaman .6s ease-in; /* IE 10+, Fx 29+ */	
}
.megaman-menu.close {	
	height: 1px;
	width: 1px;
	right: 0;
	top: 0;
	opacity: 0.9;
	-webkit-animation:	hide-megaman .5s ease-in reverse; /* Safari 4+ */
	-moz-animation:	hide-megaman .5s ease-in reverse; /* Fx 5+ */
	-o-animation:	hide-megaman .5s ease-in reverse; /* Opera 12+ */
	animation:	hide-megaman .5s ease-in reverse; /* IE 10+, Fx 29+ */		
}
@-webkit-keyframes show-megaman {
	0%   {
	display: none;
	top: -99999px; 
	right: -99999px; 
	height: 1px; 
	width: 1px; 
	opacity: 0;
	}
	1%   {
	display: block;
	top: 0; 
	right: -75px;	
	border-top-left-radius: 999999px; 
	border-bottom-left-radius: 999999px; 
	border-bottom-right-radius: 999999px;
	}
	60% {
	box-shadow: 0px 0px 0px 1px #4cdd98; 
	height: 100%;
	width: 100%;
	right: -75px;
	height: 100vh;
	width: 100vw;
	opacity:0.9;	
	box-shadow: 0px 0px 0px 0px #4cdd98;  	
	}
	100%   {
	box-shadow: 0px 0px 0px 9999px #4cdd98;  
	height: 100%;
	width: 100%;
	height: 100vh;
	width: 100vw;
	opacity: 0.9;	
	right: 0;
	display: block;
  }
}
@-webkit-keyframes hide-megaman {
	0%   {
	display: none;
	top: -99999px; 
	right: -99999px; 
	height: 1px; 
	width: 1px; 
	opacity: 0;
	}
	1%   {
	display: block;
	top: 0; 
	right: -75px;	
	border-top-left-radius: 999999px; 
	border-bottom-left-radius: 999999px; 
	border-bottom-right-radius: 999999px;
	}
	60% {
	box-shadow: 0px 0px 0px 1px #4cdd98; 
	height: 100%;
	width: 100%;
	right: -75px;
	height: 100vh;
	width: 100vw;
	opacity:0.9;	
	box-shadow: 0px 0px 0px 0px #4cdd98;  	
	}
	100%   {
	box-shadow: 0px 0px 0px 9999px #4cdd98;  
	height: 100%;
	width: 100%;
	height: 100vh;
	width: 100vw;
	opacity: 0.9;	
	right: 0;
	display: block;
  }
}
.megaman-content {
	width: 500px;
	margin: 50px auto;
	overflow-x: hidden;	
}
.close-megaman-menu {
	height: 40px;
	width: 40px;
	float: right;
	cursor: pointer;
}
.close-megaman-menu:before {
	content:'';
	height: 40px;
	margin-left: 20px;
	width: 2px;
	background: #fff;
	position: absolute;
	-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(45deg); /* FireFox */
	-ie-transform: rotate(45deg); /* IE */
	transform: rotate(45deg);	
}
.close-megaman-menu:after {
	content:'';
	height: 40px;
	margin-left: 20px;	
	width: 2px;
	background: #fff;
	position: absolute;
	-webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
	-moz-transform: rotate(-45deg); /* FireFox */
	-ie-transform: rotate(-45deg); /* IE */
	transform: rotate(-45deg);	
}
.megaman-content > ul {
	list-style: none;
}
.megaman-content > ul li{
	padding: 0;
	border-bottom: 1px solid #fff;
}
.megaman-content > ul li a{
	color: #fff;
	display: block;
	height: 100%;
	width: 100%;
	padding: 1em 0em;
	box-shadow: inset 0 0 0 0 rgba(255, 255, 255, 0);
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 250ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 250ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 250ms;		
}
.megaman-content > ul li:hover a {
	padding: 1em 1em;
	box-shadow: inset 0 -2px 0 0 rgba(255, 255, 255, 1);	
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 100ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 100ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 100ms;		
}


/* ***  Screen one   *** */
.screen-one {
	background: url('../ee-images/background_website_stack.jpg') no-repeat fixed; 
	background-size: cover;
	background-position-y: -25px;
	width: 100%;
	height: 120vh;
	top:0;
	left: 0;
	padding-bottom: 250px;
}
.screen-one-text {
	max-width: 90%;
	padding-left: 25px;
	padding-top: 20%;
}
.screen-one  p {}
.screen-one p.lean {font-weight: 300; font-size: 48px; line-height: 140%;}
.screen-one p.bold {font-weight: 800; font-size: 34px; line-height: 10%;}
.screen-one a {
	background: rgba(255,255,255,0);
	padding: 15px 30px;
	border: 1px solid #000;
	line-height: 500%;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}
.screen-one a:hover {
	background: #4cdd98;
	color: #fff;
	border: 1px solid #4cdd98;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}

/* ***  Screen two   *** */
.screen-two {
	margin-top: 50px;
}
.screen-two  p {text-align: center;}
.screen-two p.lean {font-weight: 300; font-size: 48px;}
.screen-two p.bold {font-weight: 800; font-size: 38px; margin-top: -50px;}
.screen-two > .sliding {
	background: url('../ee-images/epage_features_background.jpg') no-repeat;
	width: 100%;
	height: 629px;
	top:0;
	left: 0;
	margin-top: 20px;
}
.screen-two > .slimshady-upper {
	margin-top: -216px;
	width: 100%;
	height: 216px;
	background: url('../ee-images/background_shadow_overlay.png') repeat-x;
}
.screen-two > .slimshady {
	margin-top: -115px;
	width: 100%;
	height: 216px;
	background: url('../ee-images/background_shadow_overlay.png') repeat-x;
}


 /* ***  Screen three   *** */
 /* Sorry, no need for anything in here */

 
 /* ***  Screen four   *** */
.screen-four {
	margin-top: 50px;
}
.screen-four  p {text-align: center;}
.screen-four p.lean {font-weight: 300; font-size: 48px;}
.screen-four p.bold {font-weight: 800; font-size: 38px; margin-top: -50px;}
.screen-four > .sliding {
	background: url('../ee-images/background_backend.jpg') no-repeat; 
	width: 100%;
	height: 659px;
	top:0;
	left: 0;
}
.screen-four > .sliding-two {
	background: url('../ee-images/frontend.png') no-repeat;
	width: 100%;
	height: 659px;
	top:0;
	left: 0;
	margin-top: -659px;
	opacity: 1;
}

.screen-four > .slimshady {
	margin-top: -116px;
	width: 100%;
	height: 216px;
	background: url('../ee-images/background_shadow_overlay.png') repeat-x;
	opacity: 1;
}
 

 /* ***  Screen five  *** */
.screen-five {
	margin-top: 200px;
}
.screen-five-text {
	max-width: 100%;
	right: 0px;
	padding-right: 25px;
	margin-bottom: -320px;
}
.screen-five  p {text-align: right;}
.screen-five p.lean {font-weight: 300; font-size: 48px;}
.screen-five p.bold {font-weight: 800; font-size: 38px; margin-top: -50px;}
.screen-five a {
	float: right;
	background: rgba(255,255,255,0);
	padding: 15px 30px ;
	border: 1px solid #000;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}
.screen-five a:hover {
	background: #4cdd98;
	color: #fff;
	border: 1px solid #4cdd98;
	-webkit-transition: all;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 300ms;	
	
	-moz-transition: all;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 300ms;	

	-ie-transition: all;
	-ie-transition-timing-function: ease-in;
	-ie-transition-duration: 300ms;		
}
.screen-five > .sliding {
	background: url('../ee-images/website_one.png') no-repeat; 
	width: 100%;
	height: 726px;
	top:0;
	left: 0;
}
.screen-five > .sliding-two {
	background: url('../ee-images/mobile_three.png') no-repeat;
	width: 100%;
	height: 726px;
	margin-top: -726px;
	top:0;
	left: 0;
}
.screen-five > .sliding-three {
	background: url('../ee-images/mobile_two.png') no-repeat;
	width: 100%;
	height: 726px;
	margin-top: -726px;
	top:0;
	left: 0;
}
.screen-five > .sliding-four {
	background: url('../ee-images/mobile_one.png') no-repeat; 
	width: 100%;
	height: 726px;
	margin-top: -726px;
	top:0;
	left: 0;
}


.screen-five > .slimshady {
	margin-top: -116px;
	width: 100%;
	height: 114px;
	background: url('../ee-images/background_shadow_overlay.png') repeat-x;
	opacity: 1;
}
 
 
/* *** Make it responsive, please *** */

@media screen and (max-width: 1200px) {
	.screen-one {height: 100%;}
	.screen-one-text {
		Padding-top: 20%;
		zoom: 0.9;
	}
	
	.screen-two-text,
	.screen-four-text,
	.screen-two .sliding,
	.screen-four .sliding,
	.screen-four .sliding-two,
	.screen-three,
	.screen-five  .sliding,
	.screen-five .sliding-two, 
	.screen-five  .sliding-three,
	.screen-five .sliding-four {
		zoom: 0.9;
	}
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four {
		background-position-x: -100px;
	}		

}

@media screen and (max-width: 1024px) {
	.screen-one {height: 100%;}
	.screen-one-text {
		Padding-top: 20%;
		zoom: 0.8;
	}
	
	.screen-two-text,
	.screen-four-text,
	.screen-five-text	{
		zoom: 0.8;
	}
	.screen-two .sliding,
	.screen-four .sliding,
	.screen-four .sliding-two,
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four	{
		zoom: 0.8;
	}
	.screen-three {zoom: 0.8;}

}

@media screen and (max-width: 768px) {
	.menu ul li:first-child {display: none;}
	.topbar {
		height: 60px;
		box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.5);
		background: #fff;
		-webkit-transition: all;
		-webkit-transition-timing-function: ease-in;
		-webkit-transition-duration: 300ms;	
		
		-moz-transition: all;
		-moz-transition-timing-function: ease-in;
		-moz-transition-duration: 300ms;	

		-ie-transition: all;
		-ie-transition-timing-function: ease-in;
		-ie-transition-duration: 300ms;		
	}
	.topbar .logotype {
		top: 10px;
		left: 25px;
		height: 60px;
		width: 60px;
	}
	.topbar .logotype img {
		margin-left: -99px;
	}
	.topbar  .menu {
		height: 60px;
	}
	.topbar .menu ul li{
		height: 60px;
	}
	.topbar .menu ul li a {
		line-height: 60px;
		padding: 10px;
	}
	.screen-one {height: 100%;}	
	.screen-one-text {
		Padding-top: 30%;
		zoom: 0.55;
	}
	.screen-two-text,
	.screen-four-text,
	.screen-three,
	.screen-five-text	{
		zoom: 0.5;}
	.screen-two .sliding,
	.screen-four .sliding,
	.screen-four .sliding-two,	
	.screen-three  .sliding, 
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four	{
	zoom: 0.417;}
	.screen-five {
		margin-top: 0px;
	}
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four {
		background-position-x: -50px;
	}
	.sign-in-bubble, .sign-up-bubble, .megaman-content { zoom: 0.55;}
}


@media screen and (max-width: 380px) {
	.screen-one {height: 100%;}
	.screen-one-text {
		Padding-top: 60%;
		zoom: 0.4;
	}
	
	.screen-two-text,
	.screen-four-text,
	.screen-five-text {
		zoom: 0.3;}
	.screen-two .sliding,
	.screen-four .sliding,
	.screen-four .sliding-two,
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four	{
		zoom: 0.4;}
	.screen-three {
		zoom: 0.6;
	}
	.screen-three .col-5 p{
		font-weight: 400; line-height: 140%;
	}
	.screen-five {
		margin-top: 0px;
	}
	.screen-five .sliding,
	.screen-five .sliding-two,
	.screen-five  .sliding-three,
	.screen-five  .sliding-four {
		background-position-x: -400px;
	}
	.menu ul li a {
		font-size: 0.7em;
	}	
}


/* *** 
Jedi mind tricks 
Sorry folks, that's it. We're calling it tonight.
Thank you for tuning in over here at epage style department.
Comment your code and may the force be with you.

PS. There is nothing named zoom, background-position-y & background-position-x. You didn't see that, it never happend!
*** */

/* lets add some fonts */

@font-face {
	font-family: 'et-line';
	src:url('../ee-fonts/et-line.eot');
	src:url('../ee-fonts/et-line.eot?#iefix') format('embedded-opentype'),
		url('../ee-fonts/et-line.woff') format('woff'),
		url('../ee-fonts/et-line.ttf') format('truetype'),
		url('../ee-fonts/et-line.svg#et-line') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* Use the following CSS code if you want to use data attributes for inserting your icons */
[data-icon]:before {
	font-family: 'et-line';
	content: attr(data-icon);
	speak: none;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display:inline-block;
}

/* Use the following CSS code if you want to have a class per icon */
/*
Instead of a list of all class selectors,
you can use the generic selector below, but it's slower:
[class*="icon-"] {
*/
.icon-mobile, .icon-laptop, .icon-desktop, .icon-tablet, .icon-phone, .icon-document, .icon-documents, .icon-search, .icon-clipboard, .icon-newspaper, .icon-notebook, .icon-book-open, .icon-browser, .icon-calendar, .icon-presentation, .icon-picture, .icon-pictures, .icon-video, .icon-camera, .icon-printer, .icon-toolbox, .icon-briefcase, .icon-wallet, .icon-gift, .icon-bargraph, .icon-grid, .icon-expand, .icon-focus, .icon-edit, .icon-adjustments, .icon-ribbon, .icon-hourglass, .icon-lock, .icon-megaphone, .icon-shield, .icon-trophy, .icon-flag, .icon-map, .icon-puzzle, .icon-basket, .icon-envelope, .icon-streetsign, .icon-telescope, .icon-gears, .icon-key, .icon-paperclip, .icon-attachment, .icon-pricetags, .icon-lightbulb, .icon-layers, .icon-pencil, .icon-tools, .icon-tools-2, .icon-scissors, .icon-paintbrush, .icon-magnifying-glass, .icon-circle-compass, .icon-linegraph, .icon-mic, .icon-strategy, .icon-beaker, .icon-caution, .icon-recycle, .icon-anchor, .icon-profile-male, .icon-profile-female, .icon-bike, .icon-wine, .icon-hotairballoon, .icon-globe, .icon-genius, .icon-map-pin, .icon-dial, .icon-chat, .icon-heart, .icon-cloud, .icon-upload, .icon-download, .icon-target, .icon-hazardous, .icon-piechart, .icon-speedometer, .icon-global, .icon-compass, .icon-lifesaver, .icon-clock, .icon-aperture, .icon-quote, .icon-scope, .icon-alarmclock, .icon-refresh, .icon-happy, .icon-sad, .icon-facebook, .icon-twitter, .icon-googleplus, .icon-rss, .icon-tumblr, .icon-linkedin, .icon-dribbble {
	font-family: 'et-line';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display:inline-block;
}
.icon-mobile:before {
	content: "\e000";
}
.icon-laptop:before {
	content: "\e001";
}
.icon-desktop:before {
	content: "\e002";
}
.icon-tablet:before {
	content: "\e003";
}
.icon-phone:before {
	content: "\e004";
}
.icon-document:before {
	content: "\e005";
}
.icon-documents:before {
	content: "\e006";
}
.icon-search:before {
	content: "\e007";
}
.icon-clipboard:before {
	content: "\e008";
}
.icon-newspaper:before {
	content: "\e009";
}
.icon-notebook:before {
	content: "\e00a";
}
.icon-book-open:before {
	content: "\e00b";
}
.icon-browser:before {
	content: "\e00c";
}
.icon-calendar:before {
	content: "\e00d";
}
.icon-presentation:before {
	content: "\e00e";
}
.icon-picture:before {
	content: "\e00f";
}
.icon-pictures:before {
	content: "\e010";
}
.icon-video:before {
	content: "\e011";
}
.icon-camera:before {
	content: "\e012";
}
.icon-printer:before {
	content: "\e013";
}
.icon-toolbox:before {
	content: "\e014";
}
.icon-briefcase:before {
	content: "\e015";
}
.icon-wallet:before {
	content: "\e016";
}
.icon-gift:before {
	content: "\e017";
}
.icon-bargraph:before {
	content: "\e018";
}
.icon-grid:before {
	content: "\e019";
}
.icon-expand:before {
	content: "\e01a";
}
.icon-focus:before {
	content: "\e01b";
}
.icon-edit:before {
	content: "\e01c";
}
.icon-adjustments:before {
	content: "\e01d";
}
.icon-ribbon:before {
	content: "\e01e";
}
.icon-hourglass:before {
	content: "\e01f";
}
.icon-lock:before {
	content: "\e020";
}
.icon-megaphone:before {
	content: "\e021";
}
.icon-shield:before {
	content: "\e022";
}
.icon-trophy:before {
	content: "\e023";
}
.icon-flag:before {
	content: "\e024";
}
.icon-map:before {
	content: "\e025";
}
.icon-puzzle:before {
	content: "\e026";
}
.icon-basket:before {
	content: "\e027";
}
.icon-envelope:before {
	content: "\e028";
}
.icon-streetsign:before {
	content: "\e029";
}
.icon-telescope:before {
	content: "\e02a";
}
.icon-gears:before {
	content: "\e02b";
}
.icon-key:before {
	content: "\e02c";
}
.icon-paperclip:before {
	content: "\e02d";
}
.icon-attachment:before {
	content: "\e02e";
}
.icon-pricetags:before {
	content: "\e02f";
}
.icon-lightbulb:before {
	content: "\e030";
}
.icon-layers:before {
	content: "\e031";
}
.icon-pencil:before {
	content: "\e032";
}
.icon-tools:before {
	content: "\e033";
}
.icon-tools-2:before {
	content: "\e034";
}
.icon-scissors:before {
	content: "\e035";
}
.icon-paintbrush:before {
	content: "\e036";
}
.icon-magnifying-glass:before {
	content: "\e037";
}
.icon-circle-compass:before {
	content: "\e038";
}
.icon-linegraph:before {
	content: "\e039";
}
.icon-mic:before {
	content: "\e03a";
}
.icon-strategy:before {
	content: "\e03b";
}
.icon-beaker:before {
	content: "\e03c";
}
.icon-caution:before {
	content: "\e03d";
}
.icon-recycle:before {
	content: "\e03e";
}
.icon-anchor:before {
	content: "\e03f";
}
.icon-profile-male:before {
	content: "\e040";
}
.icon-profile-female:before {
	content: "\e041";
}
.icon-bike:before {
	content: "\e042";
}
.icon-wine:before {
	content: "\e043";
}
.icon-hotairballoon:before {
	content: "\e044";
}
.icon-globe:before {
	content: "\e045";
}
.icon-genius:before {
	content: "\e046";
}
.icon-map-pin:before {
	content: "\e047";
}
.icon-dial:before {
	content: "\e048";
}
.icon-chat:before {
	content: "\e049";
}
.icon-heart:before {
	content: "\e04a";
}
.icon-cloud:before {
	content: "\e04b";
}
.icon-upload:before {
	content: "\e04c";
}
.icon-download:before {
	content: "\e04d";
}
.icon-target:before {
	content: "\e04e";
}
.icon-hazardous:before {
	content: "\e04f";
}
.icon-piechart:before {
	content: "\e050";
}
.icon-speedometer:before {
	content: "\e051";
}
.icon-global:before {
	content: "\e052";
}
.icon-compass:before {
	content: "\e053";
}
.icon-lifesaver:before {
	content: "\e054";
}
.icon-clock:before {
	content: "\e055";
}
.icon-aperture:before {
	content: "\e056";
}
.icon-quote:before {
	content: "\e057";
}
.icon-scope:before {
	content: "\e058";
}
.icon-alarmclock:before {
	content: "\e059";
}
.icon-refresh:before {
	content: "\e05a";
}
.icon-happy:before {
	content: "\e05b";
}
.icon-sad:before {
	content: "\e05c";
}
.icon-facebook:before {
	content: "\e05d";
}
.icon-twitter:before {
	content: "\e05e";
}
.icon-googleplus:before {
	content: "\e05f";
}
.icon-rss:before {
	content: "\e060";
}
.icon-tumblr:before {
	content: "\e061";
}
.icon-linkedin:before {
	content: "\e062";
}
.icon-dribbble:before {
	content: "\e063";
}