body { background-color:#f6f6f6; font-family:"Open Sans", "Segoe UI", Helvetica, sans-serif; font-weight:400; margin: 0px; color:rgb(153, 153, 153); /*rgb(116, 124, 131)*/ line-height:1.4; font-size:11pt; -webkit-font-smoothing:antialiased; } h1 { font-family:"Oswald"; font-weight:400; font-size:2.5em; text-transform:uppercase; } h2 { font-weight:400; font-size:2.36em; margin: 15px 0; font-weight:300; } h3 { font-weight:400; font-size:1.45em; } p { font-size: 1em; line-height: 1.8; margin: 1.4em 0; } label { font-size: 1em; } .clearfix { clear: both; } .hidden { display:none; } .pointer { cursor:pointer; } .link { text-decoration:none; border-bottom:1px dotted #CC0000; color:#CC0000; } .link:hover { border-bottom:1px dotted #B2B3B6; color:#B2B3B6; } #container { background-color:white; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); width:960px; margin-left:auto; margin-right:auto; color:#999; margin-top:30px; } .secondary #container .content { min-height:600px; padding: 0 5% 0 5%; } #container .highlight { width:100%; height:0; background-color:#CC0000; } .ui-dialog { background-color:white; border:1px solid #999; padding:10px; } .ui-dialog-titlebar { float:right; } .ui-dialog-titlebar-close { font-family:"Oswald"; font-weight:400; font-size:1.2em; text-transform:uppercase; text-decoration:none; } .ui-dialog-titlebar-close span { color:#999; } #header { width:auto; z-index:2; } #header .logo { margin: 15px 0 15px 0; float:left; height:70px; line-height:70px; vertical-align:middle; } #header .logo a { text-decoration:none; color:#CC0000; text-transform:uppercase; font-family:"Oswald"; font-weight:400; } #header .logo a .bracket { height:70px; vertical-align:middle; text-transform:uppercase; font-family:"Oswald"; font-weight:300; font-size:3.63em; } #header .logo a .text { height:70px; color:#999; vertical-align:middle; text-transform:uppercase; font-family:"Oswald"; font-weight:400; font-size:1.81em; } nav { float:right; padding-top:0px; text-align:right; font-family:"Oswald"; font-weight:400; } nav .logo { line-height:70px; } nav ul { margin: 10px 0px; } nav ul li { display:inline-block; padding-left:30px; padding-bottom:0; margin:0; text-transform:uppercase; } nav ul li a { line-height:75px; margin:0; background-color:transparent; font-size:14pt; color:#999; cursor:pointer; } nav ul li a.current { padding-bottom: 4px; border-bottom: 3px solid #CC0000; } nav ul li .trolley { position:absolute; left:8px; top:-16px; } nav ul li a:link, nav ul li a:visited { text-decoration:none; } nav ul li a:hover, nav ul li a:active { } #subnav { padding-top:0; text-align:right; font-family:"Oswald"; font-weight:400; width:auto; border-bottom:1px solid #999; height:24px; } #subnav ul { margin: 0 0; padding: 0; } #subnav ul .current { color:#CC0000; } #subnav ul li { font-family:"Oswald"; font-weight:300; display:inline-block; padding-left:20px; padding-bottom:0; margin:0; text-transform:uppercase; color:#999; } #subnav ul li a { font-size:11pt; margin:0; background-color:transparent; font-size:1.27em; cursor:pointer; color:#999; } #subnav ul li a:link, #subnav ul li a:visited { text-decoration:none; } #subnav ul li a:hover, #subnav ul li a:active { } .primary #header { padding: 0 4%;} .primary #hero { background-color: #f6f6f6; } /*.primary #hero-content { height: 385.180px; }*/ .primary .info { display: table; } .primary .info h3 { font-size: 1.22em; } .primary .info .section { display: table-row; } .primary .info .section.even { background-color:#F9F9FB; } .primary .info .section .left { display: table-cell; width:45%; float:left; } .primary .info .section .right { display: table-cell; width:55%; float:right; } .primary .info .product .left { width: 40%; padding:5%; } .primary .info .product .right { width: 45%; overflow: hidden; margin-left: 5%; padding: 5% 0 5% 0; } .primary .info .product .right #product-slide { position: relative; width:100%; } .primary .info .roles { } .primary .info .roles .row { margin-bottom: 30px; } .primary .info .roles .row ul { padding: 10px 0 0 0; margin: 0; list-style-type: none; } .primary .info .roles .row ul li { padding: 0; margin: 0; float: left; width: 33%; margin-bottom:30px; } .primary .info .roles .row ul li img { float: left; width: 75px; height: 75px; margin: 0 10px 20px 0; background-color: red; } .primary .info .roles .row ul li i { float: left; margin: 5px 10px 20px 0; } .primary .info .roles .row ul li .fa-4x { font-size: 2em; } .primary .info .roles .row ul li .info { float: left; width: 71%; margin-right: 15px; } .primary .info .roles .row ul li .info h3 { margin: 0; } .primary .info .roles .section-heading { margin: 5% 5% 0 5%; } .primary .info .roles .section-body { margin: 2% 5% 0 5%; } .primary .info .customers { } .primary .info .customers ul { padding: 10px 0 0 0; margin: 0; list-style-type: none; } .primary .info .customers ul li { padding: 0; margin: 0 0 60px 0; float: left; width: 25%; text-align: center; } .primary .info .customers ul li img { width: 150px; height: 75px; } .primary .info .customers ul li h3 { margin: 0; } .primary .info .customers .section-heading { margin: 5% 5% 0 5%; } .primary .info .customers .section-body { margin: 2% 5% 2% 5%; } .primary .info .something { position: relative; } .primary .info .something .left { width: 45%; overflow: hidden; padding: 5% 0 5% 5%; } .primary .info .something .images { position: relative; height:375px; margin: 0 0 0 5%; } .primary .info .something .images img { position: relative; left: 10%; width: 400px; } .primary .info .something .images .front { position: absolute; top: 75px; left: 75px; z-index: 2; } .primary .info .something .images .back { position: absolute; top: 10px; left: 10px; z-index: 1; } .primary .info .something .right { width: 40%; padding:5%; } .secondary #hero { overflow: hidden; display: inline-block; position: relative; width: 100%; } .secondary #hero:after { padding-top:56.19%; display:block; content: ''; } .secondary #hero-content { position: absolute; top: 0; bottom: 0; right: 0; left: 0; } .secondary #hero-byline { height:34px; text-align:center; vertical-align:top; } .secondary #hero .eighth-imac { z-index:508; } .secondary #hero .seventh-imac { z-index:507; } .secondary #hero .sixth-imac { z-index:506; } .secondary #hero .fifth-imac { z-index:505; } .secondary #hero .fourth-imac { z-index:504; } .secondary #hero .third-imac { z-index:503; } .secondary #hero .second-imac { z-index:502; } .secondary #hero .first-imac { z-index:501; } .secondary #hero .eighth-macbook { z-index:1208; } .secondary #hero .seventh-macbook { z-index:1207; } .secondary #hero .sixth-macbook { z-index:1206; } .secondary #hero .fifth-macbook { z-index:1205; } .secondary #hero .fourth-macbook { z-index:1204; } .secondary #hero .third-macbook { z-index:1203; } .secondary #hero .second-macbook { z-index:1202; } .secondary #hero .first-macbook { z-index:1201; } .secondary #hero .fifth-air { z-index:1205; } .secondary #hero .fourth-air { z-index:1204; } .secondary #hero .third-air { z-index:1203; } .secondary #hero .second-air { z-index:1202; } .secondary #hero .first-air { z-index:1201; } .secondary #hero .screen-macbook { position:absolute; display:none; z-index:1000; top:58.6%; left:50.35%; width:23.92%; } .secondary #hero .screen-imac { position:absolute; display:none; z-index:500; top:31.35%; left:27.02%; width:39.04%; } .secondary #hero .screen-air { position:absolute; display:none; z-index:1501; top:65.88%; left:18.33%; width:15.35%; } .secondary #hero .home-hero h1 { font-size:2.72em; } .secondary #hero .home-hero { position:absolute; text-align:center; width:100%; height:100px; top:88.98%; line-height: 96px; } .secondary #hero .home-background { position:absolute; display:none; z-index:201; top:0; left:0; width: 100%; } .secondary #hero .printools-logo { position:absolute; display:none; z-index:1504; top:08.47%; left:8.80%; width:45.95%; } .secondary #hero .printools-leaf { position:absolute; display:none; z-index:1503; top:71.39%; left:10.24%; width:15.71%; } .secondary #hero .printools-truck { position:absolute; display:none; z-index:1502; top:71.18%; left:26.66%; width:7.98%; } .secondary #hero .printools-message { position:absolute; display:none; z-index:1501; top:71.18%; left:35.83%; width:12.26%; } .secondary #hero .printools-splash { position:absolute; display:none; z-index:100; top:10.59%; left:64.76%; width:37.26%; } .secondary #hero .messageyou-phoneblack { position:absolute; display:none; z-index:1501; top:67.58%; left:75.59%; width:7.62%; } .secondary #hero .messageyou-phonewhite { position:absolute; display:none; z-index:1502; top:67.58%; left:81.66%; width:7.62%; } .secondary #hero .messageyou-parent { position:absolute; display:none; z-index:201; top:-0.84%; left:2.85%; width:29.05%; } .secondary #hero .messageyou-student { position:absolute; display:none; z-index:201; top:-2.96%; left:66.19%; width:27.62%; } .secondary #hero .messageyou-macbook { position:absolute; display:none; z-index:1000; top:55.50%; left:8.69%; width:34.76%; } .secondary #hero .vipEdge-elvis { position:absolute; display:none; z-index:205; top:0.06%; left:0.95%; width:38.57%; } .secondary #hero .vipEdge-madonna { position:absolute; display:none; z-index:206; top:1.69%; left:22.5%; width:22.38%; } .secondary #hero .vipEdge-jayZ { position:absolute; display:none; z-index:208; top:-2.75%; left:35.95%; width:19.29%; } .secondary #hero .vipEdge-thomYorke { position:absolute; display:none; z-index:209; top:-2.96%; left:45.0%; width:17.26%; } .secondary #hero .vipEdge-manson { position:absolute; display:none; z-index:207; top:0; left:52.73%; width:32.98%; } .secondary #hero .vipEdge-lennon { position:absolute; display:none; z-index:202; top:0; left:64.40%; width:16.55%; } .secondary #hero .vipEdge-ladyGaga { position:absolute; display:none; z-index:210; top:27.96%; left:53.33%; width:40.0%; } .secondary #hero .vipEdge-logo { position:absolute; display:none; z-index:1502; top:50.63%; left:13.33%; width:24.40%; } .secondary #hero .downflow-chi { position:absolute; display:none; z-index:1502; top:48.30%; left:29.28%; width:12.50%; } .secondary #hero .downflow-guitar { position:absolute; display:none; z-index:1501; top:-21.18%; left:4.04%; width:51.07%; } .secondary #hero .downflow-drums { position:absolute; display:none; z-index:100; top:0; left:10.95%; width:83.10%; } .secondary #hero .ngeringa-red { position:absolute; display:none; z-index:1505; top:40.25%; left:12.5%; width:8.69%; } .secondary #hero .ngeringa-white { position:absolute; display:none; z-index:1504; top:39.61%; left:18.57%; width:8.69%; } .secondary #hero .ngeringa-pinot { position:absolute; display:none; z-index:1503; top:39.40%; left:23.93%; width:8.69%; } .secondary #hero .ngeringa-vines { position:absolute; display:none; z-index:1502; top:1.69%; left:28.57%; width:22.62%; } .secondary #hero .ngeringa-barrel { position:absolute; display:none; z-index:201; top:11.22%; left:57.74%; width:30.36%; } .secondary #hero .ngeringa-oliveoil { position:absolute; display:none; z-index:801; top:32.20%; left:63.93%; width:32.02%; } .secondary #hero .reward-wine { position:absolute; display:none; z-index:1505; top:55.08%; left:16.90%; width:8.21%; } .secondary #hero .reward-beer { position:absolute; display:none; z-index:1504; top:57.83%; left:22.62%; width:8.10%; } .secondary #hero .reward-champagne { position:absolute; display:none; z-index:1503; top:62.50%; left:12.62%; width:5.0%; } .secondary #hero .reward-card { position:absolute; display:none; z-index:203; top:-5.50%; left:27.74%; width:23.21%; } .secondary #hero .reward-kiosk { position:absolute; display:none; z-index:202; top:3.18%; left:69.52%; width:18.21%; } .secondary #hero .reward-confetti { position:absolute; display:none; z-index:201; top:0; left:3.21%; width:58.69%; } .secondary #hero .alw-tools { position:absolute; display:none; z-index:1504; top:66.52%; left:73.57%; width:17.76%; } .secondary #hero .alw-character { position:absolute; display:none; z-index:103; top:1.90%; left:11.19%; width:15.95%; } .secondary #hero .alw-car { position:absolute; display:none; z-index:103; top:18.22%; left:32.14%; width:60.83%; } .secondary #hero .alw-logo { position:absolute; display:none; z-index:602; top:56.14%; left:13.45%; width:18.21%; } .secondary #hero .alw-grass { position:absolute; display:none; z-index:201; top:59.95%; left:4.52%; width:91.19%; } .secondary #hero .contact-fishbowl { position:absolute; display:none; z-index:401; top:33.05%; left:5.95%; width:23.93%; } .secondary #hero .contact-pens { position:absolute; display:none; z-index:802; top:59.96%; left:72.13%; width:11.66%; } .secondary #hero .contact-bonsai { position:absolute; display:none; z-index:801; top:59.75%; left:74.76%; width:24.88%; } .secondary #hero .macbook-shine { position:absolute; z-index:1200; top:53.38%; left:43.45%; width:37.61%; } .secondary #hero .macbook { position:absolute; z-index:1000; top:53.38%; left:43.45%; width:37.61%; } .secondary #hero .imac-shine { position:absolute; z-index:750; top:23.30%; left:21.90%; width:48.57%; } .secondary #hero .imac { position:absolute; z-index:500; top:23.30%; left:21.90%; width:48.57%; } .secondary #info { margin:60px 5% 0 5%; } .secondary #info .sub { margin: 0 0 40px 0; } .secondary #info .sub p { margin-bottom: 15px; } .secondary #info .sub ul { font-size: 1em; padding: 0 0 0 30px; width:45%; float:left; } .secondary #info .sub ul li { margin-bottom: 2px; } .secondary #info .sub ul li span { font-size: 1em; color:#BBB; font-style:italic; } .secondary #info .client { margin-bottom:60px; font-size:1em; } .secondary #info .last { padding-bottom:30px; } .secondary #info .description { } .secondary #info p { margin-top:5px; font-size:1em; } .secondary #info .contact-footer { float:right; width:38.93%; max-width:327px; } .footer { background-color: #2f2f2f; color: #cccccc; padding: 2% 4% 4% 5%; } .footer h4 { color: #cccccc; margin-bottom: 5px; font-size:1em; font-weight:normal; } .footer .copyright { float: left; margin-top: 20px; } .footer .section { float: left; width: 25%; } .footer .references { width: 200px; float: right; text-align: right; } .footer .referenceImage { margin-top: 10px; margin-left: 10px; width: 30px; height: 30px; border: 0; } .footer .referenceLink { cursor: pointer; } .footer .link { cursor: pointer; border-bottom: 1px dotted #cccccc; text-decoration: none; color: #cccccc; margin-left: 10px; font-size:0.9em; } .footer .link:hover { color: #eeeeee; border-bottom: 1px solid #cccccc; } .footer .noLink { color: #cccccc; margin-left: 10px; font-size:0.9em; } .footer .references { clear: both; margin-top:15px; } #copyright { margin: 10px auto 30px auto; padding-top:5px; text-align:center; font-size:0.9em; font-family:"Oswald"; font-weight:300; text-transform:uppercase; } #dialogVipEdgeVideo { display:none; } #dialogVipEdgeVideo .fp-ratio { padding-top: 75.25%; } #home .secondary #hero { background-color: cornflowerblue; } /* MOBILE - RECENT */ @media (max-width: 768px) { #container { width:100%; margin: 0; } #container .content { } #subnav ul li a { font-size: 0.9em; } #info .last { padding-bottom:0; } } /* MOBILE - OLD SCHOOL */ @media (max-width: 480px) { #header .logo { line-height: 50px; height: 50px; } #header .logo a .bracket { font-size: 2.72em; } #header .logo a .text { font-size: 1.27em; } #subnav { height: 100px; } #subnav ul { margin: 10px 0; } #subnav ul li { margin:0; padding:0; width:32%; text-align: center; } #subnav ul li a { font-size: 1.1em; } #info .sub ul { width: 85%; } #home #subnav { height: 65px; } #contact #subnav { height: 20px; } .primary .info .product .left { width: auto; margin-bottom: 0; } .primary .info .product .right { width: 90%; padding: 0%; } .footer .section { width: 25%; } .footer .references { clear: both; width:100%; margin-top:20px; } h1 { font-size: 1.63em; line-height: 1.5; } h2 { font-size: 1.5em; } nav ul { padding: 0; margin: 13px 0;} nav ul li { padding-left: 18px; } nav ul li a { font-size: 1em; line-height: 50px; } } /* TABLET */ @media (min-width: 769px) { h1 { font-size:1.81em; } nav ul li a { font-size:1.18em; } #container { width: 740px; } #container .content { } #subnav ul li a { font-size: 1em; } .secondary #hero { height:366px; } .secondary #hero .home-hero h1 { font-size:2.18em; } .primary #hero-content { height: 385.180px; } #info .last { padding-bottom:0; } .footer .section { width: 17.5%; } .footer .references { clear: none; } } /* PC */ @media (min-width: 992px) { h1 { font-size:2.72em; } nav ul li a { font-size:1.27em; } #container { width: 960px; } #container .content { } #subnav ul li a { font-size:1.27em; } .secondary #hero { height:472px; } .secondary #hero .home-hero h1 { font-size:2.72em; } .secondary #hero-byline { height:50px; } .primary #hero-content { height: 500px; } .primary .info .roles .row ul li .fa-4x { font-size: 3em; } #info .last { padding-bottom:40px; } } /* WIDESCREEN */ @media (min-width: 1247px) { #container { width: 1170px; } .primary #hero-content { height: 609.375px; } .primary .info .roles .section-heading p { max-width: 75%; } .primary .info .roles .row ul li .fa-4x { font-size: 4em; } .secondary #hero-content { width: 840px; margin:0 auto; } }