@font-face
{
font-family: ProximaNova;
src: url('/fonts/proximanova-regular.eot');
src: url('/fonts/proximanova-regular.eot?#iefix') format('embedded-opentype'),
     url('/fonts/proximanova-regular.woff'),
     url('/fonts/proximanova-regular.svg'),
     url('/fonts/proximanova-regular.ttf'); /* IE9 */
}

@font-face
{
font-family: ProximaNova-light;
src: url('/fonts/proximanova-light.eot');
src: url('/fonts/proximanova-light.eot?#iefix') format('embedded-opentype'),
     url('/fonts/proximanova-light.woff'),
     url('/fonts/proximanova-light.svg'),
     url('/fonts/proximanova-light.ttf'); /* IE9 */
}

@font-face
{
font-family: ProximaNova-light-italic;
src: url('/fonts/proximanova-lightitalic.eot');
src: url('/fonts/proximanova-lightitalic.eot?#iefix') format('embedded-opentype'),
     url('/fonts/proximanova-lightitalic.woff'),
     url('/fonts/proximanova-lightitalic.svg'),
     url('/fonts/proximanova-lightitalic.ttf'); /* IE9 */
}

@font-face
{
font-family: NovecentoWide-light;
src: url('/fonts/novecentowide-light.eot');
src: url('/fonts/novecentowide-light.eot?#iefix') format('embedded-opentype'),
     url('/fonts/novecentowide-light.woff'),
     url('/fonts/novecentowide-light.svg'),
     url('/fonts/novecentowide-light.ttf'); /* IE9 */
}

@font-face
{
font-family: OpenSans-italic;
src: url('/fonts/opensans-italic.eot');
src: url('/fonts/opensans-italic.eot?#iefix') format('embedded-opentype'),
     url('/fonts/opensans-italic.woff'),
     url('/fonts/opensans-italic.svg'),
     url('/fonts/opensans-italic.ttf'); /* IE9 */
}

@font-face
{
font-family: OpenSans;
src: url('/fonts/opensans-regular.eot');
src: url('/fonts/opensans-regular.eot?#iefix') format('embedded-opentype'),
     url('/fonts/opensans-regular.woff'),
     url('/fonts/opensans-regular.svg'),
     url('/fonts/opensans-regular.ttf'); /* IE9 */
}

@font-face
{
font-family: OpenSans-light;
src: url('/fonts/opensans-light.eot');
src: url('/fonts/opensans-light.eot?#iefix') format('embedded-opentype'),
     url('/fonts/opensans-light.woff'),
     url('/fonts/opensans-light.svg'),
     url('/fonts/opensans-light.ttf'); /* IE9 */
}

@font-face
{
font-family: NovecentoWide;
src: url('/fonts/novecentowide-normal.eot');
src: url('/fonts/novecentowide-normal.eot?#iefix') format('embedded-opentype'),
     url('/fonts/novecentowide-normal.woff'),
     url('/fonts/novecentowide-normal.svg'),
     url('/fonts/novecentowide-normal.ttf'); /* IE9 */
}

@font-face
{
font-family: NovecentoWide-book;
src: url('/fonts/novecentowide-book.eot');
src: url('/fonts/novecentowide-book.eot?#iefix') format('embedded-opentype'),
     url('/fonts/novecentowide-book.woff'),
     url('/fonts/novecentowide-book.svg'),
     url('/fonts/novecentowide-book.ttf'); /* IE9 */
}

@font-face
{
font-family: Montserrat;
src: url('/fonts/montserrat-regular.eot');
src: url('/fonts/montserrat-regular.eot?#iefix') format('embedded-opentype'),
     url('/fonts/montserrat-regular.woff'),
     url('/fonts/montserrat-regular.svg'),
     url('/fonts/montserrat-regular.ttf'); /* IE9 */
}

::selection { background: #a9c816; }
::-moz-selection { background: #a9c816; }
::-o-selection { background: #a9c816; }

body {
    font-size: 14px;
    color: #8c8c8c;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
    overflow-y: auto;
}

#wrapper {
    width: 100%;
    min-width: 990px;
    overflow: hidden;
}
/**** header ****/

#header {
    background: #fff;
    width: 100%;
    position: fixed;
    z-index: 100;
    border-bottom: 1px solid #d8d8d8;
}

.header-content {
    display: block;
    width: 990px;
    height: 72px;
    margin: 0px auto;
}

.bg .header-content { width: 1035px; }

#header .logo {
    width: 192px;
    display: inline-block;
    overflow: hidden; 
    position: relative;
    margin: 7px 20px; 
}

#header h1 {
    text-indent: -9999px;
    position: absolute;
}

#header nav {
    display: inline-block;
    height: 72px;
    padding: 0 7px;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
}

.nav-left {
    float: left;
    margin-left: 107px;
}

.bg .nav-left { margin-left: 107px; }

.nav-right {
    float: right;
    margin-right: 28px;
}

.bg .nav-right { margin-right: 28px; }

#header nav a {
    display: inline-block;
    margin: 27px 16px;
    color: #8c8c8c;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'OpenSans';
}

#header nav a:hover, #menu-active {
    color: #a9c816!important;
}

nav div {
    display: inline-block;
    border-left: 1px solid #d8d8d8;
    margin-left: 6px;
    top: -2px;
    position: relative;
}

#header .language {
    width: 30px;
    height: 24px;
    background: #aac919;
    color: #fff;
    line-height: 20px;
    text-align: center;
    margin: 24px 18px 26px 25px;
    padding-top: 2px;
}

#header .language:hover {
    background: #0c0c0c;
    color: #fff;
}

/**** project-content ****/
#projects-content {
    width: 100%;
    min-height: 1014px;
    position: relative;
    margin-top: 72px;
}

#projects-content img {
    display: block;
}

/**** slogan ****/
#slogan {
    background: #ffffff;
    width: 100%;
    margin: 0px auto 0;
    padding: 22px 0 31px 0;
    position: absolute;
    top: 82px;
    border-bottom: 1px solid #d8d8d8;
}

#slogan .vert_line {
    background: #ffffff;
    display: block;
    width: 1px;
    height: 78px;
    margin: 0px auto;
    position: absolute;
    top: -84px;
    left: 50%;
    margin-left: -1px;
}

#slogan .romb {
    background: url('/images/romb.png') center top;
    display: block;
    width: 18px;
    height: 20px;
    margin: 0px auto;
    position: relative;
    top: -31px;
}

#slogan h1 {
    font-size: 36px;
    line-height: 40px;
    color: #0c0c0c;
    font-family: 'NovecentoWide-light';
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bg #slogan h1 { font-family: 'OpenSans-light'; }

#slogan .separator {
    background: url('/images/separator.png') -5px center;
    display: block;
    width: 186px;
    height: 30px;
    margin: 8px auto;
}

#slogan h3 {
    font-size: 20px;
    line-height: 32px;
    color: #8c8c8c;
    font-family: 'OpenSans-light';
    text-align: center;
    letter-spacing: 0.2px;
}

#slogan .connectors {
    background: url('/images/conectors.png') center top;
    display: block;
    width: 22px;
    height: 9px;
    margin: 0px auto;
    position: relative;
    bottom: -41px;
}

/**** timeline ****/
#timeline {
    width: 100%;
    margin: 0px auto 0;
    position: absolute;
    top: 356px;
}

.timeline-line {
    width: 10px;   
    position: relative;
    left: 50%;
    margin-left: -4px;  
}

.timeline-line .line {
    background: #ffffff;
    display: inline-block;
    width: 1px;
    float: left;
    margin: 0px 1px;
    height: 0px;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

.timeline-line .line-grey {
    background: #d8d8d8;
}

.timeline-line .line2 {
    margin: 0px 2px;
}

.timeline-line .line3 {
    position: absolute;
    top: 344px;
    left: 2px;
}

.timeline-line .number {
    background: #ffffff;
    width: 25px;
    height: 0px;
    position: absolute;
    top: 320px;
    left: -9px;
    margin: 0 6px 0 0;
    display: inline-block;
    font-size: 20px;
    line-height: 24px;
    font-family: 'Montserrat';
    text-align: center;
    color: #0c0c0c;
    text-decoration: none;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

.timeline-line .number2 {
    background: #1f1f1f;
    color: #fff;
}

#timeline .items {
    width: 990px;
    display: block;
    position: relative;
    margin: 0px auto;
}

#timeline .items .item {
    position: relative;
    width: 495px;
    z-index: 50;
    display: block;
    opacity: 0;
}

