/* RESET! */

html, body, div, span, applet, object, iframe,
header, section, article, footer,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

header, section, article, footer {
	display: block;
}

/* --------------------------------------------------------------------------
	=global
--------------------------------------------------------------------------- */

/*html {
	height: 100%;
}*/

body {
	margin: 0; 
	padding: 0; 
	height: 100%;
	color: #444751;
	font: 13px/24px 'adelle-1', 'adelle-2', Georgia, Times, serif;
	font-style: normal;
	font-weight: 300;
	text-align: center;
}

#top, #bottom, #left, #right {
	background: #FF00AA;
	position: fixed;
	}
	#left, #right {
		top: 0; bottom: 0;
		width: 20px;
		}
		#left { left: 0; }
		#right { right: 0; }
		
	#top, #bottom {
		left: 0; right: 0;
		height: 20px;
		}
		#top { top: 0; }
		#bottom { bottom: 0; }
		
#boop {
	border-top: 10px solid #444751;
	margin: 0 auto;
	padding: 40px 0 0 0;
	text-align: left;
	width: 915px;
	height: 100%;
	overflow: hidden;
	max-height: 500px;
}

a:link, a:visited {
	color: #a1a3a8;
	text-decoration: none;
	-webkit-transition: color 0.2s ease-in-out;
	-moz-transition: color 0.2s ease-in-out;
	-o-transition: color 0.2s ease-in-out;
	transition: color 0.2s ease-in-out;
}

a:hover {
	color: #67708f;
	text-decoration: none;
}

h1 {
	border-bottom: 1px solid #e0e0e0;
	border-top: 5px solid #444751;
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	margin-bottom: 24px;
	padding: 28px 0 28px 0;
	text-transform: uppercase;
}

h1 span { color: #a1a3a8; }

h2 {
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	margin-bottom: 24px;
	text-transform: uppercase;
}

section header p {
	border-bottom: 1px solid #e0e0e0;
	font-size: 23px;
	line-height: 33px;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 30px;
	padding: 0 0 20px 0;
}

/* --------------------------------------------------------------------------
	=branding
--------------------------------------------------------------------------- */

#branding {
	border-top: 10px solid #1b7090;
	margin: 0 auto;
	padding: 40px 0 0 0;
	text-align: left;
	width: 915px;
	height: 100%;
}

#branding img {
	margin-bottom: 32px;
}

#branding h1 {
	border-top: 1px solid #e0e0e0;
	border-bottom-width: 0;
	font: 23px/33px "adelle-1","adelle-2", Georgia, Times, serif;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 22px;
	padding: 24px 0 0 0;
	text-align: left;
	text-transform: none;
}

#branding p {
	color: #696c74;
	margin-bottom: 25px;
}

/* --------------------------------------------------------------------------
	=work
--------------------------------------------------------------------------- */

#work {
	padding-bottom: 90px;
}

#work header {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 915px;
}

#work h1 {
	background: url(../img/icon-work.png) no-repeat 0 50%;
	margin-bottom: 0;
}
#work h1 span {
	display:none;
}

#work header p {
	border-width: 0;
	display: none;
	font: bold 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	height: 29px;
	position: absolute;
	right: 0;
	text-align: right;
	text-transform: uppercase;
	top: 25px;
	width: 200px;
}

#work header p a {
	background: url(../img/icon-close.png) no-repeat 100% 0;
	display: block;
	height: 29px;
	line-height: 29px;
	padding: 0 47px 0 0;
}

#work header p a:link, #work header p a:visited {
	color: #444751;
	text-decoration: none;
}

#work header p a:hover {
	color: #a1a3a8;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
	=work list
--------------------------------------------------------------------------- */

#work-list {
	height: 1007px;
	list-style: none;
	line-height: 0;
	margin: 30px auto 0;
	position: relative;
	text-align: left;
	width: 915px;
}

#work-list li {
	position: absolute;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-skype {
	left: 0;
	top: 0;
}

#work-list-verizon {
	left: 0;
	top: 526px;
}

#work-list-second-life {
	left: 0;
	top: 774px;
}

#work-list-better-place {
	left: 310px;
	top: 0;
}
#work-list-sony {
	left: 310px;
	top: 248px;
}
#work-list-sonar {
	left: 310px;
	top: 774px;
}
#work-list-voda360web {
	left: 620px;
	top: 0;
}
#work-list-vodashop {
	left: 620px;
	top: 526px;
}
#work-list-adobe {
	left: 620px;
	top: 774px;
}

#work-list a {
	color: #fff;
	display: block;
	font: 12px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-weight: 100;
	height: 233px;
	text-decoration: none;
	text-transform: uppercase;
	position: relative;
	width: 295px;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list-skype, #work-list-skype a {
	background: #444750 url(../img/proj-thumb-skype.jpg) no-repeat 0 0;
}

