.box_gray {background-color: #eaeaea;padding-top: 20px;padding-bottom: 20px; max-width: 1240px;margin: 0 auto} #m{display: none; background-color: #eaeaea; } h1{font-family: AvenirLT-Heavy, Arial, Helvetica, sans-serif ; font-size: 90px; color:#FFF; font-weight: normal; } #claim {position: absolute; z-index: 5; text-align:center; width: 100%; } #lights {width: 100% !important; height: 100% !important; position: relative; z-index:1; } #homeGrid{z-index:2; } #mWrapper{width: 1205px; margin: 0px auto; height: 600px !important; /* overflow: hidden; */ position: relative; z-index: 1; } #grid{background: url(../img/background_grid.png) 0 0 transparent; width: 100%; height: 200px; position: absolute; z-index: 2; } #homeImg{z-index: 1; } #homeCont{position: absolute; z-index: 3; width: 892px; height: 470px; } #exploreButt{margin: 50px auto 0 auto; cursor: pointer; display: block; width: 247px; height: 58px; } .hoverButton{position: relative; cursor: pointer; } .hoverButton img{position: absolute; top: 0px; left:0px; } .hoverButton img.hover{z-index: 1; } /***** INTRO ****/ #intro{width:1205px !important; height:600px !important; display: none; overflow:hidden; cursor: pointer; background-color: #040404; z-index: 1000; position:absolute; } #intro h1 {top:0px !important; bottom: 0px; margin: auto; position: absolute;} /***** HEADER ****/ #header{position: absolute; z-index: 100; top: 0px; left: 0px; width: 100%; height: 100px; /* 150px; */ z-index: 0; overflow: hidden; background-color: #FFF; } #header ul{float: left; position: absolute; top: 105px; } #header ul li{display: inline; list-style: none; margin: 0 20px 0 0; background: url(../img/nav_vDash.png) 0 0 transparent no-repeat; } #header ul li.first {background: none; } #header a.lang, #header ul li a{font-size: 14px; color: #666; text-decoration: none; margin: 0 0 0 20px; letter-spacing: 1px; } #header a.lang {position: absolute; top: 105px; right: 60px; } #header ul li.first a {} #header a.lang:hover, #header ul li.active a, #header ul li a:hover {color: #00D700; } /***** ARROW RIGHT ****/ #overviewButt, #infoButt, .ui_arr {position: absolute; z-index: 101; width: 39px; height: 38px; cursor: pointer; display: none; } #arr_right {width: 38px; height: 38px; position: absolute; background-color: #fff } #arr_right:before {background-image: url('../img/sprites.png');width:8px; height:12px; background-position: -42px 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); top:0; left: 0; right: 0; bottom: 0; margin: auto; content: ""; position: absolute;} #arr_right:hover:before {background-position: -50px 0;} /***** ARROW LEFT ****/ #arr_left {width: 38px; height: 38px; position: absolute; background-color: #fff } #arr_left:before {background-image: url('../img/sprites.png');width:8px; height:12px; background-position: -42px 0; -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); top:0; left: 0; right: 0; bottom: 0; margin: auto; content: ""; position: absolute;} #arr_left:hover:before {background-position: -50px 0;} /***** CATEGORY / SERVICE ****/ #btns {width: 72px; height: 38px;background-color: #277ec1;z-index: 1; } #serv {width: 85px; font-size: 12px; font-family: "Source Sans Pro";height: 38px; line-height: 38px;cursor: initial;background-color: #fff; color: rgb( 147, 149, 152 ); text-transform: uppercase;opacity: 0;letter-spacing: 2.5px; text-align: center;} #categ {width: 108px; font-size: 12px; font-family: "Source Sans Pro";height: 38px; line-height: 38px;cursor: pointer;background-color: #277ec1; color: #b9d4e8; text-transform: uppercase;opacity: 0;letter-spacing: 2.5px; text-align: center;} #categ:hover {color:#fff;} /***** ARROW DOWN ****/ #arr_down {width: 38px; height: 38px; position: absolute; background-color: #277ec1;} #arr_down:before {background-image: url('../img/sprites.png');width:12px; height:8px; background-position: -60px 0; top:0; right: 8px; bottom: 0; margin: auto; content: ""; position: absolute;} #arr_down:hover:before {background-position: -72px 0;} /***** ARROW UP ****/ #arr_up {width: 38px; height: 38px; position: absolute; background-color: #277ec1;} #arr_up:before {background-image: url('../img/sprites.png');width:12px; height:8px; background-position: -60px 0; -ms-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); top:0; left: 8px; bottom: 0; margin: auto; content: ""; position: absolute;} #arr_up:hover:before {background-position: -72px 0;} /***** BUTTON INFO ****/ #infoLayer{width: 100%; position: absolute; top: 0px; left: 0px; z-index: 4; background:url(../img/infoLayerBg.png) 0 0 transparent; display: none; } #closeInfo{position: absolute; top: 20px; right: 20px; cursor: pointer; width : 39px; height: 37px; z-index: 101; } #infoButt{box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;position: absolute; top: 20px; left: 263px; cursor: pointer; width : 70px; height: 38px; line-height: 38px; z-index: 101; background-color: #277ec1; padding-left: 20px; font-size: 14px; font-family: "Source Sans Pro"; color: rgb( 185, 212, 232 ); text-align: center; } #infoButt:hover {color: #fff;} #infoButt:before {background-image: url('../img/sprites.png');width:5px; height:11px; background-position: -32px 0; top:0; left: 15px; bottom: 0; margin: auto; content: ""; position: absolute;} #infoButt:hover:before {background-position: -37px 0;} #infoButt:after {background-image: url('../img/sprites.png'); background-position: -58px 0; top:0; right: 0px; bottom: 0; margin: auto; width:2px; height:16px;content: ""; position: absolute;} /***** OVERVIEW ****/ #overviewButt {box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box;position: absolute; top: 20px; left: 128px; cursor: pointer; width : 110px; height: 38px; line-height: 38px; z-index: 101; background-color: #277ec1; padding-left: 25px; font-size: 14px; font-family: "Source Sans Pro"; color: rgb( 185, 212, 232 ); text-align: center; } #overviewButt:hover {color: #fff;} #overviewButt:before {background-image: url('../img/sprites.png'); background-position: 0 0; top:0; left: 11px; bottom: 0; margin: auto; width:16px; height:8px;content: ""; position: absolute;} #overviewButt:hover:before {background-position: -16px 0;} #overviewButt:after {background-image: url('../img/sprites.png'); background-position: -58px 0; top:0; right: 0px; bottom: 0; margin: auto; width:2px; height:16px;content: ""; position: absolute;} #overviewButt img, #infoButt img, .ui_arr img{position: absolute; } #overviewButt img.hover, #infoButt img.hover, .ui_arr img.hover {z-index: 1; display: none; } #overview {position:static; } #overviewCont {width: 100% !important; height: auto !important; display: none; position: absolute; top: 0px; left: 0px; background-color: #eaeaea; } #overview .cell {position: relative; float:left; margin: 0 1px 1px 0; cursor: pointer; -webkit-perspective: 700px; -moz-perspective: 700px; -o-perspective: 700px; -ms-perspective: 700px; perspective: 700px; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin:50% 50%; -ms-transform-origin:50% 50%; /* IE 9 */ -webkit-transform-origin:50% 50%; /* Safari and Chrome */ } #overview .cell.active {z-index: 5; } #overview .cell.activeIdle {z-index: 3; } #overview .cell.inactive {background-color: #fff; cursor: default; } #overview .cell .hover {width: 100% !important; height: 100% !important; background-color:#277FC2; position: absolute; top: 0px; left: 0px; z-index:2; } #overview .cell img.infoline {position: static; display: block; } .overview_imgW {width: 100% !important; height: 100% !important; background-color: #fff; transform: rotateY(0deg) translateX(0px) translateZ(0px); } .overview_imgW img {width: 256px !important; height: 187px !important; } .overview_img{position: absolute; left: 0px !important; right: 0px; top: 0px !important; margin: auto; bottom: 0; } .rowInfo {left:0px !important; right: 0 !important; margin: auto !important; top:0 !important; bottom: 0 !important} .infoWrapper{/*position: absolute; */ /*padding: 0 75px 0 75px; margin: 0 auto; max-width: 1100px; */ position: absolute; } .infoWrapper p.big{font-family: AvenirLT-Light, Arial, Helvetica, sans-serif; font-size: 38px; color: #FFF; text-align: center; line-height: 60px; letter-spacing: 1px; display: block; } .infoWrapper p span.bold{font-family: AvenirLT-Medium, Arial, Helvetica, sans-serif; } .infoWrapper p{font-family: AvenirLT-Light, Arial, Helvetica, sans-serif; font-size: 29px; color: #FFF; text-align: center; line-height: 42px; letter-spacing: 1px; display: block; margin-bottom: 27px; } .infoWrapper p strong {font-weight: normal; font-family: AvenirLT-Medium, Arial, Helvetica, sans-serif; margin-bottom: 37px; } .infoWrapper p a, .infoWrapper p a:visited, .infoWrapper p a:active {color: #00F000; text-decoration: none; } .infoWrapper p a:hover{color: #00C800; } .getInTouchButt{text-align: center; display:block; margin: 50px auto 0 auto; cursor: pointer; width: 240px; height: 51px; } ul.awards_icon_wrapper, ul.clients_icon_wrapper, ul.contact_icon_wrapper {text-align: center; list-style: none; } ul.contact_icon_wrapper{margin-top: 70px; } ul.clients_icon_wrapper {margin-bottom: 15px; } ul.clients_icon_wrapper li, ul.contact_icon_wrapper li{display: inline; margin-right: 27px; } ul.clients_icon_wrapper li{margin-right: 17px; } ul.awards_icon_wrapper li {width: 120px; height: 120px; display: inline-block; vertical-align: top; } ul.awards_icon_wrapper li span {font-family:Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; line-height: 18px; color: #bbbbbb; padding: 0px 6px 0 6px; display: block; } ul.clients_icon_wrapper li img{width: 120px; height: 120px; border: solid 1px #999999; } ul.awards_icon_wrapper li img{width: 120px; height: 120px; } ul.clients_icon_wrapper li:last-child, ul.awards_icon_wrapper li:last-child, ul.contact_icon_wrapper li:last-child{margin-right: 0px; } a.contactIcon{width: 56px; height: 57px; display: inline-block; background-position: 0 0; background-repeat: no-repeat; text-indent: -9999px; } a.contactIcon:hover{background-position: 0 -57px; } a.maps{background-image:url(../img/icon_contact_google_maps.png); } a.contactIcon.facebook{background-image:url(../img/icon_contact_facebook.png); } a.contactIcon.twitter{background-image:url(../img/icon_contact_twitter.png); } a.behance{background-image:url(../img/icon_contact_behance.png); } a.xing{background-image:url(../img/icon_contact_xing.png); } #portfolioWrapper{width: 1205px !important; height: 600px !important; display: none; -webkit-perspective: 1500px; -moz-perspective: 1500px; -o-perspective: 1500px; perspective: 1500px; } #cube{-webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; transform : translateZ( 0 ) rotateY( 0 ) rotateX( 0 ); -moz-transform : translateZ( 0 ) rotateY( 0 ) rotateX( 0 ); -o-transform : translateZ( 0 ) rotateY( 0 ) rotateX( 0 ); -webkit-transform: translateZ( 0 ) rotateY( 0 ) rotateX( 0 ); width: 100%; height: 100%; } #overviewCont .cell {width: 300px !important; height: 190px !important; } #overviewCont .cell .hover > div {padding-top: 0px !important;height: 100%;width: 100%; display: table !important; } #overviewCont .cell .hover > div p {display: table-cell; position: relative; vertical-align: middle;} .cell.loaded {width: 100% !important; height: 100% !important;} .cell.loaded img {width:1205px !important; height:600px !important; left:0px !important;} .row{position: absolute; } .row .cell {position: absolute; display: block; top: 0px; left: 0px; background-color:#EAEAEA; } .row .cell img{position: absolute; } .row .cell .preloadIcon{position: absolute; z-index: 5; background-position:0 0; background-repeat: no-repeat; width: 44px; /*18px;*/ height: 44px; /*18px;*/ } .imgWrapper{position: relative; } .rowInfo{position: absolute; width: 100%; top: 0px; z-index: 4; background-color: #277FC2; width: 790px;/*790px;*/ height: 435px;/*435px;*/ } .rowInfoCont{padding: 0 100px 0 100px; } .rowInfo h4 {margin-bottom: 20px;} .rowInfo h4, #overview h4 {color: #fff; font-family: AvenirLT-Medium, Helvetica, sans-serif; font-size: 16px; text-transform:uppercase; text-align: center; letter-spacing: 2px; font-weight: normal; } .rowInfo p, #overview p {font-family: "Source Sans Pro"; font-size: 14px; font-weight:100; color: #fff; text-align: center; line-height: 18px; display: block; font-weight: 600; /* text-transform: lowercase; */ } .rowInfo a.project{font-family: AvenirLT-Heavy, Helvetica, sans-serif; font-size: 13px; text-decoration: none; font-weight:100; color: #333; text-align: center; display: block; text-transform:uppercase; letter-spacing: 2px; } .rowInfo span.blankurl{font-family: AvenirLT-Heavy, Helvetica, sans-serif; font-size: 13px; text-decoration: none; font-weight:100; color: #333; text-align: center; display: block; text-transform:uppercase; letter-spacing: 2px; } .rowInfo img {display: block; margin: 20px auto; } .rowInfo a.infoClose{display: block; width: 24px; height: 24px; text-indent: -9999px; background:url(../img/infoCloseIcon.png) 0 0 no-repeat; position: absolute; top: 9px; right: 11px; } .rowInfo a.infoClose:hover {border: 1px solid #fff;width: 24px; height: 24px;margin: -1px;} .rowInfo a.infoClose:hover, .rowInfo a.infoClose:focus {outline: none;} ul.slideshowControl {position: absolute; bottom: 50px; z-index: 1000; } ul.slideshowControl li{float: left; display: inline-block; } ul.slideshowControl a{width: 16px; height:16px; background:url(../img/slideshow_dot.png) 5px 5px no-repeat; text-indent: -9999px; display: block; } ul.slideshowControl li.active a, ul.slideshowControl a:hover{background-position: 5px -11px; } .txt_chart{position: absolute; } .txt_chart_cont{padding: 0 100px; max-width: 1100px; margin: 0 auto; position: relative; } .txt_chart_cont h5{font-size: 38px; font-family: AvenirLT-Medium, Arial, Helvetica, sans-serif; font-weight: normal; color:#FFF; text-align: center; margin-bottom: 43px; } .img_chart{overflow: hidden; position: absolute; } .img_chart p {text-align: left; color: #FFF; font-size: 18px; position: absolute; top: 25px; left: 35px; padding-right: 80px; z-index: 10; font-family: AvenirLT-Light, Helvetica, sans-serif } .img_chart img{position: absolute; } .img_chart.active img{z-index: 3; } #profile.infoWrapper, #people.infoWrapper{margin: 0; max-width: none; padding: 0; overflow: hidden; position:absolute; } a.socialButton {width: 40px; height: 40px; display: block; text-indent: -9999px; background: no-repeat 0 0 transparent; position: absolute; top: 29px; } a.socialButton:hover{background-position: 0 -40px; } a.facebook {background-image: url(../img/social/facebook.png); right: 87px; } a.twitter {background-image: url(../img/social/twitter.png); right: 52px; } a.socialButton, a.socialButton:active {outline: none; -moz-outline-style: none; } @media all and (max-width: 1300px), screen and (max-height: 680px) { ul.clients_icon_wrapper li img{width: 180px; height: 94px; } ul.clients_icon_wrapper li{margin-right: 14px; } ul.clients_icon_wrapper {margin-bottom: 14px; } ul.awards_icon_wrapper li img{width: 80px; height: 80px; } ul.awards_icon_wrapper li {width: 80px; height: 80px; margin-right: 0px; } ul.awards_icon_wrapper li span {font-size: 10px; line-height: 18px; padding: 0px 6px 0 6px; } h1{font-size: 62px; } } @media all and (max-width: 1050px), screen and (max-height: 680px) { .infoWrapper p.big{font-size: 28px; line-height: 44px; letter-spacing: 0px; } .rowInfo{width: 630px;/*790px;*/ height: 330px;/*435px;*/ } .infoWrapper p{font-size: 25px; line-height: 37px; letter-spacing: 1px; display: block; margin-bottom: 20px; } ul.contact_icon_wrapper {margin-top: 50px; } ul.clients_icon_wrapper li img{width: 140px; height: 73px; } ul.clients_icon_wrapper li{margin-right: 10px; } ul.clients_icon_wrapper {margin-bottom: 10px; } .img_chart p {font-size: 14px; } h1{font-size: 50px; } } @media screen and (max-width: 1205px) { #lights {width: 905px;height: 497px !important;} .cell.inactive {display: none !important;} #mWrapper{width: 905px;min-height: 497px !important;height: auto !important; } #overviewCont { height: 572px !important} #overview.active{ height: 572px !important} #cube { min-height: 497px !important} #portfolioWrapper{width: 905px !important; height: auto !important;} #intro{width: 905px !important; height: 497px !important;} .cell.loaded img {width: 905px !important; height: 497px !important; left: 0px !important;top: 0px !important; } .box_gray {background-color: #eaeaea;padding-top: 20px;padding-bottom: 20px; max-width: 945px;margin: 0 auto} } @media screen and (max-width: 905px) { #lights {width: 605px;height: 333px !important;} #mWrapper{ min-height: 333px !important;width: 605px;height: auto !important;} #portfolioWrapper{width: 605px !important; height: auto !important; } #overviewCont { height: 955px !important} #overview.active{ height: 955px !important} #cube { min-height: 333px !important} #intro{width: 605px !important; height: 333px !important; } .cell.loaded img {width: 605px !important; height: 333px !important; left: 0px !important;top: 0px !important; } #arr_down {bottom: 115px !important} #arr_up {bottom: 173px !important} #categ {bottom: 140px !important;} .cell.inactive:last-child {display: block !important;} .rowInfo {top:0px !important; left: 0px !important;width: 605px !important;height: 333px !important;} .box_gray {background-color: #eaeaea;padding-top: 20px;padding-bottom: 20px; max-width: 645px;margin: 0 auto} }