#timeline .items .item_checked {
    opacity: 1;
}

#timeline .items .item-left { float: left; top: 30px; }
#timeline .items .item-left2 { top: 190px; }
#timeline .items .item-left3 { top: 497px; }
#timeline .items .item-left4 { top: 46px; }
#timeline .items .item-left5 { top: 461px; }
#timeline .items .item-right { float: right; top: 30px; }
#timeline .items .item-right2 { top: 462px; }
#timeline .items .item-right3 { top: 31px; }
#timeline .items .item-right4 { top: 174px; }
#timeline .items .item-right5 { top: 496px; }

#timeline .items .item-left .rotate {
    transform: perspective(750px) rotateY(90deg);
    -ms-transform: perspective(750px) rotateY(90deg);
    -moz-transform: perspective(750px) rotateY(90deg);
    -webkit-transform: perspective(750px) rotateY(90deg);
    -o-transform: perspective(750px) rotateY(90deg);
    transform-origin: right 0 0;
    -ms-transform-origin: right 0 0;
    -webkit-transform-origin: right 0 0;
    -o-transform-origin: right 0 0;
    -moz-transform-origin: right 0 0;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out; 
}

#timeline .items .item-right .rotate {
    transform: perspective(750px) rotateY(-90deg);
    -ms-transform: perspective(750px) rotateY(-90deg);
    -moz-transform: perspective(750px) rotateY(-90deg);
    -webkit-transform: perspective(750px) rotateY(-90deg);
    -o-transform: perspective(750px) rotateY(-90deg);
    transform-origin: left 0 0;
    -ms-transform-origin: left 0 0;
    -webkit-transform-origin: left 0 0;
    -o-transform-origin: left 0 0;
    -moz-transform-origin: left 0 0;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
}

#timeline .items .item .rotated {
    transform: perspective(750px) rotateY(0deg);
    -ms-transform: perspective(750px) rotateY(0deg);
    -moz-transform: perspective(750px) rotateY(0deg);
    -webkit-transform: perspective(750px) rotateY(0deg);
    -o-transform: perspective(750px) rotateY(0deg);
}

#timeline .items .item-left .item-content {
    position: absolute;
    right: 0px;
    top: 16px;
    padding: 16px;  
}

#timeline .items .item-left .item-content2 { top: 0px; left: 161px; }

#timeline .items .item-left .imgs-content {
    right: 156px;
    top: 0px;
    padding: 0px; 
}

#timeline .items  .img-content {
    display: block;
    overflow: hidden;
    position: relative;
    margin-bottom: 12px; 
}

#timeline .imgs-content .img-hover {
    background: #fff;
    display: none;
    opacity: 0.9;
    position: absolute;
    width: 330px;
    height: 130px;
    top: 5px;
    right: 5px;
    font-size: 16px;
    line-height: 124px;
    font-family: 'ProximaNova';
    text-align: center;
    color: #aac919;
    text-transform: uppercase;
    cursor: pointer;
}

.bg #timeline .imgs-content .img-hover { font-family: 'OpenSans'; }

#timeline .imgs-content .img-hover2 { width: 152px; line-height: 134px; }
#timeline .imgs-content .img-hover3 { height: 150px; line-height: 150px; }
#timeline .imgs-content .img-hover4 { width: 208px; right: 127px; height: 208px; line-height: 206px; }
#timeline .imgs-content .img-hover5 { width: 208px; right: 4px; height: 208px; line-height: 206px; }
#timeline .imgs-content .img-hover6 { width: 153px; line-height: 134px; margin-right: 176px; }

#timeline .items .item-left .imgs-content img {
    display: block;   
    float: right;
}

#timeline .items .item-right .item-content {
    position: absolute;
    padding: 15px;
    font-size: 18px;
}

#timeline .items .item-right .item-content3 { top: 15px; }

#timeline .items .item-right .item-content2 { top: 14px; }

#timeline .items .item-right .item-content4 { top: 1px; }

#timeline .items .item-left .item-connection_line {
    background: url('/images/item1-line.png') -1px top no-repeat;
    width: 480px;
    height: 22px;
    display: block;
    position: absolute;
}

#timeline .items .item-left .item-connection_line2 {
    background: url('/images/item3-line.png') -2px top no-repeat;
    width: 142px;
    height: 308px;
    display: block;
    position: absolute;
    right: 0px;
    border-left: 1px solid #fff;
}

#timeline .items .item-left .item-connection_line3,
#timeline .items .item-right .item-connection_line3 {
    background: url('/images/item1-line.png') center bottom no-repeat;
    width: 318px;
    height: 3px;
    display: block;
    position: absolute;
    right: 1px;
}

#timeline .items .item-right .item-connection_line {
    background: url('/images/item2-line.png') center top no-repeat;
    width: 386px;
    height: 406px;
    display: block;
    position: absolute;
    top: 47px;
    left: 1px;
}

#timeline .items .item-right .item-connection_line2 {
    background: url('/images/item4-line.png') center top no-repeat;
    width: 945px;
    height: 22px;
    display: block;
    position: absolute;
    left: 16px;
}

#timeline .items .item-right .item-connection_line4 { background: url('/images/item5-line.png') center top no-repeat; }
#timeline .items .item-left .item-connection_line5 { background: url('/images/item6-line.png') center -1px no-repeat; }

#timeline .items .item-right .item-connection_line6 { background: url('/images/item10-line.png') left top no-repeat; }
#timeline .items .item-left .item-connection_line7 { background: url('/images/item8-line.png') right top no-repeat; width: 405px; height: 408px; top: 31px; }
#timeline .items .item-right .item-connection_line8 { background: url('/images/item9-line.png') left top no-repeat; top: 15px; }
#timeline .items .item-left .item-connection_line9 { background: url('/images/item7-line.png') right top no-repeat; width: 945px; right: 15px; }
#timeline .items .item-right .item-connection_line10 { background: url('/images/item10-line.png') right bottom no-repeat; left: 0px; }


#timeline .items .item-left .item-content p {
    font-size: 14px;
    line-height: 17px;
    font-family: 'ProximaNova-light';
    text-align: right;
    color: #fff;
    letter-spacing: 0.2px;
}

.bg #timeline .items .item-left .item-content p { font-family: 'OpenSans-light'; }

#timeline .items .item-left .item-content3 p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'ProximaNova-light';
    text-align: right;
    color: #aaaaaa;
}

#timeline .items .item-left .item-content a {
    display: block;
    height: 27px;
    font-size: 14px;
    line-height: 26px;
    vertical-align: top;
    font-family: 'ProximaNova-light';
    color: #fff;
    text-decoration: none;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.bg #timeline .items .item-left .item-content a { font-family: 'OpenSans-light'; }

#timeline .items .item-right .item-content a {
    display: block;
    height: 27px;
    font-size: 14px;
    line-height: 28px;
    vertical-align: top;
    font-family: 'ProximaNova-light';
    color: #1f1f1f;
    text-decoration: none;
    text-transform: uppercase;
}

.bg #timeline .items .item-right .item-content a { font-family: 'OpenSans-light'; }

#timeline .items .item-left .item-content a:hover,
#timeline .items .item-right .item-content a:hover {
    color: #a9c816;
}

#timeline .items .item-left .item-content a span {
    background: #ffffff;
    width: 27px;
    height: 25px;
    padding: 4px 7px 0 0;
    margin: 0 12px 0 0;
    display: inline-block;
    font-size: 26px;
    line-height: 18px;
    font-family: 'ProximaNova-light';
    text-align: right;
    color: #0c0c0c;
    text-decoration: none;
}

#timeline .items .item-right .item-content2 a span {
    background: #000;
    width: 27px;
    height: 26px;
    padding: 5px 7px 0 0;
    margin: 0 8px 0 0;
    display: inline-block;
    font-size: 26px;
    line-height: 18px;
    font-family: 'ProximaNova-light';
    text-align: right;
    color: #fff;
    text-decoration: none;
}

#timeline .items .item-right .item-content p {
    font-size: 14px;
    line-height: 17px;
    font-family: 'ProximaNova-light';
    text-align: left;
    color: #fff;
    letter-spacing: 0.2px;
}

.bg #timeline .items .item-right .item-content p { font-family: 'OpenSans-light'; }

#timeline .items .item-right .item-content3 p {
    font-size: 14px;
    line-height: 18px;
    font-family: 'ProximaNova-light';
    text-align: left;
    color: #aaaaaa;
}