#work-list-verizon, #work-list-verizon a {
	background: #444750 url(../img/proj-thumb-verizon.jpg) no-repeat 0 0;
}

#work-list-second-life, #work-list-second-life a {
	background: #444750 url(../img/proj-thumb-second-life.jpg) no-repeat 0 0;
}

#work-list-better-place, #work-list-better-place a {
	background: #444750 url(../img/proj-thumb-better-place.jpg) no-repeat 0 0;
}

#work-list-sony, #work-list-sony a {
	background: #444750 url(../img/proj-thumb-sony.jpg) no-repeat 0 0;
}

#work-list-sonar, #work-list-sonar a {
	background: #444750 url(../img/proj-thumb-sonar.jpg) no-repeat 0 0;
}

#work-list-voda360, #work-list-voda360web a {
	background: #444750 url(../img/proj-thumb-voda360web.jpg) no-repeat 0 0;
}

#work-list-vodashop, #work-list-vodashop a {
	background: #444750 url(../img/proj-thumb-vodashop.jpg) no-repeat 0 0;
}

#work-list-adobe, #work-list-adobe a {
	background: #444750 url(../img/proj-thumb-adobe.jpg) no-repeat 0 0;
}

#work-list a:hover {
	background-color: #323437;
}

#work-list-skype a,
#work-list-sony a,
#work-list-voda360web a {
	height: 511px;
}

#work-list span.project-name {
	bottom: 0;
	display: block;
	left: 0;
	line-height: 20px;
	padding: 0 0 15px 20px;
	position: absolute;
	width: 275px;
}

#work-list span.project-extra {
	display: block;
	height: 184px;
	left: 0;
	position: absolute;
	top: 0;
	width: 295px;
}

#work-list-skype span.project-extra,
#work-list-sony span.project-extra,
#work-list-voda360web span.project-extra {
	height: 462px;
}

#work-list li a span.project-extra {
	opacity: 0;
	z-index: 20;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

#work-list a:hover span.project-extra {
	opacity: 1;
}

#work-list-skype a span.project-extra, #work-list-skype a:hover span.project-extra {
	background: url(../img/proj-thumb-skype.jpg) no-repeat -295px 0;
}

#work-list-vodashop a span.project-extra, #work-list-vodashop a:hover span.project-extra {
	background: url(../img/proj-thumb-vodashop.jpg) no-repeat -295px 0;
}

#work-list-second-life a span.project-extra, #work-list-second-life a:hover span.project-extra {
	background: url(../img/proj-thumb-second-life.jpg) no-repeat -295px 0;
}

#work-list-better-place a span.project-extra, #work-list-better-place a:hover span.project-extra {
	background: url(../img/proj-thumb-better-place.jpg) no-repeat -295px 0;
}

#work-list-sony a span.project-extra, #work-list-sony a:hover span.project-extra {
	background: url(../img/proj-thumb-sony.jpg) no-repeat -295px 0;
}

#work-list-sonar a span.project-extra, #work-list-sonar a:hover span.project-extra {
	background: url(../img/proj-thumb-sonar.jpg) no-repeat -295px 0;
}

#work-list-voda360web a span.project-extra, #work-list-voda360web a:hover span.project-extra {
	background: url(../img/proj-thumb-voda360web.jpg) no-repeat -295px 0;
}

#work-list-verizon a span.project-extra, #work-list-verizon a:hover span.project-extra {
	background: url(../img/proj-thumb-verizon.jpg) no-repeat -295px 0;
}

#work-list-adobe a span.project-extra, #work-list-adobe a:hover span.project-extra {
	background: url(../img/proj-thumb-adobe.jpg) no-repeat -295px 0;
}

/* --------------------------------------------------------------------------
	=work details
--------------------------------------------------------------------------- */

#work-container {
	background-color: #e8e9ea;
	height: 0px;
	margin-top: -1px;
	overflow: hidden;
	position: relative;
	width: 100%;
}

div.work-details {
	border-bottom: 1px solid #cccdce;
	border-top: 1px solid #cccdce;
	display: none;
	position: absolute;
	top: 0;
	width: 100%;
}

div.work-details section {
	margin: 0 auto;
	padding: 50px 0 65px 0;
	text-align: left;
	width: 915px;
}

div.work-details section:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

.screenshots {
	border: 1px solid #cccdce;
	height: 635px;
	position: relative;
	width: 915px;
}

