@font-face {
    font-family: 'Geometric';
    src: url('fonts/geometricslab712bt-bolda-webfont.eot');
    src: url('fonts/geometricslab712bt-bolda-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/geometricslab712bt-bolda-webfont.woff') format('woff'),
         url('fonts/geometricslab712bt-bolda-webfont.ttf') format('truetype'),
         url('fonts/geometricslab712bt-bolda-webfont.svg#GeometricSlabserif712Bold') format('svg');
    font-weight: normal;
    font-style: normal;

}

* { padding:0; margin:0; outline:0; }

body {
	background:#f7f7f7 url(images/body.jpg);
	font-family: Georgia, serif;
	font-size:12px;
	line-height:20px;
	color:#4d5d62;
	overflow-x:hidden;
}

input, textarea, select { font-family: Arial, sans-serif; font-size:11px; }

a img { border:0; }

a { color:#9c0808; text-decoration: none; cursor:pointer; }
a:hover { color:#333; }

.notext { font-size:0; line-height:0; text-indent: -4000px;}

.left, .alignleft { float:left; display:inline; }
.right, .alignright { float:right; display:inline; }

.m { position:relative; }

.cl { font-size:0; line-height:0; clear:both; display:block; height:0; }

.al { text-align: left; }
.ar { text-align: right; }
.ac { text-align: center; }

h2 { font-size:44px; line-height:42px; text-transform: uppercase; color:#4d5d62; font-weight:bold; padding-bottom:40px; letter-spacing:-1px;}
h2 span{ font-size:30px; display:block; top:5px; position:relative; }
h3 { font-size:36px; line-height:42px; text-transform: uppercase; color:#4d5d62; font-weight:bold; padding-bottom:40px; letter-spacing:-1px;}
h3 span{ font-size:30px; display:block; top:5px; position:relative; }

h2 strong,
h3 strong { color:#9c0808;}

h4 { font-size:18px; line-height:24px; text-transform: uppercase; color:#4d5d62; font-weight:bold; padding-bottom:2px; }

h2, h3, h4,
#navigation,
a.button-cv,
.albert 
{ font-family:'Geometric', "Trebuchet MS", sans-serif;  }



h1#logo { font-size:0; line-height:0; width:241px; height:223px; padding-top:40px; position:relative; z-index:10; }
h1#logo a{ display:block; height:223px; text-indent: -4000px; background:url(images/logo.png); }

.shell { width:980px; margin:auto; }

.bigger { font-size:16px; line-height:24px; padding-bottom:30px;  }

#header { background:url(images/header.jpg) repeat-x 0 0; }
#header-b { background:url(images/header-b.jpg) repeat-x 0 bottom; }
#header .shell { height:700px; position:relative;}

.clouds-l { position:absolute; top:0px; left:-300px; width:369px; height:171px; background:url(images/clouds-l.png); z-index:1; }
.clouds-r { position:absolute; top:0px; left:430px; width:717px; height:173px; background:url(images/clouds-r.png); z-index:1; }
.clouds-b { position:absolute; top:425px; left:-140px; width:1190px; height:282px; background:url(images/clouds-b.png); z-index:1; }
.elements { position:absolute; top:335px; left:-40px; width:1085px; height:350px; background:url(images/elements.png); z-index:2; }
.rocket { position:absolute; top:70px; left:385px; width:625px; height:496px; background:url(images/rocket.png); z-index:2; }
.balloon { position:absolute; top:32px; left:257px; width:111px; height:135px; background:url(images/balloon.png); z-index:2; }
.albert { position:absolute; top:200px; left:185px; width:586px; height:170px; background:url(images/albert.png); z-index:3; }
.albert p{ font-weight:bold; color:#4e4e4e; text-transform: uppercase; font-size:19px; line-height:22px; padding:50px 0 0 125px; letter-spacing:-1px;}
.albert p strong{ color:#9c0808; font-size:12px; position:relative; }

#main { background:url(images/main-t.png) repeat-x 0 0; position:relative; width:100%; top:-30px; padding-top:20px; z-index:20;}
#main-bg { background:url(images/body.jpg);}
#main .shell{ min-height:500px;}

.cols { }
.cols .col{ float:left; display:inline; }
.cols .col-last{ padding-right:0 !important;}
.cols .col1{ width:175px; padding-right:30px;}
.cols .col2{ width:430px; padding-right:60px;}

.welcome { position:relative; padding-right:330px; min-height:310px;}

.circles { position:absolute; top:0; right:0; width:317px; height:310px; background:url(images/welcome-circles.png); font-size:0; line-height:0; text-indent: -4000px; }

.section { background:url(images/dash.png) repeat-x 0 bottom; padding:60px 30px; }
.section-last { background:transparent; margin-bottom:0;}

ul.services { list-style-type: none; }
ul.services li{ padding-bottom:30px; position:relative; min-height:90px; padding:0 95px 20px 0;}
ul.services li.last{ padding-bottom:0; }

.ico{ font-size:0; line-height:0; position:absolute; top:-5px; right:0; width:90px; height:90px; background:url(images/service-icons.png) no-repeat 0 0; position:absolute;}
.ico-design { background-position: 0 0;}
.ico-illustration { background-position: 0 -91px; }
.ico-cms { background-position: 0 -182px; }
.ico-mobile { background-position: 0 -273px; }

.ico-frondend { background-position: -91px 0;}
.ico-id { background-position: -91px -91px;}
.ico-backend { background-position: -91px -182px;}
.ico-seo { background-position: -91px -273px;}

.history-slider { padding:0px 0 10px 0; }

.history-container { height:214px; overflow:hidden; border-left:solid 1px #cfd2d3; width:918px; overflow:hidden; }
.history-container .jcarousel-clip,
.history-container ul{ list-style-type: none; height:214px; overflow:hidden; position:relative; width:918px; }
.history-container ul li{ float:left; display:inline; height:214px; border-right:solid 1px #cfd2d3; width:305px;}
.history-container .history { height:170px; background:url(images/history-b.png) repeat-x 0 bottom; padding:5px 10px; position:relative;}
.history-container .history p{ padding-right:120px; position:relative; z-index:2;}

.history-container .image { position:absolute; left:15px; top:10px; width:280px; height:160px; background:url(images/history.png) no-repeat 0 0;}
.history-container .image-2005 { background-position:0 0; }
.history-container .image-2006 { background-position:-281px 0; }
.history-container .image-2007 { background-position:-562px 0; }
.history-container .image-2008 { background-position:0 -161px; }
.history-container .image-2009 { background-position:-281px -161px; }
.history-container .image-2010 { background-position:-562px -161px; }
.history-container .image-now { background-position:0 -322px; }

.history-container h4 { padding:5px 10px 0 10px;}

.history-nav { font-size:0; line-height:0; position:relative; }
.history-nav a{ position:absolute; top:-140px; left:0; width:26px; height:36px; background:url(images/slider-nav.png) no-repeat 0 0; text-indent: -4000px; font-size:0; line-height:0;}
.history-nav a.prev { background-position:0 0; left:-40px;}
.history-nav a.prev:hover { background-position:0 -36px;}

.history-nav a.next { background-position:-26px 0; left:auto; right:-40px;}
.history-nav a.next:hover { background-position:-26px -36px;}

.photos { min-height:284px; background:url(images/photos.jpg) no-repeat center 0; position:relative; width:980px; margin:0 -30px; padding:0 0;}
.photos-holder { height:284px; overflow:hidden; position:relative; width:100%;}
.photos-holder .jcarousel-clip { width:980px; height:284px; overflow:hidden; position:relative; }
.photos-holder ul{ width:980px; list-style-type: none; height:284px; overflow:hidden; position:relative; }
.photos-holder ul li{ float:left; width:940px; margin-right:45px; height:284px; padding-top:63px; display:inline; }
.photos-holder ul li a{ float:left; position:relative; margin-right:-43px; left:30px; }
.photos-holder ul li a img{ padding:1px; background:#c0c0c0; border:solid 10px #ffffff; }
.photos-holder ul li a:hover img{ background:#ad3a3a; border-color:#f5f5f5;}

.photo1 { -webkit-transform: rotate(-12deg);  -moz-transform: rotate(-12deg);	transform: rotate(-12deg);}
.photo2 { -webkit-transform: rotate(3deg);  -moz-transform: rotate(3deg);	transform: rotate(3deg);}
.photo3 { -webkit-transform: rotate(-6deg);  -moz-transform: rotate(-6deg);	transform: rotate(-6deg);}
.photo4 { -webkit-transform: rotate(4deg);  -moz-transform: rotate(4deg);	transform: rotate(4deg);}


.photo5 { -webkit-transform: rotate(6deg);  -moz-transform: rotate(6deg);	transform: rotate(6deg);}
.photo6 { -webkit-transform: rotate(-4deg);  -moz-transform: rotate(-4deg);	transform: rotate(-4deg);}
.photo7 { -webkit-transform: rotate(7deg);  -moz-transform: rotate(7deg);	transform: rotate(7deg);}
.photo8 { -webkit-transform: rotate(-10deg);  -moz-transform: rotate(-10deg);	transform: rotate(-10deg);}

.photos-nav { text-align: center; font-size:0; line-height:0; padding-top:10px;}
.photos-nav a{ display:inline-block; text-indent: -4000px; width:25px; height:24px; background:url(images/photos-nav.png) no-repeat 0 0; line-height:24px;}
.photos-nav a:hover,
.photos-nav a.active{ background-position:0 -24px;}


.jobs { position:relative; width:100%;}
.jobs .col{ width:220px; float:left;  }
a.button-cv { float:left; width:263px; height:83px; background:url(images/button-cv.jpg) no-repeat 0 0; text-align:center; color:#fff; font-size:18px; line-height:80px; text-transform:uppercase; }
a.button-cv:hover { background-position:0 -85px;}

.iwant-you { position:absolute; width:362px; height:283px; position:absolute; top:-60px; right:0; background:url(images/sam.png); }

#footer { background:url(images/footer.jpg); position:relative; z-index:20; }
#footer-t { background:url(images/footer-t.png) repeat-x 0 0; position:relative; top:-10px;}
#footer .shell{ padding:10px 0 70px 0;}
#footer .section{ padding-bottom:0; margin-bottom:0; background:transparent;}
#footer h3{ font-size:22px; padding-bottom:0; line-height:30px; }

.location { width:100%;}
.location .image{ float:left; width:354px; height:204px; background:url(images/map-border.png); display:inline; margin-right:20px;}
.location .info{ float:left; width:200px; padding-top:40px; }


#map { width:346px; height:194px; position:relative; top:3px; left:4px;}

.mapinfo { font-size:11px; line-height:15px;}
.mapinfo h4{ padding:0; margin:0; font-size:13px; }

.location .social{ float:left; padding-top:25px; display:none; }
.location .social a{ font-size:0; line-height:0; text-indent: -4000px; width:45px; height:45px; background:url(images/social.png) no-repeat 0 0; float:left; margin-left:5px;}
.location .social a.facebook-link{ background-position:0 0;}
.location .social a.facebook-link:hover{ background-position:0 -47px;}

.location .social a.twitter-link{ background-position:-49px 0;}
.location .social a.twitter-link:hover{ background-position:-49px -47px;}

.location .social a.blog-link{ background-position:-100px 0; width:109px;}
.location .social a.blog-link:hover{ background-position:-100px -47px;}

#navigation { position:fixed; top:20px; right:20px; z-index:50; width:200px; overflow:hidden; }
#navigation ul{ list-style-type: none;}
#navigation ul li{ margin-bottom:2px; height:39px;}
#navigation ul li a{ font-size:14px; color:#585656; position:relative; float:right; text-align:right; text-transform: uppercase; text-shadow:#fff 0 0 3px; height:39px; line-height:39px; }
#navigation ul li a strong{ display:block; padding-right:50px; position:relative; right:-150px; }
#navigation ul li a span{ position:absolute; top:0; right:-1px; width:37px; height:39px; background:url(images/navigation-icos.png) no-repeat 0 0;}

/* #navigation ul li.active a strong { opacity: 1; -moz-opacity: 1; filter:alpha(opacity=1); right:0;} */

#navigation ul li a.about-nav span { background-position: 0 0; }
#navigation ul li a.about-nav:hover span { background-position: -48px 0; }
#navigation ul li.active a.about-nav span { background-position: -95px 0; }

#navigation ul li a.story-nav span { background-position: 0 -41px; }
#navigation ul li a.story-nav:hover span { background-position: -48px -41px; }
#navigation ul li.active a.story-nav span { background-position: -95px -41px; }

#navigation ul li a.shots-nav span { background-position: 0 -86px; }
#navigation ul li a.shots-nav:hover span { background-position: -48px -86px; }
#navigation ul li.active a.shots-nav span { background-position: -95px -86px; }

#navigation ul li a.services-nav span { background-position: 0 -130px; }
#navigation ul li a.services-nav:hover span { background-position: -48px -130px; }
#navigation ul li.active a.services-nav span { background-position: -95px -130px; }

#navigation ul li a.jobs-nav span { background-position: 0 -178px; }
#navigation ul li a.jobs-nav:hover span { background-position: -48px -178px; }
#navigation ul li.active a.jobs-nav span { background-position: -95px -178px; }

#navigation ul li a.contact-nav span { background-position: 0 -222px; }
#navigation ul li a.contact-nav:hover span { background-position: -48px -222px; }
#navigation ul li.active a.contact-nav span { background-position: -95px -222px; }