#timeline .items .item-right .item-content h2 {
    font-size: 20px;
    line-height: 28px;
    font-family: 'NovecentoWide-book';
    text-align: left;
    color: #fff;
    margin-bottom: 4px;
    text-transform: uppercase; 
}

.bg #timeline .items .item-right .item-content h2 { font-family: 'OpenSans-light'; }

#timeline .items .item-left .item-content h2 {
    font-size: 22px;
    line-height: 24px;
    font-family: 'NovecentoWide-book';
    text-align: right;
    color: #1f1f1f;
    margin: 0 -135px 8px 0;
    letter-spacing: 0.2px;
    text-transform: uppercase; 
}

.bg #timeline .items .item-left .item-content h2 { font-family: 'OpenSans-light'; }

#timeline .items .item-left .item-content3 h2 { margin: 0 0px 3px 0; }

#timeline .items .item-right .item-content img {
    display: block;
    float: left;
    margin: 0 0 0px 138px;
}

#timeline .items .item-right .item-content2 h2 {
    font-size: 22px;
    line-height: 30px;
    font-family: 'NovecentoWide-book';
    text-align: left;
    color: #fff;
    text-transform: uppercase;
    margin: 0px;
}

.item-content2 h3 {
    font-size: 14px;
    line-height: 14px;
    font-family: 'OpenSans';
    text-align: left;
    color: #fff;
    margin-bottom: 18px;
}

.item-content3 h3 {
    font-size: 14px;
    line-height: 16px;
    font-family: 'OpenSans';
    text-align: right;
    color: #aaaaaa;
    margin-bottom: 12px;
}

.item-content2 h3 span {
    color: #000000;
}

.item-content2 p {
    font-size: 14px;
    line-height: 17px;
    font-family: 'ProximaNova';
    text-align: left;
    color: #fff;
    margin-bottom: 12px;
}

/**** projects_nav-social ****/

#projects_nav-social {
    width: 100%;
    display: block;
    border-bottom: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
}

.nav-content {
    width: 524px;
    height: 60px;
    margin: 0px auto;
    position: relative;    
}

.nav-content span {
    background: url('/images/romb.png') center top;
    display: block;
    width: 18px;
    height: 20px;
    margin: 0px auto;
    position: absolute;
    z-index: 12;
    top: -10px;
    left: 50%;
    margin-left: -9px;
}

.nav-content a {
    display: inline-block;
    float: left;
    margin: 7px 0;
    font-size: 16px;
    line-height: 50px;
    color: #8c8c8c;
    text-transform: uppercase;
    font-family: 'ProximaNova-light';
    text-decoration: none;
}

.nav-content ul {
    display: inline-block;
    float: left;
    height: 60px;
    padding: 0 54px;
}

.nav-content ul li {
    display: inline-block;
    float: left;
    background: #000;
    width: 11px;
    height: 11px;
    margin: 25px 5px 25px 5px;
    cursor: pointer;
}

.nav-content ul li:hover {
    background: #a9c816;
}

.nav-content ul li.active {
    background: #a9c816;
}

.nav-content .prev {
    background: url('/images/prev.png') 2px -1px no-repeat;
    padding: 0 28px 0 44px;
    height: 46px;
}

.nav-content .prev:hover {
    background-position: 2px -44px;
    color: #a9c816;
}

/* Inactive navigation arrows */
.nav-content .prev.inactive, .nav-content .prev.inactive:hover{
    color: #0c0c0c;
    background-position: 2px -44px;
    cursor: default;
}

.nav-content .next.inactive, .nav-content .next.inactive:hover{
    color: #0c0c0c;
    background-position: right -44px;
    cursor: default;
}

.nav-content .social {
    background: url('/images/fb.png') -2px -69px no-repeat;
    width: 67px;
    height: 62px;
    margin: 0px;
    position: relative;
    top: -1px;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
}

.nav-content .social:hover {
    background-position: -1px 0px;
    border: none;
    width: 67px;
}

.nav-content .social2 {
    background: url('/images/twitter.png') -4px -76px no-repeat;
}

.nav-content .social2:hover {
    background-position: -4px top;
    border: none;
    width: 67px;
}

.nav-content .next {
    background: url('/images/next.png') right -1px no-repeat;
    padding: 0 42px 0 24px;
    height: 46px;
}

.nav-content .next:hover {
    background-position: right -44px;
    color: #a9c816;
}

/**** trivia ****/

#trivia {    
    width: 1000px;
    display: block;
    position: relative;
    margin: 0px auto;
}

#trivia .animated-lines {
    background: url('/images/trivia-lines.png') center top no-repeat;
    width: 1000px;
    height: 0px;
    display: block;
    position: absolute;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

#trivia h1 {
    font-size: 30px;
    line-height: 34px;
    color: #0c0c0c;
    font-family: 'NovecentoWide-light';
    padding: 42px 0 5px 0;
    text-align: center;
    letter-spacing: 0.2px;
    text-transform: uppercase; 
}

.bg #trivia h1 { font-family: 'OpenSans-light'; }

#trivia h3 {
    position: relative;
    z-index: 1;
    font-size: 16px;
    line-height: 26px;
    font-family: 'OpenSans-light';
    text-align: center;
    margin-bottom: 38px;
    letter-spacing: 0.2px;
}

#trivia .imgs-content {
    display: block;
    height: 386px;
}

#trivia .imgs-content .img {
    display: inline-block;
    position: relative;
}

#trivia .imgs-content .img-hover {
    background: url('/images/img-hover.png') 7px 7px no-repeat;
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

.imgs-content .img-hover .title {
    display: block;
    margin-top: 44px;
    font-size: 22px;
    line-height: 32px;
    color: #0c0c0c;
    font-family: 'Montserrat';
    text-align: center;
}

.bg .imgs-content .img-hover .title { font-family: 'OpenSans'; }

.imgs-content .img-hover .text {
    font-size: 14px;
    line-height: 17px;
    color: #0c0c0c;
    font-family: 'ProximaNova-light';
    text-align: center;
}

.bg .imgs-content .img-hover .text { font-family: 'OpenSans-light'; }

#trivia .imgs-content .img img { display: block; }

#trivia .imgs-content .img1 {
    top: 0px;
    left: 146px;
}

#trivia .imgs-content .img2 {
    top: 0px;
    left: 244px;
}

#trivia .imgs-content .img3 {
    top: 0px;
    left: 342px;
}

#trivia .imgs-content .img4 {
    top: 135px;
    left: -235px;
}

#trivia .imgs-content .img5 {
    top: 135px;
    left: -137px;
}

#trivia-data{
    display: none;
}


/**** services ****/

#services {
    background: url('/images/services-bg.jpg') center top no-repeat;
    width: 100%;
    min-height: 470px;
}

#services .services-content {
    width: 900px;
    margin: 0px auto;
    position: relative;
}

#services .services-content h1 {
    font-size: 30px;
    line-height: 34px;
    color: #ffffff;
    font-family: 'NovecentoWide-light';
    padding: 40px 0 6px 0;
    text-align: center;
    letter-spacing: 0.2px;
    text-transform: uppercase; 
}

.bg #services .services-content h1 { font-family: 'OpenSans-light'; }

#services .services-content h3 {
    font-size: 16px;
    line-height: 26px;
    font-family: 'OpenSans-light';
    text-align: center;
    margin-bottom: 12px;
    letter-spacing: 0.2px;
}

#services .services-content h3 span {
    color: #aac919;
}

#services .services-content .learn_more {
    background: url('/images/learn_more-button.png') center top no-repeat;
    width: 215px;
    height: 62px;
    display: block;
    margin: 0px auto;
    text-decoration: none;
}

#services .services-content .learn_more span {
    display: inline-block;
    font-family: 'NovecentoWide-light';
    font-size: 12px;
    line-height: 18px;
    text-transform: uppercase;
    color: #696969;
    margin-top: 24px;
}

.bg #services .services-content .learn_more span { font-family: 'OpenSans-light'; }

#services .services-content .learn_more .left_text {
    float: left;
    margin-left: 28px;
}

.bg #services .services-content .learn_more .left_text { margin-left: 20px; }

#services .services-content .learn_more .right_text {
    float: right;
    margin-right: 28px;
}

.bg #services .services-content .learn_more .right_text { margin-right: 24px; }

#services .services-content .learn_more:hover { background-position: center -66px; }

#services .services-content ul {
    display: block;
    overflow: hidden;
    margin-top: 65px; 
}

#services .services-content ul li { display: inline-block; float: left; }

