@import url(sequence.css);
/* sequence slide css starts */
#sequence .sub-tag1{ color:#f2c431;}
#home_sequence .sub-tag{ color:#f2c431;}

body{ margin:0; padding:0; background: #000; color: #cccc99; }

/* Common section starts */
a, a:visited, a:link{ text-decoration: underline; color: #cc9; }
a:hover, a:active { color: #ffc; }
#wrapper1{ width:100%; margin:0 auto; height:auto;}	
.container{ width:860px; padding:0px 5px; margin:0 auto; height:auto; }
.clr{ clear:both;}
#mobi_site { display: none; }

.nav_icon{
	display: inline-block;
	background: #4f4f50 url(images/nav_icons.png) 0 0 no-repeat;
	width: 31px;
	height: 31px;
	border-radius: 20px;
	border: #2c2c2c 4px solid;
	-webkit-box-shadow: 0 0 4px #444;
	-moz-box-shadow: 0 0 4px #444;
	box-shadow: 0 0 4px #444;
	cursor: pointer;
}
.nav_icon:hover, a.icon_link:hover .nav_icon{
	background-color: #666;
	-webkit-box-shadow: 0 0 4px #666;
	-moz-box-shadow: 0 0 4px #666;
	box-shadow: 0 0 4px #666;
	transition: background 1s;
}
.main_menu{
	background-position: 7px 10px;
}
.socials{
	position: absolute;
	top:20px;
	right: 13px;
	z-index: 9999;
}
.socials a{
	margin-right: 10px;
}
.sol_b{
	background-position: 9px -72px;
}
.sol_c{
	background-position: 6px -111px;
}
.sol_v{
	background-position: 7px -150px;
}
.sol_f{
	background-position: 11px -192px;
}
.icon_next{
	background-position: 8px -227px;
}
.up_arrow{
	position: absolute;
	padding-top: 20px;
	width: 100%;
	z-index:9998;
}
.icon_prev{
	background-position: 8px -430px;
}
#journey .container { position: relative; }
.journey_nav a{
	z-index: 999;
}
.journey_left{
	background-position: 10px -352px;
	position: absolute;
	left: 75px;
	top: 120px;
}
.journey_right{
	background-position: 12px -392px;
	position: absolute;
	right: 75px;
	top: 120px;
}
.icon_map{
	background-position: 8px -315px;
}
a.icon_link{
	display: block;
	line-height: 38px;
}
a.icon_link .nav_icon{
	float: left;
	margin-right: 5px;
}
.section{
	position: relative;
}
.section .sbt{
	height: 60px;
}
.sec_bottom{
	position: absolute;
	bottom: 32px;
	text-align: center;
	width: 100%;
}
.circle_arrows{ clear:both; margin:0 auto; height:auto; text-align:center; }
#intro { height: 100%; }
#intro .container { display: none; }
#intro_s1 {
	position: absolute;
	width: 100%;
	top: 45%;
	padding: 0;
}
#intro_s1 h1 {
	text-align: center; 
	margin:0;
	font-size:58px;
	text-transform:uppercase;
}
#intro_s2 ul {
	position: absolute;
	margin:0;
	top: 30%;
	list-style: none;
	padding-left: 90px;
}
#intro_s2 ul  li{
	padding: 10px 0 0 0;
	cursor: default;
	border-bottom: 2px solid;
	position: relative;
	-webkit-transition: opacity 0.5s ease-in-out;
	-moz-transition: opacity 0.5s ease-in-out;
	-o-transition: opacity 0.5s ease-in-out;
	transition: opacity 0.5s ease-in-out;
}
#intro_s2 ul  li:hover{
	z-index: 99;
}
#is2l1{ font-size: 120px;line-height: 120px; }
#is2l1 .intro_det{ top:25px; }
#is2l2{ font-size: 59px;line-height: 59px; }
#is2l2 .intro_det{ top:-108px; }
#is2l3{ font-size: 63px;line-height: 63px; }
#is2l3 .intro_det{ top:-178px; }
#is2l4{ font-size: 45px;line-height: 45px; }
#is2l4 .intro_det{ top:-253px; }
.intro_hi{
	background-position: 7px -273px;
	background-color: #666;
	-webkit-box-shadow: 0 0 3px #444;
	-moz-box-shadow: 0 0 3px #444;
	box-shadow: 0 0 3px #444;
	position: absolute;
	left: -60px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
}
.title { text-align: center; padding-top: 100px;}
.title  h1 {
	font-size:36px;
	text-transform:uppercase;
	line-height:60px;
	text-align: center;
	border-bottom: 2px solid;
	display: inline;
}
#intro_s2 ul  li .intro_det, #people_list li div.ppl_info{
	font-size: 14px;
	line-height: 20px;
	position: absolute;
	left: 160px;
	background-color: rgba(1,1,1,0.85);
	width: 240px;
	height: 140px;
	padding: 80px 30px;
	border-radius: 160px;
	border: rgba(230,230,230,0.15) 6px solid;
	z-index: 9999;
	text-transform: none;
	text-align: center;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	-moz-opacity: 0;
	-khtml-opacity: 0;
	opacity: 0;
	-webkit-transition: all 1s;
	-moz-transition: all 1s;
	-o-transition: all 1s;
	transition: all 1s;
}
#intro_s2 ul  li .intro_det{
	left: 180px;
}
#people_list li div.ppl_info{
	background-color: rgba(1,1,1,0.65);
	border: rgba(50,50,50,0.65) 6px solid;
}
#intro_s2 ul  li:hover .intro_det, #intro_s2 ul  li:hover .intro_hi, #people_list li:hover div.ppl_info{
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	-khtml-opacity: 1;
	opacity: 1;
}
.grey_circle{
	background-color: rgba(52,52,52,0.6);
	border: rgba(16,16,16,0.5) 10px solid;
	border-radius: 160px;
	font-size: 14px;
	line-height: 20px;
	width: 180px;
	height: 120px;
	padding: 60px 20px 40px 20px;
	text-align: center;
	text-transform: none;
}

