@import url(http://fonts.googleapis.com/css?family=Oswald:300,400);
@import url(http://weloveiconfonts.com/api/?family=iconicstroke);

/* iconicstroke */
[class*="iconicstroke-"]:before {
  font-family: 'IconicStroke', sans-serif;
  color: #fdf3a3;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}


article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

body {
  font-family: 'Oswald', sans-serif;
  font-weight: 300;
}

a, a:visited{
  color: #fdf3a3;
  text-decoration:none;
}
ul li a:hover {
  border-bottom: solid 2px #fdf3a3;
}
ul.menu {float:right;margin-right:120px;}
ul.menu li, li a {
  font-family: 'Oswald', sans-serif;
  color: #fdf3a3;
  font-size: 18px; 
  display:block;
  float:left;
  margin-top:15px;
  padding-left:5px;
  padding-right: 5px;
  text-decoration: none;
  bottom: 0px;
}
li.active a {
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing: 1px;
  border-bottom: solid 2px #fdf3a3;
  margin-top:-18px;
}

#pagination {
    clear:both;
    width:75px;
    margin:25px auto 0;
    padding:0;
}

#pagination li {
    list-style:none;
    float:left;
    margin:0 2px;
}

#pagination li a {
    display:block;
    width:10px;
    height:10px;
    text-indent:-10000px;
    background: #999;
    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    box-shadow: inset 1px 1px 1px rgba(0, 0 ,0, 0.4);
}

#pagination li a.active {
    background: #668CFF;
}

p.s-text3 img {width:300px; height:auto;margin-left: 50px;}

/************************************/
/*******   Main Page Design    ******/
/************************************/
#services {
  width: 3050px;
  height: 3050px;
  background-color: #0e0512 /*#095655*/;
  position: relative;
  
  left: -550px; 
  top: -900px; 
  -webkit-transform: rotate(-31deg);
  -moz-transform:rotate(-31deg);
  -ms-transform:rotate(-31deg);
  -o-transform:rotate(-31deg);
}

#first-lid {
  float: left;
  background-color: #095655 /*#200220*/;
  width: 1200px; /*2000*/
  height: 1200px; /*1200*/
  margin-right: 30px;
  position: relative;
  z-index: 40;
  margin-top: -60px;

/* transition: width 1s;
  -moz-transition: width 1s;  Firefox 4 
  -webkit-transition: width 1s;  Safari and Chrome 
  -o-transition: width 1s;  Opera 
  -ms-transition: width 1s;  IE9 (maybe) */
}
/*
#third-lid:hover {
  width: 2900px;
  height: 2900px;
}*/

#first-lid-in {
  display: none;
  position: absolute;
  width: 300px;
  bottom: 0;
  right: 0;
  text-align: right;
  margin: 0 30px 30px 0;
}

#second-lid {
  /*float: left;*/
  background-color: #0e0512 /*#095655*/;
  text-align: left;
  width: 1200px; /*1*/
  height: 1200px; /*1200*/
  position: relative;
  margin-left: 1205px; /*-25px;*/
  margin-top: -20px;
  
}

#second-lid-in {
  position: absolute;
  width: 500px;
  bottom: 0;
  left: 0;
  display: none;
  padding-bottom: 20px;
  padding-left: 30px;
}

#third-lid {
  float: left;
  background: #3b1540;
  /*background-color: ;*/
 /* background-color: rgba(0, 0, 0, 0.9);*/
  text-align: right;
  width: 1200px; /*2000*/
  height: 1200px;/*1*/
  margin-right: 30px;
  position: relative;
  margin-top: -80px;

/* transition: width 1s;
  -moz-transition: width 1s;  Firefox 4 
  -webkit-transition: width 1s;  Safari and Chrome 
  -o-transition: width 1s;  Opera 
  -ms-transition: width 1s;  IE9 (maybe) */
}
/*
#third-lid:hover {
  width: 2900px;
  height: 2900px;
}*/

#third-lid-in {
  position: absolute;
  width: 300px;
  height: 150px;
  top: 0;
  right: 0;
  display: none;
  text-align: right;
  color: #b6b6b6;
  margin: 30px 30px 0 0;
}

#fourth-lid {
  /*float: left;*/
  background: #503154 url(../images/bg-fil.jpg) repeat;
  /*background-color: rgba(0, 0, 0, 0.08);*/
  width: 2000px;/*1*/
  height: 2200px;/*2000*/
  position: relative;
  margin-top: -80px;
  margin-left: 1210px; /*-20px;*/

/* transition: width 1s;
  -moz-transition: width 1s;  Firefox 4 
  -webkit-transition: width 1s;  Safari and Chrome 
  -o-transition: width 1s;  Opera 
  -ms-transition: width 1s;  IE9 (maybe) */
}
/*
#third-lid:hover {
  width: 2900px;
  height: 2900px;
}*/

#fourth-lid-in {
  position: absolute;
  width: 300px;
  height: 150px;
  top: 0;
  display: none;
  left: 0;
  margin: 30px 0 0 30px;
}

#services-middle {
  clear: both;
  height: 30px;
}