#services .services-content ul li a {
    display: inline-block;
    width: 181px;
    margin-right: 58px;
    text-decoration: none;
    font-family: 'NovecentoWide-book';
    font-size: 21px;
    text-transform: uppercase;
    color: #fff;
    padding-top: 104px;
    text-align: center;
    letter-spacing: 0.2px;
}

.bg #services .services-content ul li a { font-family: 'OpenSans'; }

#services .services-content ul li a:hover { color: #a9c816; }

#services .services-content ul li .last { margin: 0px; }

.services-content ul li .design { background: url('/images/design-bg.png') left top no-repeat; }

.services-content ul li .design:hover { background-position: right top; }

.services-content ul li .develop { background: url('/images/development-bg.png') left top no-repeat; }

.services-content ul li .develop:hover { background-position: right top; }

.services-content ul li .apps {  background: url('/images/mobile-bg.png') left top no-repeat; }

.services-content ul li .apps:hover { background-position: right top; }

.services-content ul li .strategy { background: url('/images/strategy-bg.png') left top no-repeat; }

.services-content ul li .strategy:hover { background-position: right top; }

#services .services-content .line {
    display: block;
    width: 1px;
    height: 0px;
    background: #d8d8d8;
    position: absolute;
    left: 50%;
    top: 228px;
    margin: 0px 0 0 -1px;
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

/**** awards ****/

#awards {
    background: #fff;
    width: 100%;
}

#awards .awards-content {
    width: 900px;
    position: relative;
    margin: 0px auto;
    min-height: 522px;
}


#awards .awards-content  .romb {
    background: url('/images/romb.png') center top;
    display: block;
    width: 18px;
    height: 20px;
    margin: 0px auto;
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -9px;
}

#awards .awards-content h1 {
    font-size: 30px;
    line-height: 34px;
    color: #0c0c0c;
    font-family: 'NovecentoWide-light';
    padding: 40px 0 29px 0;
    text-align: center;
    letter-spacing: 0.2px;
    text-transform: uppercase; 
}

.bg #awards .awards-content h1 { font-family: 'OpenSans-light'; }

.awards-content .left_side {
    width: 431px;
    float: left;
}

.awards-content .center-line {
    background: url('/images/awards-line.png') center top no-repeat;
    width: 19px;
    height: 0px;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -9.5px;
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

.awards-content .right_side {
    width: 433px;
    float: right;
}

#awards .awards-content a {
    display: none;
    float: left;
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 6px;
    color: #a9c816;
    font-family: 'OpenSans';
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

#awards .awards-content a:hover { color: #0c0c0c; }

#awards .awards-content h3 {
    display: none;
    clear: both !important;
    font-size: 14px;
    line-height: 20px;
    color: #0c0c0c;
    font-family: 'OpenSans';
    text-decoration: none;
    margin-bottom: 32px;
}

#awards .awards-content .left_side a { float: right; }

#awards .awards-content .left_side h3 { text-align: right; clear: both !important; }

/**** footer ****/

#footer { 
    width: 100%; 
    position: relative; 
    height: 292px;
}

#footer img {  
    height: 100%; 
    position: absolute; 
    display: none; 
}

#footer .active { display: block; }

#footer .about-img {
    width: 940px;
    min-height: 94px;
    margin: 0px auto;
    position: relative;
    z-index: 1;
}

#footer .prev {
    background: url('/images/romb3.png') center top no-repeat;
    display: inline-block;
    position: absolute;
    left: 6px;
    top: -9px;
}

#footer .prev a {
    background: url('/images/romb-arrows.png') -39px 15px no-repeat;
    width: 39px;
    height: 104px;
    display: block;  
}

#footer .prev a:hover {
    background-position: right 15px;  
}

#footer .next {
    background: url('/images/romb3.png') center top no-repeat;
    display: inline-block;
    position: absolute;
    right: 8px;
    top: -9px;
}

#footer .next a {
    background: url('/images/romb-arrows.png') left 15px no-repeat;
    width: 39px;
    height: 104px;
    display: block; 
}

#footer .next a:hover { background-position: -78px 15px; }

.about-img h2 {
    font-size: 22px;
    line-height: 35px;
    color: #fff;
    font-family: 'OpenSans';
    text-align: center;
    padding: 14px 0 0 0;
    text-shadow: 0 1px #757e24;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.about-img h3 {
    font-size: 18px;
    line-height: 30px;
    color: #fff;
    font-family: 'OpenSans-italic';
    text-align: center;
    padding: 0 0 12px 0;
    text-shadow: 0 1px #757e24;
    letter-spacing: 0.2px;
}

#footer .connect {
    width: 492px;
    margin: 24px auto 0;
    position: relative;
    z-index: 1;
}

.connect .icon {
    display: inline-block;
    width: 71px;
    height: 71px;
    margin: 0 6px 0 16px;
}

.connect .social1 { background: url('/images/social1.png') center top; }

.connect .social1:hover { background-position: center bottom; }

.connect .social2 { background: url('/images/social2.png') center top; }

.connect .social2:hover { background-position: center bottom; }

.connect .message { background: url('/images/message.png') center top; }

.connect .message:hover { background-position: center bottom; }

.connect .social3 { background: url('/images/social3.png') center top; }

.connect .social3:hover { background-position: center bottom; }

.connect .social4 { background: url('/images/social4.png') center top; }

.connect .social4:hover { background-position: center bottom; }

.connect h2 {
    font-size: 22px;
    line-height: 30px;
    color: #fff;
    font-family: 'NovecentoWide-light';
    text-align: center;
    padding: 14px 0 8px 0;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.bg .connect h2 { font-family: 'OpenSans-light'; }

.connect .line {
    background: #fff;
    display: block;
    width: 69px;
    height: 1px;
    margin: 0 auto 10px;
}

.connect p {
    font-size: 12px;
    line-height: 16px;
    color: #fff;
    font-family: 'ProximaNova-light';
    text-align: center;
    padding: 0px 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.bg .connect p { font-family: 'OpenSans-light'; }

.connect p a {
    font-size: 12px;
    line-height: 16px;
    color: #a9c816;
    font-family: 'ProximaNova-light';
    text-align: center;
    text-decoration: none;
}

.bg .connect p a { font-family: 'OpenSans-light'; }

.connect p a:hover { color: #fff; }

/**** Style for bookstyle projects ****/

*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#projects-global {
    position: relative;
}

#projects-global .change_project-button {
    width: 49px;
    height: 49px;
    display: block;
    position: absolute;
    top: 67%;
    z-index: 12;
    border: 1px solid #d8d8d8; 
    cursor: pointer;
}

#projects-global .prev { background: url('/images/arrows.png') #fff 16px 12px no-repeat; border-left: none; }

#projects-global .prev:hover { background-position: 16px -63px; }

#projects-global .next { background: url('/images/arrows.png') #fff -32px 12px no-repeat; right: 0px; border-right: none; }

#projects-global .next:hover { background-position: -32px -63px; }

.container {
	position: relative;
	z-index: 10;
	margin: 0 auto;
	-webkit-perspective: 2200px;
	-moz-perspective: 2200px;
	perspective: 2200px;
}
  
.page {
	width: 50%;
	height: 100%;
	position: absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform-origin: left center;
	-moz-transform-origin: left center;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.page > div {
	display: block;
	height: 100%;
	width: 100%;
	position: absolute;
	background: #fff;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
}

.page .back {	
	-webkit-transform: rotateY(-180deg);
	-moz-transform: rotateY(-180deg);
}

.page .outer{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	overflow: hidden;
	z-index: 999;
}

.page .content{
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}

.overlay, .flipoverlay{
	background-color: rgba(0, 0, 0, 0.6);
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: 0;
}

.flipoverlay { background-color: rgba(0, 0, 0, 0.2); }

.page .content .inner{ height: 100%; }

/*** if IE or Opera ***/
.no-csstransforms3d .f-page {
    display: none;
}

.no-csstransforms3d .f-page.active {
    display: block;
}

/***************** work.php ********************/

#slogan.work-slogan {
    background: url('/images/slogan-bg.jpg') center top no-repeat;
    width: 100%;
    position: relative;
    top: 0px;
    padding: 46px 0 0 0;
    margin-top: 73px;
    border-bottom: 1px solid #d8d8d8;
}

#slogan.work-slogan h1 {
    color: #ffffff;
}

#slogan.work-slogan .separator {
    width: 202px;
    background: url('/images/separator2.png') 0px center no-repeat;
}