#nav_circles, #people_list, #brand_list, ul.timeline{
	list-style: none;
	padding: 20px 0;
}

#nav_circles li{
	float: left;
	margin: 10px 20px;
	z-index: 999;
}
#nav_circles li a{
	color: #cccc99;
	font-size: 26px;
	line-height: 30px;
	text-decoration: none;
}
#nav_circles li a span{
	font-size: 14px;
	text-decoration: underline;
	line-height: 20px;
}

#people_list li{
	float: left;
	margin: 5px;
	padding: 0;
	height: 145px;
	width: 145px;
	background: rgba(80,80,80,0.6) url(../images/people.jpg) 0 0 no-repeat;
	border: #1c1a18 8px solid;
	position: relative;
    cursor:pointer;
}
#people_list li:hover{
	z-index: 99;
}
#people_list li>p{
	padding: 65px 10px 40px 10px;
	text-align: center;
	font-size: 18px;
}
#people_list li.ppl_next{
	background-image:none;
	/*margin-left: 350px;*/
}
#brand_list li {
	float: left;
	margin: 5px 5px 30px 5px;
	z-index: 999;
	height: 142px;
	width: 142px;
	padding: 0;
	background-repeat: no-repeat;
    background-size:50%;
    background-position:50%;
    cursor:pointer;
}
#people_list li div.ppl_info{
	display: none;
	top: 10px;
	left: 120px;
	width: 240px;
	height: 160px;
	padding: 60px 30px 80px 30px;
}
#people_list li:hover div.ppl_info{
	display: block;
}
#people_list li.info_left div.ppl_info{
	left: -290px;
}
#people_list li.info_top div.ppl_info{
	top: -170px;
}
#people_list li div.ppl_info p{
	font-size: 12px;
}
div.ppl_info.giorgia h4 {
    margin-top:-12px;
}
div.ppl_info.vanessa h4 {
    margin-top:-30px;
}
.sicon{
	background: rgba(0,0,0,0.8) url(images/staff_icon.png) 0 0 no-repeat;
	-webkit-box-shadow: 0 0 3px #444;
	-moz-box-shadow: 0 0 3px #444;
	box-shadow: 0 0 3px #444;
	width: 34px;
	height: 34px;
	border-radius: 20px;
	position: absolute;
	bottom: -25px;
	left: 130px;
	border: rgba(100,100,100,0.5) 2px solid;
}
.sicon_chicken{
	background-position: 8px 6px;
}
.sicon_cog{
	background-position: 6px -234px;
}
.sicon_flute{
	background-position: 12px -156px;
}
.sicon_thong{
	background-position: 6px -32px;
}
.sicon_qm{
	background-position: 9px -193px;
}
.sicon_amp{
	background-position: 6px -309px;
}
.sicon_running{
	background-position: 10px -119px;
}
.sicon_rose{
	background-position: 7px -273px;
}
.sicon_ballet{
	background-position: 5px -74px;
}
.sicon_butterfly {
    background-position: 6px -343px;
}
.sicon_n {
    background-position: 7px -380px;
}