#third-lid #third-lid-in .s-text1 {
  color: #fdf3a3;
  font-family: 'Oswald', sans-serif;
  font-size: 50px;
}
#third-lid #third-lid-in .s-text1 a {
  color: #fdf3a3;
  
}

#first-lid #first-lid-in .s-text2 {
  color: #fdf3a3;
}

#fourth-lid #fourth-lid-in .s-text2 {
  color: #fdf3a3;
}
#fourth-lid-in.active {
 width:1800px;
 z-index:9999;
 transform: rotate(31deg) translate(-1055px, -75px);
 -webkit-transform: rotate(31deg) translate(-1055px, -75px);
 transition: all 2s ease-in-out;
 -webkit-transition: all 2s ease-in-out;
}
#showcase {display:none;}
#showcase.active{display:block;}
.s-text1 {
  font-family: 'Oswald', sans-serif;
  color: #fdf3a3;
  font-size: 50px;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing: 1px;
}

.s-text1 a {
  text-decoration: none;
}

.s-text1 span {
  font-weight: bold;
  font-size: 12px;
  letter-spacing: 3px;
}


.s-text2 {
  font-family: Arial, sans-serif;
  color: #fdf3a3;
  font-size: 15px;
  margin-top: 15px;
  line-height: 20px;  
}
#fourth-lid-in p.s-text2 {
      width: 180px;
	}
	
p.s-text3 {
  font-family: Arial, sans-serif;
  color: #fdf3a3;
  font-size: 15px;
  font-weight:300;
  /*text-transform: uppercase;*/
  line-height: 22px;
  letter-spacing: 1px;
  }
  
p.title {
   font-family: Arial, sans-serif;
  color: #fdf3a3;
  font-size: 15px;
  font-weight:300;
  /*text-transform: uppercase;*/
  line-height: 22px;
  letter-spacing: 1px;
  opacity: 1;
  width: 400px;
  -webkit-transform: rotate(31deg);
  transform: rotate(31deg);
  -webkit-animation: fadeIn 2.5s;
  animation: fadeIn 2.5s;
  margin-left: -20px;
  
}

#s-question {
  border-radius: 15px;
  padding: 5px 14px;
  background-color: #fff;
  position: absolute;
  bottom: 9px;
  left: 379px;
  display: block;
}

/************************************/
/*******	   Mobile          ******/
/************************************/
@media only screen and (max-width: 800px),
	(min-device-width: 720px) and (max-device-width: 800px) {
		#services {
		  left: -700px; 
		 }

	}
	
@media only screen and (max-width: 480px) { 
	#services {
	  left: -820px;
	}
	.s-text1, #third-lid #third-lid-in .s-text1 {
	  font-size: 25px;
	}
	.s-text2 {
	  font-size: 15px;
	  margin-top: 15px;
	  line-height: 20px;
	  
	}
	#fourth-lid-in {
      width: 180px;
	}
	p.title {
      font-size: 15px;
      font-weight: 300;
      line-height: 18px;
	  width: 290px;
	  margin-top: -20px;
	  margin-left: 10px;
	} 
	#second-lid-in {
	  margin-left:-30px;
	}
	
	
}






/************************************/
/*******	   Portfolio       ******/
/************************************/
/*#wrapper{
	margin: 0 auto;
	margin-top:20px;
	width:55%;
	overflow: hidden;
	display:none;
   }
.polio {
	width: 418px;
	height: 237px;
	background-color:#99769e;
	padding:10px;
	margin: 25px;
	float:left;
}

.polio-img {
	width:200px;
	height:232px;
	background-color:#c9aecc;
	float:left;
	}
	
.polio-text {
	width:184px;
	height:230px;
	padding-left:5px;
	float:right;
	} 
  	
a.purple-button{
	width:184px !important;
	height:47px !important;
	background-color:#3b153e;
	text-align:center;
	color:#fdf3a3;
	font-faily: 'Oswald', sans-serif;
	font-size: 20px;
	text-transform:uppercase;
	text-decoration:none;
	font-weight:400;
	padding: 5px 40px;
	}

.polio-text h1 {
	color:#fdf3a3;
	font-faily: 'Oswald', sans-serif;
	font-size: 50px;
	font-weight:400;
}

.polio-text h3 {
	color:#fdf3a3;
	font-faily: 'Oswald', sans-serif;
	font-size: 30px;
	text-transform:uppercase;
	font-weight:400;
}
.polio-text p {
	font-family: 'Oswald', sans-serif;
  	color: #fdf3a3;
  	font-size: 18px;
  	font-weight:300;
	}


#examples-1 { overflow: hidden; }
.fly-it-right, .fly-it-left, .fly-it-right2, .fly-it-left2, .fly-it-right3, .fly-it-left3, .fly-it-right4, .fly-it-left4,.fly-it-right5, .fly-it-left5, .fly-it-right6, .fly-it-left6 { position: relative; }
#scale-it { width: 500%; margin: 0px -200%; padding: 0; }

#examples-pin { position: relative; width: 100%; height: 600px; overflow: hidden; margin-bottom: -200px; }
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; }
.pin-frame h2 { margin-top: 120px; }
#pin-frame-slide { background: #D92B00; margin-left:-100%; }
#pin-frame-wipe  { background: #FFB000; top:100%; }
#pin-frame-wipe h2  { color: #D92B00; }
#pin-frame-bounce  { background: #222438; }
#pin-frame-color  { background: #222438; }
#pin-frame-unpin  { top:100%; }

#examples-2 { z-index: 9999; width: 100%; height: 100%; overflow: hidden; }
.fly-it-right, .fly-it-left, .fly-it-right2, .fly-it-left2, .fly-it-right3, .fly-it-left3, .fly-it-right4, .fly-it-left4,.fly-it-right5, .fly-it-left5, .fly-it-right6, .fly-it-left6,
#move-it { position: relative; }
#examples-parallax {
	padding-top: 200px;
	height: 800px;
	margin-bottom: -600px;
	overflow: hidden;
}
#parallax-it {
	padding: 0;
	font-size: 80px;
	position: relative;
}

#parallax-it-left {
	position: relative;
	font-size: 120px;
	left: -160px;
	color: #C5C3DE;
	opacity: 0.5;
	-moz-opacity: 0.5;
	filter:alpha(opacity=5);
	overflow: hidden;
}

#parallax-it-right {
	position: relative;
	font-size: 160px;
	left: 80px;
	color: #C5C3DE;
	opacity: 0.25;
	-moz-opacity: 0.25;
	filter:alpha(opacity=2.5);
	overflow: hidden;
	width: 900px;
}
*/
/************************************/
/*******	   Animations      ******/
/************************************/

   @-webkit-keyframes Pos 
    {
       
      
       100% {
          -webkit-transform-property: top -625px, left;
       }
    }

    @-webkit-keyframes Rota 
    {
      
       0% {
          -webkit-transform: rotate(31deg);
       }
       50% {
          -webkit-transform: rotate(-15deg);
       }
       75% {
          -webkit-transform: rotate(-21deg);
       }
       100% {
          -webkit-transform: rotate(-31deg);
       }
    

    }