#slogan.work-slogan .portfolio-tumbnail {
    width: 160px;
    height: 100px;
    display: block;
    margin: 30px auto 8px;
    border: 1px solid #fff;
}

.portfolio-tumbnail span {
    background: url('/images/play_button.png') center top no-repeat;
    width: 57px;
    height: 57px;
    display: block;
    margin: 19px auto;
    cursor: pointer;
}

.portfolio-tumbnail span:hover {
    background-position: center bottom;
}

#slogan.work-slogan p {
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    font-family: 'ProximaNova';
    text-align: center;
    text-transform: uppercase;
}

.bg #slogan.work-slogan p { font-family: 'OpenSans'; }

#slogan.work-slogan .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 18px;
    height: 19px;
    display: block;
    margin: 13px auto 0;
    position: relative;
    top: 10px;
}

#video-content {
    width: 100%;
    background: #fff;
    display: none;
    padding: 50px 0 0 0;
    overflow: hidden;
}

#video-content>div {
    width: 960px;
    display: block;
    margin: 0px auto;
    border: 1px solid #d8d8d8;
}

/*** #projects ***/

#projects {
    width: 972px;
    display: block;
    overflow: hidden;
    margin: 8px auto 0;
}

#projects .vert-line{
    width: 1px;
    height: 47px;
    display: block;
    margin: 0px auto;
    background: #d8d8d8;
}

#projects .project {
    width: 312px;
    display: inline-block;
    float: left;
    position: relative;
    margin: 0 6px 13px 6px;
    cursor: pointer;
}

#projects .project img {
    display: block;
}

.project .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 19px;
    height: 19px;
    display: block;
    margin: 0px auto 0;
    position: relative;
    top: -9px;
    z-index: 1;
}

.project .info_box {
    width: 312px;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

.info_box a {
    display: block;
    font-size: 20px;
    line-height: 32px;
    color: #a9c816;
    font-family: 'Novecentowide-book';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.info_box a:hover { color: #0c0c0c; }

.bg .info_box a { font-family: 'OpenSans'; }

.info_box h4 {
    font-size: 14px;
    line-height: 17px;
    color: #8c8c8c;
    font-family: 'ProximaNova-light';
    text-align: center;
    margin-bottom: 21px;
}

.bg .info_box h4 { font-family: 'OpenSans-light'; }

.project .hover {
    background: url('/images/hover-bg.png') center center repeat;
    width: 312px;
    height: 269px;
    display: none;
    position: absolute;
    top: 0px;
}

.project .hover span {
    background: url('/images/hover-romb.png') center center no-repeat;
    width: 90px;
    height: 90px;
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -45px 0 0 -45px;
    padding-top: 34px;
    
    font-size: 18px;
    line-height: 26px;
    color: #fff;
    font-family: 'Novecentowide-book';
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 20px;  
}

.bg .project .hover span { font-family: 'OpenSans'; }

#projects .your_project {
    width: 312px;
    height: 270px;
    display: block;
    position: relative;
    margin: 52px auto 100px;
    border: 1px solid #d8d8d8;
    clear: both !important;
    float: left;
    left: 34%;
}

#projects .your_project .vert-line {
    width: 1px;
    height: 66px;
    display: block;
    margin: -66px auto 0;
    background: #d8d8d8;
}

.your_project h2 {
    display: block;
    margin: 28px 0 28px 0;
    font-size: 36px;
    line-height: 36px;
    color: #0c0c0c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.your_project .your_project_title {
    display: block;
    font-size: 26px;
    line-height: 38px;
    color: #a9c816;
    font-family: 'Novecentowide-book';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.bg .your_project .your_project_title { font-family: 'OpenSans'; }

.your_project .your_project_title:hover { color: #0c0c0c; }

.your_project h4 {
    white-space: nowrap;
    position: absolute;
    left: -36%;
    font-size: 16px;
    line-height: 26px;
    color: #8c8c8c;
    font-family: 'OpenSans-light';
    text-align: center;
    margin-bottom: 20px;
}

.your_project .message {
    background: url('/images/romb-message.png') left top no-repeat;
    width: 139px;
    height: 78px;
    display: block;
    overflow: hidden;
    position: relative;
    top: 100px;
    margin: 0px auto;
}

.your_project .message:hover { background-position: right top; }

#projects .your_project .line2 {
    width: 1px;
    height: 64px;
    display: block;
    margin: 96px auto 0;
    background: #d8d8d8;
}

/**** #projects-container ****/

.test{
    position: relative;
    /*overflow-x: hidden;*/
}

 .prev-container, .projects-container, .next-container{
    width: 100%;
    background: #fff;
    position: absolute;
    top: -6000px;
    z-index: 50;
}

.prev-container{
    top: 0!important;
}

.next-container{
    top: 0!important;
}

#slogan.project-slogan {
    position: relative;
    top: 0px;
    margin-top: 73px;
    padding: 44px 0 52px 0;
    border: none;
}

/*#slogan.project-slogan h1 { color: #fff; }*/
/*
#slogan.project-slogan h3 { color: #fff; }*/


#slogan.project-slogan .separator { background: url('/images/separator2.png') center center no-repeat; }


.project-nav .nav-content .close {
    background: #fff;    
    display: inline-block;
    float: left;
    height: 60px;
    padding: 0 11px;
    cursor: pointer;
}

.nav-bottom {
    background: #fff; 
    width: 100%;
    display: none;
    border-bottom: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
    position: fixed;
    bottom: 0px;
}

.project-nav .close span {
    background: url('/images/close_project.png') left top no-repeat;
    width: 13px;
    height: 13px;
    position: static;
    display: inline-block;
    margin: 24px 11px 0 11px;
}

.project-nav .close p {
    display: inline-block;
    font-size: 16px;
    line-height: 18px;
    color: #8c8c8c;
    font-family: 'ProximaNova-light';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: top;
    margin-top: 23px;
}

.bg .project-nav .close p { font-family: 'OpenSans-light'; }

#about_project {
    background: #fff !important;
    width: 790px;
    display: block;
    overflow: hidden;
    clear: both;
    margin: 0px auto;
}

#about_project h3 {
    display: block;
    margin: 32px 0 12px 0;
    font-size: 18px;
    line-height: 22px;
    color: #aac919;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
}

.bg #about_project h3 { font-family: 'OpenSans'; }

#about_project h4 {
    display: block;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 26px;
    color: #0c0c0c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
}

.bg #about_project h4 { font-family: 'OpenSans'; }

#about_project .line {
    background: #aac919;
    width: 403px;
    height: 1px;
    display: block;
    margin: 0px auto;
}

#about_project p {
    display: block;
    font-size: 16px;
    line-height: 26px;
    margin: 16px 0;
    color: #8c8c8c;
    font-family: 'OpenSans-light';
    text-align: center;
}

#about_project .line2 {
    width: 117px;
    margin-bottom: 20px;
}

#about_project div {
    display: block;
    margin: 0px auto 12px;
    text-align: center;
}

#about_project a {
    display: inline-block;  
    font-size: 14px;
    line-height: 28px;
    color: #aac919;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.bg #about_project a { font-family: 'OpenSans'; }

#about_project a:hover {
    color: #0c0c0c;
}

#about_project div span {
    color: #0c0c0c;
}

#about_project .see_more {
    display: block;
    font-size: 14px;
    line-height: 16px;
    color: #8c8c8c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 42px;
}

.bg #about_project .see_more { font-family: 'OpenSans'; }

#about_project img {
    display: block;
    float: left;
    margin: 0 7.5px 15px 7.5px;
}

#about_project .vert-line {
    width: 1px;
    height: 104px;
    display: block;
    margin: 0px auto;
    background: #d8d8d8;
}

/*#slogan.project-slogan1 { background: url('/images/project1-slogan.jpg') left top no-repeat; }

#slogan.project-slogan2 { background: url('/images/project2-slogan.jpg') left top no-repeat; }

#slogan.project-slogan3 { background: url('/images/project3-slogan.jpg') left top no-repeat; }

#slogan.project-slogan4 { background: url('/images/project4-slogan.jpg') left top no-repeat; }

#slogan.project-slogan5 { background: url('/images/project5-slogan.jpg') left top no-repeat; }

#slogan.project-slogan6 { background: url('/images/project6-slogan.jpg') left top no-repeat; }

#slogan.project-slogan7 { background: url('/images/project7-slogan.jpg') left top no-repeat; }

#slogan.project-slogan8 { background: url('/images/project8-slogan.jpg') left top no-repeat; }

#slogan.project-slogan9 { background: url('/images/project9-slogan.jpg') left top no-repeat; }

#slogan.project-slogan10 { background: url('/images/project10-slogan.jpg') left top no-repeat; }

#slogan.project-slogan11 { background: url('/images/project11-slogan.jpg') left top no-repeat; }

#slogan.project-slogan12 { background: url('/images/project12-slogan.jpg') left top no-repeat; }*/