#brand_list li.brand_v{
	background-image: url(../images/v_energy.png);
}

#brand_list li.brand_electrolux{
	background-image: url(../images/electrolux.png);
	background-size:75%;
}

#brand_list li.brand_virgin{
	background-image: url(../images/virgin_mobile.png);
	background-size:60%;
}

#brand_list li.brand_nescafe{
	background-image: url(../images/nescafe.png);
	background-size:65%;
}

#brand_list li.brand_unilever{
	background-image: url(../images/unilever.png);
}

#brand_list li.brand_volvo{
	background-image: url(../images/volvo.png);
}

#brand_list li.brand_lego{
	background-image: url(../images/lego.png);	
}

#brand_list li.brand_carlsberg{
	background-image: url(../images/carlsberg.png);
	background-size:65%;
}

#brand_list li.brand_ebay {
    background-image: url(../images/ebay.png);
    background-size:70%;
}

#brand_list li.brand_frucor {
    background-image: url(../images/frucor.png);
    background-size:70%;
}


.journey_wrap{
	overflow: hidden;
}
.journey_cont{
	width: 9999px;
}
.journey_slide {
	float: left;
}
.timeline_wrap{
	margin-left: 50%;
	padding: 50px 0;
}
ul.timeline{
	background: url(images/timeline.png) center top repeat-y;
	width: 110px;
	margin-left: -55px;
	overflow: show;
	padding: 0;
}
ul.timeline li{
	padding: 0;
	width: 100px;
	height: 24px;
	padding: 38px 0;
	margin: 0 0 60px 0;
	background-color: #4f4f50;
	border-width: 5px;
	position: relative;
}
ul.timeline li .time_info{
	width: 300px;
	text-align: left;
	position: absolute;
	top: -10px;
}
ul.timeline li .info_left{
	left: -320px;
}
ul.timeline li .info_right{
	left: 130px;
}
ul.timeline li:last-child{
	margin: 0;
}
ul.timeline li span{
	font-size: 30px;
	color: #000;
}
.download_circle{
	margin: 80px auto;
	margin-bottom: 20px;
	display: block;
	background: rgba(100,100,100,0.6) url(images/download.png) center center no-repeat;
	width: 80px;
	height: 20px;
	transition: all 1s;
}
.download_circle:hover{
	background-color: rgba(100,100,100,0.8);
	-webkit-box-shadow: 0 0 5px #444;
	-moz-box-shadow: 0 0 5px #444;
	box-shadow: 0 0 5px #444;
}
.caption { text-align: center; }
.caption span{
	background: rgba(100,100,100,0.6);
	padding: 5px 20px;
	border-radius: 10px;
}
.contact_col_wrap{
	margin-top: 50px;
	margin-left: 15%;
}
.contact_col{
	font-size: 16px;
	float: left;
	width: 50%;
	line-height: 20px;
	min-width: 260px;
	padding-bottom: 40px;
}
.contact_col p{
	padding-bottom: 20px;
}

.filler_photo{
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
	height: 500px;
	margin-top: 20px;
}

/*	// Back to Top */	

