/* @formatter:off */ @media screen { .hero{position:relative; z-index:1; overflow:hidden; box-shadow:0 3px 15px #666; height:351px;} .hero .left{background:transparent url(../images/left-panel.png) scroll no-repeat 0 -90px; float:left; height:350px; position:relative; width:50%;} .hero .left .container, .hero .right .container{color:#000; line-height:19px; padding:0 25%;} .hero .left .header, .hero .right .header{color:#441f54; font-weight:normal; padding-right:200px; font-size:6vw;} .hero .left .classification, .hero .right .classification{padding-left:5px; margin-bottom:0; font-style:italic;} .hero .left .definition, .hero .right .definition{padding-left:5px; margin-top:5px;} .hero .left .description, .hero .right .description{padding-left:5px; line-height:24px;} .hero .right{background:transparent url(../images/right-panel.jpg) scroll no-repeat right; float:right; height:350px; border-left:1px solid #441f54; position:relative; width:49%;} .hero .left .container, .hero .right .container{} .hero .left .mask, .hero .right .mask{position:absolute; width:100%; height:100%;} .hero .right .header{} .hero .right .classification{} .hero .right .definition{} .hero .right .description{} #me{display:none; background-position:-358px -185px; width:381px; height:276px; position:absolute; z-index:1000; top:412px; left:432px;} #me.lookLeft{-moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipH; -ms-filter: "FlipH"; left:432px;} #me.lookRight{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; left:492px;} #sitesWorkedOn{position:relative; min-height:24vh; padding-bottom:30px;} #sitesWorkedOn .link{display:block; width:100%; height:100%; position:absolute; z-index:100;} #sitesWorkedOn .tileListContainer{position:relative; top:14px; z-index:1; text-align:center; padding:0 8vw;} #sitesWorkedOn .tileListContainer .outerContainer {margin:auto; width:auto; display:inline-block; border-right: 1px solid #ddd;} #sitesWorkedOn .tileListContainer .header{padding-left:0; text-align:left; font-weight:normal; color:#441f54; font-size:24px; margin-bottom:0;} #mySkills{min-height:515px; border-top:1px solid #ddd; text-align:center; width:100%; padding-bottom:30px;} #mySkills .lip{} #mySkills .left{margin-top:30px; padding:0 181px; width:auto; float:none; text-align:left;} #mySkills .left .lip{} #mySkills .left .header{text-align:left; font-weight:normal; color:#441f54; font-size:24px; margin-bottom:0;} #mySkills .left .header .sub-heading{font-size:19px;} #mySkills .left .text{margin-top:10px;} #mySkills .right{position:relative; float:none; top:0; left:0; padding:0 8vh;} #mySkills #skillsGraphContainer .highcharts-container{width:100% !important; max-height:400px;} #mySkills .yAxisLabels{height:200px; border-right:1px solid #000; width:110px; position:relative; top:1px; left:-111px; float:left;} #mySkills .yAxisLabels .label{display:block; height:88px; padding-right:15px; text-align:right; position:relative; top:90px;} #mySkills .xAxisLabels{width:400px; border-bottom:1px solid #000; position:absolute; float:left; height:200px;} #mySkills .xAxisLabels .label{padding-right:7px; position:relative; top:205px;} #mySkills .xAxisLabels .label.html{width:48px;} #mySkills .xAxisLabels .label.css{margin-left:9px; left:6px; padding-right:12px; width:38px;} #mySkills .xAxisLabels .label.javascript{margin-left:9px; width:79px;} #mySkills .xAxisLabels .label.jquery{width:57px;} #mySkills .xAxisLabels .label.angularjs{width:78px;} #mySkills .xAxisLabels .label.webgl{width:60px;} #mySkills .right .graph{position:absolute; top:0; width:400px; overflow:hidden;} #mySkills .right .graph .bar{float:left; width:40px; margin-right:20px; position:relative; height:200px; box-shadow:4px 1px 13px #666;} #mySkills .right .graph .html{background-color:#ff0000; top:0;} #mySkills .right .graph .css{background-color:#ff9600; top:0;} #mySkills .right .graph .javascript{background-color:#000cff; left:5px; top:0;} #mySkills .right .graph .jquery{background-color:#09cac3; left:18px; top:80px;} #mySkills .right .graph .angularjs{background-color:#088305; left:30px; top:162px;} #mySkills .right .graph .webgl{background-color:#b2a916; left:42px; top:162px;} #mySkills .right .graph .bar .skill{display:block; position:absolute; top:200px; background-color:transparent;} #mySkills .right .graph .bar .skill.html{} #mySkills .right .graph .bar .skill.css{left:6px;} #mySkills .right .graph .bar .skill.js{left:-14px;} #mySkills .right .graph .bar .skill.jquery{left:-4px;} #mySkills .right .graph .bar .skill.angular{left:-14px;} #mySkills .right .graph .bar .skill.webgl{left:-4px;} #mySkills .right .graph .bar .yearsExp{display:block; color:#fff; font-size:14px; text-align:center; line-height:25px; padding-top:19px;} #mySkills .right .graph .bar.angularjs .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar.webgl .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar .yearsExp .num{display:block; font-size:40px;} #mySkills .right .graph .bar.angularjs .yearsExp .num{font-size:18px;} #mySkills .right .graph .bar.webgl .yearsExp .num{font-size:18px;} #theMeApproachHeader{font-size:60px; position:relative; background-color:#f7f7f7; padding:40px 0; border-top:1px solid #ddd; width:auto;} #theMeApproachHeader .header{display:block; text-align:center; color:#000;} #theMeApproachHeader .header .brushScript{color:#441f54; font-size:100px;} #theMeApproachHeader .subtext{font-size:14px; color:#676767; text-align:center; display:block;} #theMeApproachExplained01{border-top:1px solid #ddd; width:auto; padding: 0 27vh 137px; background:transparent url(../images/o25-theThinker.png) no-repeat scroll center 60px;} #theMeApproachExplained01 .lip{} .myContainer{padding-top:50px; padding-left:0;} .myContainer .mchar{display:block; line-height:0; font-size:140px; color:#441f54;} .myContainer .ychar{position:relative; top:-5px; left:110px; font-size:41px;} .myContainer .explained{display:block; position:relative; top:0; width:auto; left:0; padding-left:110px;} .expContainer{padding-top:36px; padding-left:55px;} .expContainer .echar{display:block; line-height:0; font-size:150px; color:#441f54; position:relative; top:-12px; left:-6px;} .expContainer .expchar{display:block; position:relative; top:-11px; left:51px; font-size:30px; margin-top:15px;} .expContainer .explained{display:block; position:relative; top:-10px; width:auto; left:0; padding-left:51px;} } @media screen and (max-width:1210px) { #home #sitesWorkedOn .tileList .tile.last{display:none;} } @media screen and (max-width:1150px) { #home #sitesWorkedOn .tileList .tile:nth-child(4){display:none;} #home #sitesWorkedOn .tileList .tile:nth-child(3){margin-right:0;} } @media screen and (min-width:1024px) { .hero .left .header, .hero .right .header{font-size:74px;} } @media screen and (max-width:768px) { .hero{height:50px; position:relative; z-index:1; overflow:hidden; box-shadow:0 1px 14px #666} .hero .left{background-image:none; float:left; width:50%; height:100%; position:relative;} .hero .left:after { content: '&'; display:block; position: relative; top:-23px; left:9px; text-align: right; font-family: 'PT Sans', sans-serif; color:#441f54 } .hero .left .container, .hero .right .container{padding:13px 0 0; color:#000; line-height:0;} .hero .left .header, .hero .right .header{width:100%; color:#441f54; font-size:20px; font-weight:normal; text-align:center;} .hero .left .classification, .hero .right .classification{padding-left:5px; margin-bottom:0; font-style:italic;} .hero .left .definition, .hero .right .definition{padding-left:5px; margin-top:5px;} .hero .left .description, .hero .right .description{display:none;} .hero .right{background-image:none; width:50%; height:100%; border:none; position:relative;} .hero .left .mask, .hero .right .mask{position:absolute; width:100%; height:100%;} .hero .right .header{} .hero .right .classification{} .hero .right .definition{} .hero .right .description{} #me{display:none; background-position:-358px -185px; width:381px; height:276px; position:absolute; z-index:1000; top:412px; left:432px;} #me.lookLeft{-moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipH; -ms-filter: "FlipH"; left:432px;} #me.lookRight{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; left:492px;} .bottomShadow{display:none; box-shadow:1px 1px 10px #666; width:100%; height:7px; position:relative; top:-8px; z-index:0;} #home #sitesWorkedOn .tileListContainer{padding:0 30px;} #home #sitesWorkedOn .tileListContainer .header{padding:0; margin:0;} #mySkills{border-top:1px solid #ddd;} #mySkills .lip{} #mySkills .left{float:left; width:367px; padding-left:30px; margin-top:30px;} #mySkills .left .lip{} #mySkills .left .header{margin:0; text-align:left; font-weight:normal; color:#441f54; font-size:24px;} #mySkills .left .text{display:none; margin-top:10px;} #mySkills .right{float:none; position:relative; top:42px; left:0;} #mySkills .yAxisLabels{height:200px; border-right:1px solid #000; width:110px; position:relative; top:1px; left:-111px; float:left;} #mySkills .yAxisLabels .label{display:block; height:88px; padding-right:15px; text-align:right; position:relative; top:90px;} #mySkills .xAxisLabels{width:400px; border-bottom:1px solid #000; position:absolute; float:left; height:200px;} #mySkills .xAxisLabels .label{padding-right:7px; position:relative; top:205px;} #mySkills .xAxisLabels .label.html{width:48px;} #mySkills .xAxisLabels .label.css{margin-left:9px; left:6px; padding-right:12px; width:38px;} #mySkills .xAxisLabels .label.javascript{margin-left:9px; width:79px;} #mySkills .xAxisLabels .label.jquery{width:57px;} #mySkills .xAxisLabels .label.angularjs{width:78px;} #mySkills .xAxisLabels .label.webgl{width:60px;} #mySkills .right .graph{position:absolute; top:0; width:400px; overflow:hidden;} #mySkills .right .graph .bar{float:left; width:40px; margin-right:20px; position:relative; height:200px; box-shadow:4px 1px 13px #666;} #mySkills .right .graph .html{background-color:#ff0000; top:0;} #mySkills .right .graph .css{background-color:#ff9600; top:0;} #mySkills .right .graph .javascript{background-color:#000cff; left:5px; top:0;} #mySkills .right .graph .jquery{background-color:#09cac3; left:18px; top:80px;} #mySkills .right .graph .angularjs{background-color:#088305; left:30px; top:162px;} #mySkills .right .graph .webgl{background-color:#b2a916; left:42px; top:162px;} #mySkills .right .graph .bar .skill{display:block; position:absolute; top:200px; background-color:transparent;} #mySkills .right .graph .bar .skill.html{} #mySkills .right .graph .bar .skill.css{left:6px;} #mySkills .right .graph .bar .skill.js{left:-14px;} #mySkills .right .graph .bar .skill.jquery{left:-4px;} #mySkills .right .graph .bar .skill.angular{left:-14px;} #mySkills .right .graph .bar .skill.webgl{left:-4px;} #mySkills .right .graph .bar .yearsExp{display:block; color:#fff; font-size:14px; text-align:center; line-height:25px; padding-top:19px;} #mySkills .right .graph .bar.angularjs .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar.webgl .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar .yearsExp .num{display:block; font-size:40px;} #mySkills .right .graph .bar.angularjs .yearsExp .num{font-size:18px;} #mySkills .right .graph .bar.webgl .yearsExp .num{font-size:18px;} #theMeApproachHeader{font-size:30px; position:relative; width:auto; background-color:#f7f7f7; padding:40px 50px; border-top:1px solid #ddd;} #theMeApproachHeader .header{display:block; text-align:center; color:#000; line-height:38px;} #theMeApproachHeader .header .brushScript{color:#441f54; font-size:100px;} #theMeApproachHeader .subtext{font-size:14px; color:#676767; text-align:center; display:block; margin-top:20px;} #theMeApproachExplained01{width:auto; border-top:1px solid #ddd; background:transparent url(../images/theThinker.png) no-repeat scroll 933px 36px; padding:22px 50px 30px;} #theMeApproachExplained01 .lip{display:none; background-position-x:center;} .myContainer{padding-left:0; padding-top:50px;} .myContainer .mchar{display:block; line-height:0; font-size:140px; color:#441f54;} .myContainer .ychar{display:block; position:relative; top:-5px; left:110px; font-size:41px;} .myContainer .explained{display:inline; position:relative; top:0; left:0; width:615px;} .expContainer{padding-top:75px; padding-left:55px;} .expContainer .echar{display:block; line-height:0; font-size:150px; color:#441f54; position:relative; top:-12px; left:-6px;} .expContainer .expchar{display:block; position:relative; top:-11px; left:51px; font-size:30px; margin-top:15px;} .expContainer .explained{display:inline; position:relative; top:-10px; left:0; width:615px;} } @media screen and (max-width:635px) { #home .tileList .tile:nth-child(3){display:none;} #home .tileList .tile:nth-child(2){margin-right:0;} } @media screen and (max-width:600px) { .hero{height:50px; position:relative; z-index:1; overflow:hidden; box-shadow:0 1px 14px #666} .hero .left{background-image:none; float:left; width:50%; height:100%; position:relative;} .hero .left:after { content: '&'; display:block; position: relative; top:-23px; left:9px; text-align: right; font-family: 'PT Sans', sans-serif; color:#441f54 } .hero .left .container, .hero .right .container{padding:13px 0 0; color:#000; line-height:0;} .hero .left .header, .hero .right .header{width:100%; color:#441f54; font-size:20px; font-weight:normal; text-align:center;} .hero .left .classification, .hero .right .classification{padding-left:5px; margin-bottom:0; font-style:italic;} .hero .left .definition, .hero .right .definition{padding-left:5px; margin-top:5px;} .hero .left .description, .hero .right .description{display:none;} .hero .right{background-image:none; width:50%; height:100%; border:none; position:relative;} .hero .left .mask, .hero .right .mask{position:absolute; width:100%; height:100%;} .hero .right .header{} .hero .right .classification{} .hero .right .definition{} .hero .right .description{} #me{display:none; background-position:-358px -185px; width:381px; height:276px; position:absolute; z-index:1000; top:412px; left:432px;} #me.lookLeft{-moz-transform: scaleX(1); -o-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); filter: FlipH; -ms-filter: "FlipH"; left:432px;} #me.lookRight{-moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; left:492px;} .bottomShadow{display:none; box-shadow:1px 1px 10px #666; width:100%; height:7px; position:relative; top:-8px; z-index:0;} #sitesWorkedOn .tileListContainer .header{padding-left:0;} #mySkills{border-top:1px solid #ddd;} #mySkills .lip{} #mySkills .left{float:left; width:367px; padding-left:30px; margin-top:30px;} #mySkills .left .lip{} #mySkills .left .header{margin:0; text-align:left; font-weight:normal; color:#441f54; font-size:24px;} #mySkills .left .text{display:none; margin-top:10px;} #mySkills .right{float:none; position:relative; top:42px; left:0;} #mySkills .yAxisLabels{height:200px; border-right:1px solid #000; width:110px; position:relative; top:1px; left:-111px; float:left;} #mySkills .yAxisLabels .label{display:block; height:88px; padding-right:15px; text-align:right; position:relative; top:90px;} #mySkills .xAxisLabels{width:400px; border-bottom:1px solid #000; position:absolute; float:left; height:200px;} #mySkills .xAxisLabels .label{padding-right:7px; position:relative; top:205px;} #mySkills .xAxisLabels .label.html{width:48px;} #mySkills .xAxisLabels .label.css{margin-left:9px; left:6px; padding-right:12px; width:38px;} #mySkills .xAxisLabels .label.javascript{margin-left:9px; width:79px;} #mySkills .xAxisLabels .label.jquery{width:57px;} #mySkills .xAxisLabels .label.angularjs{width:78px;} #mySkills .xAxisLabels .label.webgl{width:60px;} #mySkills .right .graph{position:absolute; top:0; width:400px; overflow:hidden;} #mySkills .right .graph .bar{float:left; width:40px; margin-right:20px; position:relative; height:200px; box-shadow:4px 1px 13px #666;} #mySkills .right .graph .html{background-color:#ff0000; top:0;} #mySkills .right .graph .css{background-color:#ff9600; top:0;} #mySkills .right .graph .javascript{background-color:#000cff; left:5px; top:0;} #mySkills .right .graph .jquery{background-color:#09cac3; left:18px; top:80px;} #mySkills .right .graph .angularjs{background-color:#088305; left:30px; top:162px;} #mySkills .right .graph .webgl{background-color:#b2a916; left:42px; top:162px;} #mySkills .right .graph .bar .skill{display:block; position:absolute; top:200px; background-color:transparent;} #mySkills .right .graph .bar .skill.html{} #mySkills .right .graph .bar .skill.css{left:6px;} #mySkills .right .graph .bar .skill.js{left:-14px;} #mySkills .right .graph .bar .skill.jquery{left:-4px;} #mySkills .right .graph .bar .skill.angular{left:-14px;} #mySkills .right .graph .bar .skill.webgl{left:-4px;} #mySkills .right .graph .bar .yearsExp{display:block; color:#fff; font-size:14px; text-align:center; line-height:25px; padding-top:19px;} #mySkills .right .graph .bar.angularjs .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar.webgl .yearsExp{padding-top:6px; line-height:16px;} #mySkills .right .graph .bar .yearsExp .num{display:block; font-size:40px;} #mySkills .right .graph .bar.angularjs .yearsExp .num{font-size:18px;} #mySkills .right .graph .bar.webgl .yearsExp .num{font-size:18px;} #theMeApproachHeader{font-size:30px; position:relative; width:auto; background-color:#f7f7f7; padding:40px 50px; border-top:1px solid #ddd;} #theMeApproachHeader .header{display:block; text-align:center; color:#000; line-height:38px;} #theMeApproachHeader .header .brushScript{color:#441f54; font-size:100px;} #theMeApproachHeader .subtext{font-size:14px; color:#676767; text-align:center; display:block; margin-top:20px;} #theMeApproachExplained01{width:auto; border-top:1px solid #ddd; background:transparent url(../images/theThinker.png) no-repeat scroll 933px 36px; padding:22px 50px 30px;} #theMeApproachExplained01 .lip{display:none; background-position-x:center;} .myContainer{padding-left:0; padding-top:50px;} .myContainer .mchar{display:block; line-height:0; font-size:140px; color:#441f54;} .myContainer .ychar{display:block; position:relative; top:-5px; left:110px; font-size:41px;} .myContainer .explained{display:inline; position:relative; top:0; left:0; width:615px;} .expContainer{padding-left:0; padding-top:75px;} .expContainer .echar{display:block; line-height:0; font-size:150px; color:#441f54; position:relative; top:-12px; left:-6px;} .expContainer .expchar{display:block; position:relative; top:-11px; left:51px; font-size:30px; margin-top:15px;} .expContainer .explained{display:inline; position:relative; top:-10px; left:0; width:615px;} } @media screen and (max-width:442px) { #home .tileList .tile:nth-child(1){display:none; margin-right:0;} } @media screen and (max-height:640px) { #sitesWorkedOn{height:37vh;} }