/*#slogan.project-slogan7 h1, #slogan.project-slogan7 h3 { color: #4f4f4f; }*/

.white-color { color: #ffffff!important; }

.grey-color { color: #4f4f4f!important; }

#slogan.project-slogan7 .separator { background: url('/images/work/separator3.png') left center no-repeat; }



/****************** services.php *******************/

#slogan.services-slogan { 
    position: relative; 
    margin: 97px auto 0; 
    top: 0px; 
    border-bottom: 0px; 
    padding: 22px 0 48px 0;
}

#services-container { width: 100%; margin-bottom: 108px; }

#services-container .service { width: 100%; }

#services-container .service1 { background: url('/images/service1-icon.png') center 32px no-repeat; display: block; min-height: 495px; }

#services-container .service2 { background: url('/images/service2-icon.png') center 32px no-repeat; display: block; min-height: 576px; }

#services-container .service3 { background: url('/images/service3-icon.png') center 32px no-repeat; display: block; min-height: 365px; margin-top: 6px; }

#services-container .service4 { background: url('/images/service4-icon.png') center 32px no-repeat; display: block; min-height: 495px; }

.service h1 {
    display: block;
    font-size: 21px;
    line-height: 26px;
    color: #0c0c0c;
    font-family: 'Novecentowide-book';
    text-align: center;
    text-transform: uppercase;
}

.bg .service h1 { font-family: 'OpenSans'; }

#services-container .service_text-content {
    width: 900px;   
    position: relative;
    margin: 74px auto 5px;
    overflow: hidden;
}

#services-container .service_text-content2 { margin: 78px auto 4px; }

#services-container .service_text-content3 { margin: 75px auto 6px; }

#services-container .service_text-content4 { margin: 76px auto 13px; }

.service_text-content .left_side {
    width: 449px;
    float: left;  
}

.service1 .service_text-content .left_side { margin-top: 80px; }

.service3 .service_text-content .left_side { margin-top: 80px; }

.service4 .service_text-content .right_side { margin-top: 76px; }

.service2 .service_text-content .right_side { margin-top: 78px; }

.service_text-content .left_side .text-wrapper { 
    padding-right: 68px; 
    position: relative; 
    margin-bottom: 30px;
    display: none; 
}

.service_text-content .right_side {
    width: 450px;
    float: right;
}

.service_text-content .right_side .text-wrapper { 
    padding-left: 68px; 
    position: relative; 
    margin-bottom: 34px;
    display: none;
}

.service_text-content .text-wrapper1 { background: url('/images/service1-icons.png') right top no-repeat; }

.service_text-content h2 {
    display: block;
    font-size: 14px;
    line-height: 26px;
    margin: 4px 0 6px 0;
    color: #a9c816;
    font-family: 'NovecentoWide';
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

.bg .service_text-content h2 { font-family: 'OpenSans'; }

.service_text-content .icon {
    width: 112px;
    height: 48px;
    display: block;
    position: absolute;
    top: 0px;
}

.service1 .service_text-content .icon1 { background: url('/images/service1-icons.png') left top no-repeat; right: 0px; }
.service1 .service_text-content .icon2 { background: url('/images/service1-icons.png') left center no-repeat; right: 0px; }
.service1 .service_text-content .icon3 { background: url('/images/service1-icons.png') right top no-repeat; left: -1px; top: -3px; }
.service1 .service_text-content .icon4 { background: url('/images/service1-icons.png') right center no-repeat; left: -1px; top: -3px }
.service1 .service_text-content .icon5 { background: url('/images/service1-icons.png') right bottom no-repeat; left: -2px; top: -3px }

.service2 .service_text-content .icon1 { background: url('/images/service2-icons.png') left top no-repeat; right: 0px; }
.service2 .service_text-content .icon2 { background: url('/images/service2-icons.png') left center no-repeat; right: 0px; }
.service2 .service_text-content .icon3 { background: url('/images/service2-icons.png') left bottom no-repeat; right: 0px; }
.service2 .service_text-content .icon4 { background: url('/images/service2-icons.png') right top no-repeat; left: -1px; top: -3px }
.service2 .service_text-content .icon5 { background: url('/images/service2-icons.png') right center no-repeat; left: -1px; top: -3px }
.service2 .service_text-content .icon6 { background: url('/images/service2-icons.png') right bottom no-repeat; left: -1px; top: -3px; }

.service3 .service_text-content .icon1 { background: url('/images/service3-icons.png') left top no-repeat; right: 0px; }
.service3 .service_text-content .icon2 { background: url('/images/service3-icons.png') right top no-repeat; left: 0px; top: -3px; }
.service3 .service_text-content .icon3 { background: url('/images/service3-icons.png') right bottom no-repeat; left: 0px; }

.service4 .service_text-content .icon1 { background: url('/images/service4-icons.png') left top no-repeat; right: 0px; }
.service4 .service_text-content .icon2 { background: url('/images/service4-icons.png') left center no-repeat; right: 0px; }
.service4 .service_text-content .icon3 { background: url('/images/service4-icons.png') left bottom no-repeat; right: 0px; }
.service4 .service_text-content .icon4 { background: url('/images/service4-icons.png') right top no-repeat; left: 0px; }
.service4 .service_text-content .icon5 { background: url('/images/service4-icons.png') right center no-repeat; left: 0px; }

.service_text-content h3 {
    display: block;
    font-size: 12px;
    line-height: 16px;
    color: #8c8c8c;
    font-family: 'ProximaNova-light';
    text-decoration: none;   
}

.bg .service_text-content h3 { font-family: 'OpenSans-light'; }

.service_text-content .left_side h3 {
    text-align: right;
    clear: both !important;
}

.service_text-content .left_side h2 { float: right; }

.service_text-content .vert-line {
    width: 1px;
    height: 0px;
    background: #d8d8d8;
    display: inline-block;
    margin: 8px auto 0;
    float: left;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

.service2 .service_text-content .vert-line { height: 0px; margin-top: 5px; }
.service3 .service_text-content .vert-line { height: 0px; }
.service4 .service_text-content .vert-line { height: 0px; margin-top: 7px; }

.services-nav {
    background: #fff;
    width: 100%;
    position: relative;
    bottom: 0px;
    border-top: 1px solid #d8d8d8;
}

.services-nav .nav-content {
    display: block;
    width: 752px;
    height: 62px;
    margin: 0px auto;
}

.bg .services-nav .nav-content { width: 828px; }

.services-nav .nav-content a {
    display: inline-block;
    margin: 16px 24px;
    font-size: 16px;
    line-height: 16px;
    color: #8c8c8c;
    text-transform: uppercase;
    text-decoration: none;
    font-family: 'ProximaNova';
}

.bg .services-nav .nav-content a { font-family: 'OpenSans'; }

.services-nav .nav-content li {
    height: 62px;
    border-left: 1px solid #d8d8d8; 
    list-style: none;
    display: inline-block;
    float: left;
    cursor: pointer;
}

.services-nav .nav-content .last-li {
    border-right: 1px solid #d8d8d8;
}

.services-nav .nav-content .button1 {
    background: url('/images/services-nav-icons.png') left -31px no-repeat;
    width: 117px;
    padding: 0px 0 0px 66px;
    margin: 26px 24px 0 24px;
}

.services-nav .nav-content .button2 {
    background: url('/images/services-nav-icons.png') left -71px no-repeat;
    width: 160px;
    padding: 4px 0 4px 62px;
    margin: 22px 24px 0 24px;
}

.services-nav .nav-content .button3 {
    background: url('/images/services-nav-icons.png') left -155px no-repeat;
    width: 160px;
    padding: 4px 0 4px 56px;
    margin: 19px 24px 0 24px;
    line-height: 22px;
}

.services-nav .nav-content .button4 {
    background: url('/images/services-nav-icons.png') left -220px no-repeat;
    width: 117px;
    padding: 12px 0 10px 42px;
    margin: 14px 24px 0 24px;
}

.bg .services-nav .nav-content .button1 { width: 132px; }
.bg .services-nav .nav-content .button2 { width: 183px; }
.bg .services-nav .nav-content .button4  { width: 136px; }

.bg .services-nav .nav-content .button3 { 
    margin: 8px 24px 0 24px;
    background-position: left -144px;
    width: 180px; 
}

.services-nav .description {
    background: #0c0c0c;
    width: 100%;
    position: absolute;
    bottom: 62px;
    display: none;
}

#cloned-nav {
    width: 100%;
    display: none;
    position: fixed;
    bottom: 0px;
}

.description .description-content {
    width: 900px;
    display: block;
    margin: 0px auto;
    padding: 12px 0px;
}

.description-content span {
    width: 90px;
    height: 72px;
    margin-right: 22px;
    float: left;
}

.description1 .description-content span { background: url('/images/description-icons.png') left 0px no-repeat; }
.description2 .description-content span { background: url('/images/description-icons.png') -94px 0px no-repeat; }
.description3 .description-content span { background: url('/images/description-icons.png') -191px 0px no-repeat; }
.description4 .description-content span { background: url('/images/description-icons.png') -274px 0px no-repeat; }

.description-content h3 {
    font-size: 14px;
    line-height: 18px;
    margin: 8px 0 10px 0;
    color: #fff;
    text-transform: uppercase;
    font-family: 'ProximaNova';
}

.bg .description-content h3 { font-family: 'OpenSans'; }

.description-content p {
    font-size: 13px;
    line-height: 16px;
    margin-bottom: 4px;
    color: #9c9b9b;
    font-family: 'ProximaNova-light';
}

.bg .description-content p { font-family: 'OpenSans-light'; }

/**************** about.php ****************/

#slogan.about-slogan {
    background: url('/images/about-slogan-bg.jpg') center top no-repeat;
    position: relative;
    top: 0px;
    margin-top: 73px;
    padding: 44px 0 52px 0;
    border: none;
}