.screenshots ul,
.screenshots li {
	line-height: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

.screenshots li {
	height: 572px;
	position: relative;
	width: 915px;
}

.screenshots img {
	left: 0px;
	position: absolute;
	top: 0px;
	z-index: 0;
}

.screenshots img.empty {
	z-index: 100;
}

.screenshots div {
	background-color: #444751;
	bottom: 0;
	color: #a2a3a8;
	font: bold 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	height: 63px;
	position: absolute;
	left: 0;
	width: 915px;
}

.screenshots div span {
	position: absolute;
}

.screenshots div span.control-prev {
	left: 15px;
	top: 16px;
}

.screenshots div span.control-next {
	left: 56px;
	top: 16px;
}

.screenshots div span.control-counter {
	right: 30px;
	top: 26px;
}

.screenshots div span a {
	display: block;
	height: 31px;
	text-indent: -9999px;
	width: 31px;
}

.screenshots div span.control-prev, .screenshots div span.control-prev a {
	background: url(../img/control-prev.png) no-repeat 0 0;
	height: 31px;
	width: 31px;
}

.screenshots div span.control-next, .screenshots div span.control-next a {
	background: url(../img/control-next.png) no-repeat 0 0;
	height: 31px;
	width: 31px;
}

.screenshots div span a:hover {
	background-position: 0 -31px;
}

#work h2 {
	font: 44px/44px "adelle-1","adelle-2", Georgia, Times, serif;
	font-style: normal;
	text-transform: none;
	font-weight: 300;
	margin: 0 0 20px 0;
	padding: 50px 0 0 0;
}

#work h2 span {
	color: #96989c;
	font-style: italic;
	font-weight: 300;
}

#work h3 {
	border-bottom: 5px solid #444751;
	font-size: 23px;
	line-height: 33px;
	font-style: normal;
	font-weight: 300;
	margin-bottom: 35px;
	padding: 0 0 30px 0;
}

#work article {
	float: left;
	margin-right: 40px;
	width: 270px;
}

#work article p {
	padding-top:24px;
}

#work article.detail-result {
	margin-right: 0;
}

#work article h4 {
	color: #96989c;
	font: 13px/13px 'myriad-pro-1', 'myriad-pro-2', Helvetica, Arial, sans-serif;
	font-style: normal;
	font-weight: 600;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
	=clients
--------------------------------------------------------------------------- */

#clients {
	margin: 0 auto;
	padding-bottom: 65px;
	text-align: left;
	width: 915px;
}

#clients img {
	float: left;
	margin-bottom: 37px;
}

#clients:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#clients h1 {
	background: url(../img/icon-clients.png) no-repeat 0 50%;
	margin-bottom: 70px;
}

/* --------------------------------------------------------------------------
	=services
--------------------------------------------------------------------------- */

#services {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 90px;
	width: 915px;
}

#services:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#services h1 {
	background: url(../img/icon-services.png) no-repeat 0 50%;
}

#services article {
	float: left;
	margin: -25px 40px 0 0;
	width: 270px;
}

#services article#services-deliver { margin-right: 0; }

#services article h2 {
	overflow: visible;
	margin-bottom: 0;
	padding: 35px 0 35px 44px;
}

#services article#services-discover h2 {
	background: url(../img/services1.png) no-repeat 0 50%;
}

#services article#services-design h2 {
	background: url(../img/services2.png) no-repeat 0 50%;
}

#services article#services-deliver h2 {
	background: url(../img/services3.png) no-repeat 0 50%;
}

#services article p, #services article ul {
	color: #696c74;
	margin-bottom: 25px;
}

#services article ul {
	margin: 0 0 0 15px;
}

/* --------------------------------------------------------------------------
	=leadership
--------------------------------------------------------------------------- */

#leadership {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 90px;
	width: 915px;
}

#leadership:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#leadership h1 {
	background: url(../img/icon-leadership.png) no-repeat 0 50%;
}

#leadership article {
	float: left;
	margin-right: 40px;
	width: 270px;
}

#leadership article#leadership-lin { margin-right: 0; }

#leadership article img {
	margin-bottom: 30px;
}

#leadership article p {
	color: #696c74;
	margin-bottom: 25px;
}

/* --------------------------------------------------------------------------
	=contact
--------------------------------------------------------------------------- */

#contact {
	margin: 0 auto;
	text-align: left;
	padding-bottom: 90px;
	width: 915px;
}

#contact:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

#contact h1 {
	/*background: url(../img/icon-contact.png) no-repeat 0 50%;*/
}

#contact article {
	float: left;
	width: 228px;
}

#contact ul {
	list-style: none;
	margin: 0;
}

#contact a:after {
	content: url(../img/icon-arrow.png);
	position: relative;
}

#contact span.street-address {
	display: block;
}

/* --------------------------------------------------------------------------
	=footer
--------------------------------------------------------------------------- */

footer {
	background-color: #444751;
	color: #a2a3a8;
	margin: 0 auto;
	padding: 25px 35px 90px 35px;
	position: relative;
	text-align: left;
	width: 845px;
}

footer p.location {
	color: #fff;
	font-size: 19px;
	padding-top: 7px;
}