#first-lid.animate {
	-webkit-animation-name: eid15;
	-webkit-animation-duration: 10s;
	-webkit-animation-timing-function: ease;
	-webkit-animation-iteration-count: 1;	
	-webkit-animation-direction: normal;
	-webkit-animation-delay: 0;
	-webkit-animation-play-state: running;
	-webkit-animation-fill-mode: forwards;

	-moz-animation-name: eid15;
	-moz-animation-duration: 10s;
	-moz-animation-timing-function: ease;
	-moz-animation-iteration-count: 1;	
	-moz-animation-direction: normal;
	-moz-animation-delay: 0;
	-moz-animation-play-state: running;
	-moz-animation-fill-mode: forwards;
	
	-ms-animation-name: eid15;
	-ms-animation-duration: 10s;
	-ms-animation-timing-function: ease;
	-ms-animation-iteration-count: 1;	
	-ms-animation-direction: normal;
	-ms-animation-delay: 0;
	-ms-animation-play-state: running;
	-ms-animation-fill-mode: forwards;

	animation-name: eid15;
	animation-duration: 10s;
	animation-timing-function: ease;
	animation-iteration-count: 1;	
	animation-direction: normal;
	animation-delay: 0;
	animation-play-state: running;
	animation-fill-mode: forwards;

}

@-webkit-keyframes eid15 {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}

@-moz-keyframes eid15 {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}

@-ms-keyframes eid15 {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}

@keyframes eid15 {

	0% {
		background-color: #525252;
	}
	
	33% {
		background-color: #6293e5;
	}

	66% {
		background-color: #6293e5;
	}

	100% {
		background-color: #525252;
	}

}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    84% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    16% {
        opacity: 1;
    }
    84% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 0;
    }
    84% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    16% {
        opacity: 0;
    }
    84% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* = Z-index
*****************************************************
#loading-panels-info:				1050
#mask		:						1030
#lm-loader : 				150000	1000
#lm-loader-cache : 			151000	1020
#lm-loader-yellow : 		150500	1010
header : 					15000	330
#header-bg : 				10		1
header .projects : 			15		90
#logo : 					100000	310
#link-chap1 : 				10		10
#link-chap2 : 				10		20
#link-chap3 : 				10		30
footer : 					100		170
#cms : 						9001	290
#home-loading : 			20		100
#services-chapter : 		10		40
#projects-chapter : 		12		60
#chapter-title : 			13		70
#menu, #contact : 			24		110
#services-content : 		11		50
#recording : 				9999	1000
#studio : 					100		180
#first-lid : 				10		40
#projects : 				500		190
#projects-elevator : 		13		80
#panel1 : 					500		200
#p1-panel1 : 				500		210
#p1-panel2 : 				501		240
#p1-panel2-1 : 				502		270
#p1-panel2-2 : 				501		250
#panel2 : 					500		220
#p2-panel1 : 				500		230
#p2-panel2 : 				501		260
#p2-panel3 : 				50		130
#p2-panel4 : 				60		160
#project-navigation : 		30		120
#contact-footer : 			10000	300
#contact-footer-support : 	1000	280
#panels :							

************************************************/