#slogan.about-slogan h1 { color: #fff; }

#slogan.about-slogan .separator { background: url('/images/separator.png') center center no-repeat; }

#slogan.about-slogan h3 { color: #fff; }

#story {
    width: 100%;
    border-bottom: 1px solid #d8d8d8;
    margin-top: 42px;
}

#story .story-content {
    width: 900px;
    margin: 0px auto 0;
    padding-bottom: 48px;   
    position: relative;
    z-index: 1;
}

#story h1 {
    font-size: 30px;
    line-height: 32px;
    margin-bottom: 24px;
    color: #0c0c0c;
    font-family: 'OpenSans-light';
    text-align: center;
    text-transform: uppercase;
}

#story .left_side {
    width: 448px;
    display: inline-block;
}

#story .vert-line {
    background: #000;
    width: 1px;
    height: 0px;
    position: absolute;
    left: 50%;
    margin: 6px 0 0 -1px;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

#story .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 18px;
    height: 19px;
    display: block;
    margin: 0px auto 0;
    position: relative;
    top: 58px;
}

#story .right_side {
    width: 448px;
    display: inline-block;
    float: right;
}

#story p {
    font-size: 13px;
    line-height: 26px;
    color: #8c8c8c;
    font-family: 'OpenSans-light';
    opacity: 0;
    letter-spacing: 0.2px;
}

#story .left_side p { text-align: right; padding-right: 17px; }
#story .right_side p { text-align: left; padding-left: 15px; }

#story .hor-line {
    width: 116px;
    height: 0px;
    display: block;
    margin-left: 50%;
    background: #000;
    position: relative;
    top: -35px;
    
    -moz-transition: all 4.6s ease-in-out;
    transition: all 4.6s ease-in-out;
    -webkit-transition: all 4.6s ease-in-out;
    -o-transition: all 4.6s ease-in-out;
}

#story .green { color: #a9c816; }

#testimonials {
    display: block;
    overflow: hidden;
    margin: 42px 0 30px 0;
}

.testimonials-content {
    width: 990px;
    margin: 0px auto;
    position: relative;
}

#testimonials h3 {
    display: block;
    font-size: 18px;
    line-height: 22px;
    margin-bottom: 10px;
    color: #aac919;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
}

.bg #testimonials h3 { font-family: 'OpenSans'; }

#testimonials h4 {
    display: block;
    font-size: 14px;
    line-height: 18px;
    margin-bottom: 27px;
    color: #0c0c0c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
}

.bg #testimonials h4 { font-family: 'OpenSans'; }

#testimonials .line {
    background: #aac919;
    width: 403px;
    height: 1px;
    display: block;
    margin: 0px auto;
}

#testimonials p {
    display: block;
    font-size: 16px;
    line-height: 26px;
    margin: 14px 0 15px 0;
    color: #8c8c8c;
    font-family: 'OpenSans-light';
    text-align: center;
}

#testimonials .line2 {
    width: 117px;
    margin-bottom: 15px;
}

#testimonials .testimonials-content>div {
    display: none;
    margin: 0px auto;
    text-align: center;
}

#testimonials .testimonials-content .active { display: block; }

#testimonials a {
    display: inline-block;
    font-size: 14px;
    line-height: 28px;
    color: #aac919;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.bg #testimonials a { font-family: 'OpenSans'; }

#testimonials a:hover {
    color: #0c0c0c;
}

#testimonials span {
    font-size: 14px;
    line-height: 16px;
    color: #0c0c0c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 42px;
}

.bg #testimonials span { font-family: 'OpenSans'; }

#testimonials .download {
    font-size: 14px;
    line-height: 20px;
    color: #8c8c8c;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

#testimonials .download:hover { color: #aac919; }

.bg #testimonials .download { font-family: 'OpenSans'; }

#testimonials .small_arrow {
    background: url('/images/small-arrow.png') center top no-repeat;
    display: block;
    width: 25px;
    height: 14px;
    margin: 16px auto;
}

#testimonials .arrow-left {
    background: url('/images/testimonials-arrows.png') left top no-repeat;
    display: block;
    width: 14px;
    height: 25px;
    position: absolute;
    left: 0px;
    top: 46%;
    cursor: pointer;
}

#testimonials .arrow-left:hover { background-position: left bottom; }

#testimonials .arrow-right {
    background: url('/images/testimonials-arrows.png') right top no-repeat;
    display: block;
    width: 14px;
    height: 25px;
    position: absolute;
    right: 0px;
    top: 46%;
    cursor: pointer;
}

#testimonials .arrow-right:hover { background-position: right bottom; }

#team-photos {
    background: url('/images/team-img.jpg') center center no-repeat;
    width: 100%;
    position: relative;
    min-height: 417px;
}

#team-photos h1 {
    display: block;
    font-size: 36px;
    line-height: 38px;
    color: #fff;
    font-family: 'Novecentowide';
    text-align: center;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
    top: 190px;
    letter-spacing: 0.2px;
}


.bg #team-photos h1 { font-family: 'OpenSans'; }

#team-photos .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 18px;
    height: 19px;
    display: block;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -9px;
}

#team {
    width: 990px;
    margin: 0px auto;
    position: relative;   
}

#team .left_side {
    width: 492px;
    float: left;
    display: inline-block;  
}

#team .right_side {
    width: 497px;
    display: inline-block;    
}

#team .person-content {
    display: block;
    overflow: hidden;
    margin-bottom: 27px;
}

#team .person-content-last { margin: 0px; }

#team .person {
    width: 266px;
    display: inline-block;
    position: relative;
}

#team .person-first { padding-top: 58px; }

#team .person-last { padding-bottom: 56px; }

.left_side .person { 
    float: right; 
    padding: 0 16px 0 16px;
    border-left: 1px solid #d8d8d8;
}
.right_side .person { 
    width: 271px !important;
    float: left; 
    padding: 0 19px 0 19px;
    border-right: 1px solid #d8d8d8; 
}

#team .person img {
    display: block;
}

.person .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 18px;
    height: 19px;
    display: block;
    margin: 0px auto 0;
    position: relative;
    top: -9px;
    z-index: 1;
}

.person .info_box {
    width: 235px;
    border-left: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

.info_box h2 {
    display: block;
    font-size: 16px;
    line-height: 22px;
    margin-bottom: 5px;
    color: #a9c816;
    font-family: 'Novecentowide-book';
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
}

.bg .info_box h2 { font-family: 'OpenSans'; }

#team .info_box h4 {
    font-size: 14px;
    line-height: 17px;
    color: #8c8c8c;
    font-family: 'ProximaNova-light';
    text-align: center;
    margin-bottom: 18px;
}

.bg #team .info_box h4 { font-family: 'OpenSans-light'; }