/* Rightside Bullet Navigation */
#right_nav{
	list-style: none;
	position: fixed;
	right: 20px;
	top:200px;
	z-index:9999;
}
#right_nav li{ margin: 0 0 2px 0; }
#right_nav a {
	display: block;
	width: 25px;
	height: 25px;
	background: url(images/dots.png) center -30px no-repeat;
}
#right_nav a.hi, #right_nav a:hover{
	background-position: center 0;
}

/* // Home static */

/* Header starts */
#header{ width:100%; position:fixed; z-index: 9999; }
.logo { position: absolute; top: 20px; left: 20px; z-index:9999; }
.menu_right {width:70%; float:right;}
.menu_nav{ width:100%;}

/* Team starts */
#team{
	background:url(../images/patterns/team_bg.png) 50% 0 repeat fixed;
	background-position: left top;
	width:100%;
	height:auto;
	margin: 0 auto;
	padding: 0;
	overflow:hidden;
	margin-top:-20px;
	padding:40px 0px 80px 0px;
}
#team h2 span{ width:82.8%;}
#team h4{ padding-bottom:5px;}
/* Teams starts */
#teams{ clear:both;}
#teams li{width:22.3%; height:auto; float:left; margin:0px 15px 18px 15px;}
#teams li:first-child{ margin-left:0;}
#teams li:last-child{ margin-right:0;}
.team_circle{ 
	clear:both;
	background-color:rgba(101,101,101,0.1);
	background-repeat:repeat;
	background-position:center top;
	width:211px;
	height:211px;
	margin:0 auto;
	-moz-border-radius:150px;
	-webkit-border-radius:150px;
	border-radius:150px;
	behavior: url(pie.htc);
	position:relative;
}
.team_circle:hover{ 
	background-color: rgba(242, 196, 49, 0.5);
	cursor:pointer; 
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;	
}

.video{ margin:0px 15px; }
.video iframe{ width:100%; height:480px; margin:30px 0;}

input[type="text"], textarea{
	float:left;
	width:70%;
	height:37px;
	background-color:rgba(234,234,234,0.2);
	background-repeat:repeat;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	behavior: url(pie.htc);
	position:relative;		
	margin:0px 0px 0px 10px;
	border:0;
	outline:0;
	padding-left:10px;
}
.ie8 input[type="text"], .ie8 textarea { background-color:#eaeaea;}
input[type="text"]{ height:35px; }
textarea{ height:100px; overflow:auto; }
input[type="submit"]{
	background-color:#f2c431;
	background-repeat:repeat;
	background-position:left top;
	opacity:0.9;	
	cursor:pointer;
	width:96px;
	height:96px;
	border:0;
	outline:0;
	font-size:20px;
	color:#2d2d2d;
	margin:20px 0px 0px 80px;
	-moz-border-radius: 80px;
	-webkit-border-radius: 80px;
	border-radius: 80px;	
	behavior: url(pie.htc);
	position:relative;	
}
input[type="submit"]:hover{ color:#2d2d2d; text-align:center; border:0; outline:0;
	opacity:1;
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;
 }
/* // Contact */

/* Footer starts */
#footer{
	padding: 20px;
	position: fixed;
	bottom: 0;
}
/* // Footer */

@keyframes bounceY {
    0% { transform: translateY(-205px);}
	0% { transform: translateY(-100px);}
    65% { transform: translateY(-52px);}
    82% { transform: translateY(-25px);}
    92% { transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);
}
@-moz-keyframes bounceY {
    0% { -moz-transform: translateY(-205px);}
    40% { -moz-transform: translateY(-100px);}
    65% { -moz-transform: translateY(-52px);}
    82% { -moz-transform: translateY(-25px);}
    92% { -moz-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -moz-transform: translateY(0px);
}
@-webkit-keyframes bounceY {
    0% { -webkit-transform: translateY(-205px);}
    40% { -webkit-transform: translateY(-100px);}
    65% { -webkit-transform: translateY(-52px);}
    82% { -webkit-transform: translateY(-25px);}
    92% { -webkit-transform: translateY(-12px);}
    55%, 75%, 87%, 97%, 100% { -webkit-transform: translateY(0px);
}
