/* Basic */
html { padding: 0; margin: 0; }
body { padding: 0 0; max-width: 480px; margin: 0 auto; font: 14px "Segoe UI", Arial, sans-serif; color: #333333; line-height: 1.71428;  }

h1, h2, h3, h4, h5, h6, caption { margin: 1em 0 0.25em; }

h1 { font-size: 31px; margin: 0px 0 10px;  }
h2 { font-size: 30px; line-height: 30px; margin: 20px 0 0.8em; text-transform: uppercase; font-weight: 100; line-height: 1.3; }
h3 { color: #477506; }
h3, caption { font-size: 24px; margin: 0.5em 0 0.25em;  }
h4, h5, h6 { font-size: 100%; margin: 0.5em 0 0.25em; }

p { text-align: justify; }
p, li { margin-top: 0; }
p, ul, ol, dl, table { margin-top: 0; }

ul { list-style-type: none; padding: 0; }
ul li { background: url("../img/bg/li.png") no-repeat scroll 0 50% transparent; margin: 0; padding-left: 25px; margin-bottom: 10px; }

a { color: #547fad; }
a:visited {color: #34577c;}
a:hover { color: #333333; }

/* Misc */
.fl { display: inline; float: left; }
.fr { display: inline; float: right; }
.cl { clear: left; }
.cr { clear: right; }
.cb { clear: both; }

.out { position: absolute; left: -2000px; top: -2000px; }
.break { height: 0px; font-size: 1px; clear: both; overflow: hidden; visibility: hidden; display: block; }
.small, small { font-size: 12px;}
.suppress { color: #666666; font-weight: normal; }
.hidden { display: none; }

.clearfix { zoom: 1; }
.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }

.center { text-align: center; }
.left { text-align: left !important; }
.right { text-align: right; }

/* Tables */
table { margin: 0 0 1.7em 0; background: none; border: 0; border-collapse: collapse; clear: both; width: 100%; font-size: 100%; }
caption { text-align: left; padding-bottom: 5px; margin-bottom: 0; margin-top: 0; }
th, td {vertical-align: top; padding: 5px 0px; border: 1px dotted #9f9e9e; border-width: 1px 0; text-align: left; }
th {  }
th[align=right] { text-align: right; }
th[align=center] { text-align: center; }
table td p { margin: 0.1em 0; }

/* Half columns */
.col-h-l, .col-h-r {width: 47%; }
.col-h-l {float: left; display: inline;}
.col-h-r {float: right; display: inline;}

/* Images */
img { border: 0; padding: 0; margin: 0 auto; margin-bottom: 1.7em; display: block; }

/* Header */
.section-top { background: url(../img/bg/bg-mobile-top.jpg) no-repeat 50% 0; height: 82px; color: #fff; border-bottom: 1px solid #17283d; }
.section-top a, .section-top a { color: #fff; }
.section-top .logo { display: inline-block; float: left;}
.section-top .logo a { display: block; height: 26px; padding: 30px 0 0 30px; }
.section-top .logo a img { margin: 0; }
.section-top .video { width: 420px; height: 256px; margin: 20px auto; }
.section-top .main-menu { padding: 10px; display: inline-block; float: right; }

.main-menu, .menu-container { position:relative; }
.menu-container { display: none; }
.main-menu a.menu:focus { background-position: 0 -63px; }
.main-menu a.menu {cursor: pointer; height: 63px; width: 64px; background: url(../img/bg/menu-icon.png) no-repeat scroll 0 0 transparent; display: block; }
.main-menu .menu-arrow { display: block; position: absolute; top: 3px; left: 26px; width: 12px; height: 4px; background: url(../img/bg/menu-arrow.png) no-repeat scroll 0 0 transparent; }
.main-menu ul.hidden-menu { background-color:#fff; position:absolute; z-index: 10; left:auto; right:0; top: 7px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: #000 0px 10px 20px; -moz-box-shadow: #000 0px 10px 20px; box-shadow: #000 0px 10px 20px; }
.main-menu ul.hidden-menu li:first-child { border: none; }
.main-menu ul.hidden-menu li { background: none; padding: 0; margin: 0; border-top: 1px solid #dedede; width: 300px; }
.main-menu ul.hidden-menu li a { display:block; font-size: 20px; padding:15px 60px; color:#626262; text-decoration:none; text-transform: uppercase;}
.main-menu ul.hidden-menu li a:hover { color: #547fad; }
.main-menu ul.hidden-menu li a.current { color: #2b2b2b;  background: url(../img/bg/current.png) no-repeat 30px 50%; } 
.main-menu ul.hidden-menu li ul {position:relative; top:2px; width:auto; margin-bottom: 20px; }         
.main-menu ul.hidden-menu li ul li { border: none; }
.main-menu ul.hidden-menu li ul li a{ font-size: 16px; padding: 8px 60px; text-transform: none; }
.main-menu ul.hidden-menu li ul li a.current{ background: url(../img/bg/current-small.png) no-repeat 30px 50%; }

.more-about { text-align: center; padding: 80px 0 40px 0; background: url(../img/bg/bg-more.jpg) no-repeat; }
.more-about p.perex { font-size: 20px; font-size: 20px; font-weight: bold; color: #34577c; }
.more-about p { text-align: center; }
.project-link { padding: 24px 0; text-align: center; }
.project-link .inline-btn span { text-transform: uppercase; }

.inline-btn { display: inline-block; height: 35px; line-height: 35px; background-color: #fff; text-decoration: none; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; position:relative; padding-right: 15px; }
.inline-btn span { background: url(../img/bg/btn-arrow.png) no-repeat right 50%; padding: 0 15px; color: #737373; white-space: nowrap; border: none; cursor: pointer; }
.btn-blue { background: url(../img/bg/bg-button.png) repeat-x; height: 48px; line-height: 44px; -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; margin-top: 10px; }
.btn-blue span { font-weight: bold; font-size: 20px; color: #fff; padding: 0 40px; background: none; text-shadow: 0px 1px 0px #345476; filter: dropshadow(color=#345476, offx=0, offy=1); }

.breadcrumb { color: #34577c; padding: 15px 0 15px 30px; background-color: #dce2e9; border-top: 1px solid #eef1f4; border-bottom: 1px solid #c5ccd4; }
.breadcrumb a { background: url("../img/bg/breadcrumb-arrow.png") no-repeat scroll right 60% transparent; margin-right: 10px; padding-right: 20px; }

.section-main { background: #fff; position: relative; padding: 30px; }
.section-main .bullet { background: url("../img/bg/bullet-mobile.png") no-repeat; width: 44px; height: 46px; position: absolute; left: 50%; top: 0; margin: -23px 0 0 -22px; }
.section-main .logo { text-align: center; margin: 10px 0 20px; } 

.annot { font-size: 16px; line-height: 24px; color: #547fad; text-align: center; }

a.more { text-decoration: none; }
.section-main a.more { color: #999999; } 

.awards { text-transform: uppercase; text-align: center; background: url("../img/bg/bg-awards.png") no-repeat 50% 0; padding-top: 44px; width: 240px; margin: 0 auto 50px; line-height: 1; }
.awards p { margin-bottom: 10px; }
.awards p + p { border-top: 1px solid #b2b2b2; padding-top: 10px; } 

.gallery { height: 467px; padding-bottom: 60px; margin-bottom: 40px; position: relative; }
.gallery .nav { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background: url("../img/bg/mobile-gallery-paging2.png") 50% 0 no-repeat; padding-top: 11px; }
.gallery .nav a { display: inline-block; width: 34px; height: 0; padding-top: 34px; overflow: hidden; background: url("../img/bg/mobile-gallery-paging.png") 0 0 no-repeat; margin: 0 3px; outline:none; }  
.gallery .nav a.activeSlide { background-position: 0 -40px;  }

.footer { background: url("../img/bg/bg-mobile-bot.jpg") repeat-y 50% 0; height: 34px; color: #fff; text-align: center; padding: 15px 0; }
.footer a, .footer a:visited, .footer a:hover { color: #fff; }

/* PROJECTS */

.projects { margin:0; zoom:1; border-bottom: 1px solid #d0d0d0; margin-bottom: 50px; }
.projects h2 { text-align: center; }
.projects ul { font-family:"Courier New", monospace; letter-spacing:-0.63em; word-spacing:-0.63em; white-space:nowrap; position:relative; zoom:1; overflow:visible; overflow-x:scroll; margin-bottom: 50px; padding-top: 35px; }
.projects .list { width:100%; position:relative; }
.projects li { background: none; position:relative; display:inline-block; *display:inline; zoom:1; vertical-align:top; width:200px; margin:0; padding:0 20px 0 0; font-family:"segoe ui", arial, helvetica, sans-serif; letter-spacing:0px; word-spacing:0px; text-align:center; text-transform:uppercase; }
.projects li > a { text-decoration:none; color:#333;}
.projects .img { width:200px; height:200px; display:block; overflow:hidden;	font-size:0px; line-height:200px; position:relative; text-align:center; margin:0 0 14px; background:#fff; }
.projects .img .sprite { background:url("../img/bg/mask.png") 0 -2500px no-repeat; }
.reference .img .sprite  { background-position:0 -1200px; }
.projects li > a:hover .img .sprite { background-position: 0 -2700px; }
.projects .desc { white-space:normal; }
.projects .desc:after { background: none repeat scroll 0 0 #CCCCCC; content: ""; height: 11px; left: 100px; position: absolute; top: 200px; width: 1px; }
.projects li.empty .img { background:#fff url("../img/bg/empty.png") 50% 50% no-repeat; }
.projects .pager { position:absolute; height:34px; top:0; left:39%; margin:0; }
.projects .pager a { display:inline-block; width:34px; height:34px; background:url("../img/btn/pager.png") 0 0 no-repeat; margin-left: 10px; }
.projects .pager .next { background-position:-50px 0; float: right; }
.projects .pager .prev.disabled { background-position:0 -50px; }
.projects .pager .next.disabled { background-position:-50px -50px; }

.sprite { position:absolute; top:0px; left:0px; display:block; width:100%; height:100%; }
a .sprite { cursor:pointer; }

.js .projects ul { overflow:hidden; }
.js .sk-carousel-x { position:relative; width:100%; overflow:hidden; }
.js .sk-carousel-x ul { overflow:visible; }