.person-content .text-content {
    width: 214px;
    float: left;
    margin-right: 12px;
}

.right_side .person-content .text-content { 
    float: right;
    margin: 0 0 0 12px; 
}

.person-content p {
    display: block;
    font-size: 14px;
    line-height: 17px;
    color: #0c0c0c;
    font-family: 'ProximaNova-light';
    margin-bottom: 18px;
    clear: both !important; 
}

.bg .person-content p { font-family: 'OpenSans-light'; }

.person-content .grey {
    color: #8c8c8c;
    margin: 0px 0 12px 0;
}

.left_side .person-content p { text-align: right; }

.right_side .person-content p { text-align: left; }

.text-content .line {
    width: 100px;
    height: 1px;
    display: block;
    float: right;
    background: #d8d8d8;
    margin: 8px -12px 12px 0;
}

.person-content-first .text-content .line { margin: 56px -12px 12px 0; }

.right_side .text-content .line { float: left; margin-left: -12px; }

.person-content-first .right_side .text-content .line { margin: 56px 0 12px -12px; }

.person-content-first .text-content .line2 { margin: 0px -12px 12px 0; }

.text-content .line2 {
    width: 52px;
    margin: 0px -12px 12px 0;
}

.right_side .text-content .line2 { margin: 0 0 12px -12px; }

.person-content .green {
    color: #a9c816;
    font-size: 13px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

#team .vert-line {
    width: 1px;
    height: 100%;
    display: inline-block;
    background: #d8d8d8;
    position: absolute;
    left: 50%;
    top: 10px;
    margin-left: -1px;
}

#team .romb {
    background: url('/images/awards-line.png') left -372px no-repeat;
    width: 20px;
    height: 46px;
    display: inline-block;
    position: absolute;
    left: 50%;
    bottom: 0px;
    margin-left: -10px;
}

#map {
    width: 100%;
    min-height: 422px;
    display: block;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    position: relative;
}

#map_canvas_uk {
    width: 49.8%;
    height: 420px;
    float: left;
    border-right: 1px solid #d8d8d8;
}

#map .vert-line {
    width: 1px;
    height: 442px;
    display: inline-block;
    margin-left: 0.2%;
    background: #d8d8d8;
    float: left;
}

#map .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 18px;
    height: 19px;
    display: block;
    margin: 0px auto 0;
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -10px;
    z-index: 2;
}

#map_canvas_bg {
    width: 49.8%;
    height: 420px;
    float: right;
    border-left: 1px solid #d8d8d8;
}

#map .title {
    width: 49.75%;
    height: 49px;
    background: #fff;
    position: absolute;
    z-index: 2;
    top: 22px;
    opacity: 0.95;
    font-size: 26px;
    line-height: 50px;
    font-family: 'Novecentowide-light';
    color: #0c0c0c;
    text-transform: uppercase;
}

.bg #map .title { font-family: 'OpenSans-light'; }

#map .title1 { 
    left: 0px;
    text-align: right;
    padding-right: 30px;
}

#map .title2 { 
    right: 0px;
    text-align: left;
    padding-left: 30px;
}

#contacts {
    background: url('/images/nav-icon.png') center 21px no-repeat;
    width: 100%;
    min-height: 411px;
    display: block;
    padding-top: 24px;
    position: relative;
}

#contacts .contacts-content {
    width: 900px;   
    margin: 0px auto;
    padding-top: 90px;
    overflow: hidden;
}

#contacts .left_side {
    width: 433px;
    float: left;
    margin-right: 16px;
}

#contacts .right_side {
    width: 433px;
    float: right;
    margin-left: 16px;
}

#contacts .contacts-content h2 {
    display: none;
    font-size: 18px;
    line-height: 26px;
    color: #a9c816;
    font-family: 'OpenSans';
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#contacts .contacts-content .left_side h2 { text-align: right; }
#contacts .contacts-content .right_side h2 { text-align: left; }

#contacts .contacts-content p,
#contacts .contacts-content span {
    display: none;
    font-size: 16px;
    line-height: 20px;
    color: #0c0c0c;
    font-family: 'OpenSans';
    margin-bottom: 20px;
}

#contacts .contacts-content .left_side p,
#contacts .contacts-content .left_side span { text-align: right; }

#contacts .contacts-content .right_side p,
#contacts .contacts-content .right_side span { text-align: left; }

#contacts .contacts-content a {
    display: none;
    font-size: 16px;
    line-height: 20px;
    color: #0c0c0c;
    font-family: 'OpenSans';
    text-decoration: none;
    font-weight: bold;
}

#contacts .contacts-content a:hover {
    color: #a9c816;
}

#contacts .contacts-content .left_side a { float: right; }
#contacts .contacts-content .right_side a { float: left; }

#contacts .contacts-content .center-line {
    width: 1px;
    height: 0px;
    background: #d8d8d8;
    display: inline-block;
    float: left;
    margin: -17px 0 0 0;
    
    -moz-transition: all 3s ease-in-out;
    transition: all 3s ease-in-out;
    -webkit-transition: all 3s ease-in-out;
    -o-transition: all 3s ease-in-out;
}

#contacts .contacts-content .connector {
    background: url('/images/romb2.png') center top no-repeat;
    width: 19px;
    height: 19px;
    display: block;
    clear: both !important;
    position: absolute;
    bottom: 2px;
    left: 50%;
    margin: 0 0 0 -11px;
}

#form {
    width: 100%;
    padding: 40px 0 0 0;
    margin-top: -12px;
    border-top: 1px solid #d8d8d8;
}

#form .form-content {
    width: 900px;
    display: block;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.form-content h1 {
    font-size: 30px;
    line-height: 34px;
    margin-bottom: 29px;
    color: #0c0c0c;
    font-family: 'NovecentoWide-light';
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bg .form-content h1 { font-family: 'OpenSans-light'; }

.form-content .left_side {
    width: 449px;
    padding-right: 16px;
    float: left;
}

.form-content .right_side {
    width: 450px;
    padding-left: 16px;
    float: right;
}

.form-content input {
    display: block;
    width: 259px;
    height: 28px;
    border: 1px solid #d8d8d8;
    margin-bottom: 16px;
    outline: none;
    font-size: 14px;
    font-family: 'ProximaNova-light'; 
    color: #0c0c0c;
}

.bg .form-content input { font-family: 'OpenSans-light'; }

.form-content .left_side input {
    float: right;
    text-align: right;
    padding-right: 10px;
}

.form-content input.defaultTextActive { text-transform: uppercase; }


.form-content .right_side input {
    float: left;
    text-align: left;
    padding-left: 10px;
}

.form-content .vert-line {
    width: 1px;
    height: 416px;
    background: #d8d8d8;
    display: inline-block;
    position: absolute;
    left: 50%;
    margin-left: -1px;
}

.form-content textarea {
    width: 550px;
    height: 172px;
    border: 1px solid #d8d8d8;
    display: block;
    resize: none;
    margin: 0px auto;
    position: relative;
    outline: none;
    z-index: 1;  
    font-size: 16px;
    line-height: 18px;
    font-family: 'ProximaNova-light'; 
    color: #0c0c0c;
    padding-left: 10px;
}

.bg .form-content textarea { font-family: 'OpenSans-light'; }

.form-content textarea.defaultTextActive {
    text-align: center;
    padding-top: 78px;
    text-transform: uppercase;
}

.send-content {
    display: block;
    overflow: hidden;
}

.form-content #submitting {
    background: url('/images/submit.png') center 1px no-repeat;
    width: 78px;
    height: 77px;
    display: inline-block;
    float: left;
    margin: 32px 0 46px 0;
    position: relative;
    left: 50%;
    margin-left: -40px;
    z-index: 1;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 15px;
    font-family: 'NovecentoWide';
}

.bg .form-content #submitting { font-family: 'OpenSans'; }

.form-content #submitting:hover { background-position: center bottom; }

.form-content .recaptcha {
    margin: 20px auto 20px auto;
    max-width: 307px;
}

.form-content .error-message {
    display: inline-block;
    margin: 42px 0 42px 0;
    position: relative;
    float: left;
    left: 50%;
    margin-left: 16px;
    max-width: 396px;
}

.error-message h2 {
    font-size: 18px;
    line-height: 26px;
    color: #a9c816;
    font-family: 'OpenSans';
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.error-message p {
    font-size: 16px;
    line-height: 20px;
    color: #000;
    font-family: 'OpenSans';
    margin-bottom: 20px;
}