#portfolio #main {
    background: #fff url('../images/layout/background.jpg') repeat-x 50% 0;
}

/*override global #main*/
#main {
    height: 616px;
    padding-top: 56px;
    padding-bottom: 56px;
}

/*override global #content*/
div#content {
    width: 930px;
    height: 616px;
    overflow: visible;

    -webkit-tap-highlight-color: rgba(0,0,0,0);
    tap-highlight-color: rgba(0,0,0,0);
    -webkit-perspective: 1200;
    perspective: 1200;
}


/**
 * CLIENTS
*/
div#clients {
    width: 928px;
    height: 570px;
    border-top: 1px #171616 solid;
    border-left: 1px #171616 solid;
    border-right: 1px #171616 solid;        
    border-bottom: 1px #8c9098 solid;
    background-color: #8d9099;
    z-index: 2;
	cursor: pointer;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transition-property: -webkit-transform;
    transition-property: -webkit-transform;
    -webkit-transition-duration: 1.0s;
    transition-duration: 1.0s;
}

div#clients.flipped {
    border: 1px #8d9099 solid;
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.client-wrapper {
    overflow: hidden;
}

.client-screen {
    width: 928px;
    height: 570px;
    margin: 0 auto;

	/*
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	*/
}

.client-screen img {
    display: block;
}


.client-info {
    display: none;
    width: 832px; /*928px*/
    height: 474px; /*570px;*/
    padding: 48px;
    background: url('../images/layout/client-info-back.png') repeat-x;

    /* "back side" is flipped to start */
    -webkit-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

    /*
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    */
}

.client-info .description {
    float: left;
    width: 565px;
    font-size: 1.2em;
}

.client-info .description h1 {
    margin: 0;
    padding: 0 0 20px 0;
    font-weight: bold;
    text-transform: none;
}

.client-info .services {
    float: left;
    width: 219px;
    margin-left: 48px;
}

.client-info .services h1 {
    margin: 0;
    padding: 0 0 20px 0;
    font-weight: bold;
    text-transform: none;
}

.services .services-wrapper {
    overflow: hidden;
}

.services .services-header {
    width: 219px;
    height: 5px;
    background: url('/images/portfolio/services-body-header.png') no-repeat 0 0;
}

.services .services-body {
    width: 219px;
    padding-bottom: 5px;
    background: url('/images/portfolio/services-body-footer.png') no-repeat 0 100%;
}

div.services-body ul {
    width: 219px;
    background: url('/images/portfolio/services-body-back.png') repeat-y;
}

div.services-body ul li {
    display: block;
    height: 45px;
    margin: 0;
    background-color: transparent;
    font-size: 1em;
    vertical-align: middle;
    padding: 16px 20px 8px 80px;
    width: 179px;
    border-bottom: 1px solid #c8cbce;
    font-size: 12px;
    color: #4c4f53;
}

div.services-body ul li:last-child { border-bottom: none; padding-bottom: 5px; }

div.services-body ul li h5 { color: #4c4f53; font-weight: bold; font-size: 14px; line-height: 14px; }

div.services-body ul li.development{
    background:url('/images/icons/development.png') no-repeat 20px 9px;
}
div.services-body ul li.interface-design{
    background:url('/images/icons/interface-design.png') no-repeat 17px 13px;
}
div.services-body ul li.user-experience{
    background:url('/images/icons/user-experience.png') no-repeat 15px 11px;
}
div.services-body ul li.branding{
    background:url('/images/icons/branding2.png') no-repeat 15px 10px;
}
div.services-body ul li.strategy{
    background:url('/images/icons/strategy2.png') no-repeat 19px 15px;
}

/**
 * SLIDER
*/

/* contains slider-nav shadow */
#slider-wrapper {
    position: relative;
    top: -17px;
    width: 930px;
    height: 78px;
    z-index: 0;
}

#slider-wrapper.shadow {
    background: url('../images/layout/slider-nav-shadow.png') no-repeat center bottom;
}

#slider-nav {
    width: 930px;
    height: 45px;
    padding-top: 16px;
    overflow: hidden;
    background: url('../images/layout/slider-nav-depth.png') no-repeat top left;
    /*
    -moz-box-shadow: 7px 3px 8px #CCC ;
    -webkit-box-shadow: 7px 3px 8px #CCC ;
    box-shadow: 7px 3px 8px #CCC ;
    */
}

#left {
    float: left;
    width: 15px;
    height: 45px;
    background: url('../images/layout/slider-nav-left.png') no-repeat bottom left;
}

#page-circle-container {
    float: left;
    width: 777px;
    height: 15px;
    padding: 15px 0px 15px 12px;
    background: url('../images/layout/slider-nav-center.png') repeat-x bottom center;
}

.page-circle {
    float: left;
    width: 20px;
    height: 15px;
    background: url('../images/layout/page-indicator.png') no-repeat top center;
    background-position: 0px 0px;
    cursor: pointer;
}

.page-circle.selected {
    background-position: 0px -15px;
}

#info-btn {
    float: left;
    height: 45px;
    width: 64px;
    cursor: pointer;
    background: url('../images/layout/slider-nav-info-btn.png') no-repeat;
    background-position: 0px 0px;
}

#info-btn:active, #info-btn.selected {
    background-position: 0px -45px;
}

#right-btn {
    float: left;
    height: 45px;
    width: 62px;
    cursor: pointer;
    background: url('../images/layout/slider-nav-right-btn.png') no-repeat;
    background-position: 0px 0px;
}

#right-btn:active {
    background-position: 0px -45px;
}

.services-shadow {
    -moz-box-shadow: 0px 0px 7px #CCC;
    -webkit-box-shadow: 0px 0px 7px #CCC;
    box-shadow: 0px 0px 7px #CCC;
}