@font-face{font-family:'Gregfont4';src:url('../Gregfont4.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:'Gregfont5';src:url('../Gregfont5.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}@font-face{font-family:'Gregfont6';src:url('../Gregfont6.woff2') format('woff2');font-weight:normal;font-style:normal;font-display:swap}html,body,div,span,h1,h2,h3,h4,h5,h6,p,a,em,img,strong,b,u,i,center,ol,ul,li,fieldset,form,legend,table,caption,tr,th,td,article,canvas,embed,footer,header,time,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,footer,menu,nav,section{display:block}html,body{height:100%}body{font:14px/1.5 Gregfont4,Arial,sans-serif;color:#234;padding:0;margin:0 auto;margin-top:1.7em;background-image:url("bg_gregch.webp");background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;background-color:#E9EEF4}@media screen and (max-width:800px){body{margin-top:0}}body:before{content:"";position:fixed;top:-10px;left:0;width:100%;height:10px;z-index:100;box-shadow:-3px 0 25px #607D95}ol,ul{list-style:none}#sitewrapper{position:relative;z-index:5;background:#FFF;width:85%;max-width:1024px;margin-top:35px;margin-right:auto;margin-left:auto;padding-right:62px;padding-left:62px}@media screen and (max-width:1024px){#sitewrapper{width:93%;border:0;padding-right:0;padding-left:0;margin:auto;margin-top:20px}}@media screen and (max-width:1024px){#sitewrapper{width:100%;padding:0;margin:0;margin-top:39px;border:0;border-radius:16px;box-shadow:none}}a{position:relative;text-decoration:none;color:#C30}a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform 0.35s cubic-bezier(.4,0,.2,1)}a:hover::after,a:focus-visible::after{transform:scaleX(1);transform-origin:left}a:hover{border-color:#C30;transition:color .2s linear,background-color .2s linear,border-color .2s linear}.weblog-teaser-text a::after{display:none !important}.weblog-teaser-text a:hover::after{transform:scaleX(0) !important}a:active{bottom:0;position:relative;outline:none}a img{border:none}p,ul{margin-bottom:.8em}h1,h5{font:24px Gregfont5,Arial,sans-serif;color:#333;font-weight:bold;font-style:italic;letter-spacing:-1px;background:#FFF;margin-bottom:9px;padding:9px 0 2px 0px;border-bottom:1px solid #999}h2.home-heading{white-space:normal;font:24px Gregfont5,Arial,sans-serif;color:#333;font-weight:bold;font-style:italic;letter-spacing:-1px;line-height:1.2;background:#FFF;margin-bottom:9px;padding:9px 0 2px 0;border-bottom:1px solid #999}h2{white-space:nowrap;font-family:Gregfont6,sans-serif;font-size:15px;font-weight:bold;line-height:37px}h2 span{white-space:normal}h3{font:26px/1 Gregfont5,'Arial narrow',sans-serif;color:#FFF;letter-spacing:2px;margin-bottom:.8em}hr{width:96%;margin-bottom:.8em;border:none;border-top:1px solid #222}label{color:#FFFFAA}input,textarea,select{font:100% Gregfont4,Arial,sans-serif;color:#FFF}input[type=text],input[type=search],input[type=email],input[type=url],textarea{background:transparent;transition:all .3s ease-in-out;padding:6px;border:1px solid #FFF;border-radius:2px;margin:auto;margin-bottom:8px}textarea{border:1px solid #FFF}input:focus,textarea:focus{box-shadow:0 0 12px #FFF;letter-spacing:.5px;text-shadow:0 1px 1px #CCDDDD}input[type=submit]{font-family:Verdana,Arial;width:135px;height:32px;background:linear-gradient(180deg,#FFFCE8 0%,#FFF6CF 100%);color:#222;border:1px outset #FE5A01;border-radius:4px;padding-top:0;margin:0 6px 2px;cursor:pointer}input[disabled]{color:#222}pre{font-size:15px;color:blue}.clear{clear:both;width:0;height:0;display:block;overflow:hidden;visibility:hidden}.italic{font-family:Arial;font-size:12px;font-style:italic;color:#777}.primarycolor{color:#FE5A01}.secondarycolor{color:#222}.justify{text-align:justify}.fontsize17{font-size:15px}.u{text-decoration:underline}.nobreak{white-space:pre}.x{display:none}.label1{background:#888;font-size:13px;color:#FFF;padding:5px}.label2{background:#222;font-size:13px;color:#FFF;padding:5px}.linknewtab{background-image:url(icon_newtab.png);padding:0 0 0 26px;margin-left:5px;background-position:0 0;background-repeat:no-repeat}a.tooltip{text-decoration:none}a.tooltip span{display:none;text-decoration:none}a.tooltip:hover span{display:block;position:absolute;bottom:28px;left:0;width:260px;z-index:20;font-family:Gregfont6;font-size:13px;font-weight:normal;color:#222;text-decoration:none;text-align:justify;line-height:120%;background:#FFF;padding:4px;border:3px double #C30;border-radius:5px;box-shadow:0 0 10px #222}a.tooltip-left{text-decoration:none}a.tooltip-left span{display:none;text-decoration:none}a.tooltip-left:hover span{display:block;position:absolute;bottom:28px;right:0;width:270px;z-index:20;font-family:Gregfont4;font-size:13px;font-weight:normal;color:#222;text-decoration:none;text-align:justify;line-height:120%;background:#FFF;padding:4px;border:3px double #C30;border-radius:5px;box-shadow:0 0 10px #222}.decolink-eye a{background-image:url(icon_eye.gif);background-position:0 1px;background-repeat:no-repeat;padding-left:16px}.decolink-eye a:hover{background-image:url(icon_eye.gif);background-position:0 -16px;background-repeat:no-repeat;padding-left:16px;transition-property:none !important}#toolbar{z-index:2;position:absolute;top:-2px;left:0;right:0;height:70px;background:#FFF;font:15px/1.5 Gregfont4,Arial,sans-serif;font-size:0.8em;color:#222;padding:6px 2% 100px 3%;text-align:right;letter-spacing:1px}#toolbar a{display:inline-block;color:#FFF;text-decoration:none;padding-top:3px;padding-bottom:1px}#toolbar .raised{padding-top:3px;display:inline-block;color:#222;text-decoration:none}#header{position:relative;padding-top:13px;margin-bottom:21px}#greglogo{z-index:1222;width:230px;height:80px}#topnavigation{position:absolute;z-index:1222;right:0;bottom:-10px;font:1.9em Gregfont5,'Arial narrow',sans-serif;font-weight:bold}#topnavigation ul{float:right}#topnavigation ul li{display:block;float:left}#topnavigation ul li a{display:block;padding:0.4em .8em;text-decoration:none;color:#C30}#topnavigation ul li a .sub{display:block;font-family:Gregfont4;font-size:14.5px;color:#666;padding-left:2px;margin-top:-5px}#topnavigation ul li a:hover,#topnavigation ul li.current a{color:#fff;background-color:#222}#topnavigation ul li a:hover .sub,#topnavigation ul li.current .sub{color:#CCC}#main{clear:both;width:100%;background:#FFF;display:table;table-layout:fixed;margin-top:20px}#main.ifsubnavigation .subnav,#main.ifsubnavigation .content{display:table-cell;vertical-align:top}#main.ifsubnavigation .subnav{width:160px;font-family:Gregfont5;font-size:14px;padding-right:22px}#main.ifsubnavigation .content{padding-top:6px;padding-left:20px}#main.ifsubnavigation .subnav select.menu{display:none}#main.ifsubnavigation .subnav ul.menu li{border-bottom:1px solid #C30;font-family:Gregfont4;font-weight:bold;white-space:pre;padding-bottom:6px}#main.ifsubnavigation .subnav ul.menu li a,.subnav .back{text-decoration:none;display:block;padding:8px 0 6px 2px;margin-top:6px}#main.ifsubnavigation .subnav ul.menu li.current a,#main.ifsubnavigation .subnav ul.menu li a:hover,.subnav .back{color:#FFF;background-color:#222}#homeblocks{width:100%;margin:auto}#home-block-1{float:left;width:320px;height:335px;text-align:justify;text-justify:inter-character}#home-block-2{float:left;width:320px;height:335px}#home-block-3{float:left;width:320px;height:335px;text-align:justify;text-justify:inter-character}#home-block-4{float:left;width:320px;height:335px;text-align:justify;text-justify:inter-character}#home-block-5{float:left;width:330px;height:342px}#home-block-6{float:left;width:320px;height:335px;text-align:justify;text-justify:inter-character}#timeline{width:861px;height:158px;margin:auto;margin-top:14px;margin-left:-13px}#timeline-vertical{width:320px;height:861px;margin:20px 0 40px}#ticker{width:276px;height:214px;background:linear-gradient(180deg,#FFFCE8 0%,#FFF6CF 100%);font-family:Gregfont5;font-size:15px;font-style:italic;line-height:135%;color:#456;box-shadow:0 0 2px #AAA;hyphens:auto;padding:12px 22px 23px 20px;cursor:pointer}#ticker:hover{background:linear-gradient(to top,#FFFCE8 0%,#FFF6CF 100%);color:#222;text-shadow:none}.contentblock{padding-bottom:125px;clear:left;border-top:12px solid #222;border-left:5px solid #FFF;margin-top:29px}.contentblock:hover{color:#222;height:auto;border-top:12px solid #F40}.contentblock h1{letter-spacing:0}.contentblock .toplegend{float:left;color:#222;font-size:0.7em;letter-spacing:1px;padding-left:12px;padding-bottom:12px;margin-top:-13px}.contentblock .toplegend span{padding:5px;background-color:#FFF}.contentblock .references-picture-rwdbefore{clear:left;display:block;float:left;width:193px;height:138px;background:transparent url(bg_portfolio_screenshot.gif) no-repeat;padding:11px 0 0 5px;margin-top:1px;margin-right:12px}.contentblock .references-picture-rwdafter{display:none}.contentblock .skills-picture-rwdbefore{display:block;float:left;width:193px;height:148px;margin-right:23px}.contentblock .skills-picture-rwdafter{display:none}.skills{width:205px;margin-top:-6px}.contentblock .infosector{display:block;float:left;width:32%;background:#E5E5E5;font-size:14px;padding:2px;border:1px solid #DDD;border-bottom:0;border-radius:7px;box-shadow:2px 3px 3px #DDD}.contentblock .l1{color:#FFF;background:#FF5A00;padding:0 5px;margin-right:2px}.contentblock .l2{color:#FFF;background:#222}.contentblock .description{display:block;float:left;width:38%;font-size:13px;color:#222;line-height:150%;text-align:justify;hyphens:auto;padding-left:20px;margin-top:-3px;margin-bottom:0px}.contentblock .description:hover{background:linear-gradient(to right,#FFF 0%,#FFF6CF 100%)}.description a:link,.description a:visited{color:#C30;font-weight:bold}#threescreens{position:relative;width:320px;height:127px;overflow:hidden}#threescreens img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s linear;will-change:opacity}#threescreens img.active{opacity:1}.greg{display:block;width:95%;text-align:center !important;border:1px solid #C30;border-top:none;border-radius:20px;padding:10px;margin-bottom:15px}.gregpics{width:500px;max-width:90%;border-radius:40px}.gregpics:hover{box-shadow:none;filter:grayscale(100%);transition:all 2s ease-in-out}.frontgreg-hover{display:block;width:100%;height:auto;cursor:pointer;transform-origin:center center;transition:transform 0.75s cubic-bezier(0.22,1,0.36,1),filter 0.55s ease,box-shadow 0.55s ease;will-change:transform,filter}.frontgreg-hover:hover{transform:scale(1.06) rotate(-0.35deg);filter:contrast(1.12) saturate(1.18) brightness(1.04);box-shadow:0 22px 55px rgba(0,0,0,0.28),0 6px 18px rgba(0,0,0,0.16)}.img-weblog-thumbnail{float:right;width:103px;margin-left:15px;margin-top:7px;border:1px solid #AAA;border-left:0;border-radius:10px}.img-weblog-thumbnail:hover{border:1px dotted #F40}.img-weblog{float:right;max-width:100%;background:url(bg_img_weblog.png) bottom;padding-bottom:18px;margin-top:5px;margin-left:22px;border-top:1px solid #DDD}.at{max-width:100%;margin-bottom:45px;border:1px dashed #246;border-radius:3px;box-shadow:3px 3px 5px 5px #89A}.reveal-image{position:relative;display:inline-block;overflow:hidden;line-height:0}.reveal-image img{display:block;max-width:100%;height:auto;transform:scale(1.05);animation:myImageZoom 1.2s ease forwards;will-change:transform}.reveal-image .reveal-cover{position:absolute;top:0;left:0;width:100%;height:100%;background:white;transform:translateX(0);animation:myCoverReveal 1.8s cubic-bezier(0.77,0,0.175,1) forwards;pointer-events:none}.video-container{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%}#tiles{list-style-type:none;position:relative;margin:0;padding:0}#tiles li{display:none;width:334px;margin:0;padding:0}.reactions-gridbox{float:none;width:320px;box-sizing:border-box;background:#FFF;font-size:16px;hyphens:auto;margin:7px;padding:10px;padding-bottom:14px;border-bottom:2px solid #C30;margin-bottom:33px;border-radius:16px;box-shadow:1px 1px 8px #CCC}.reactions-gridbox img{width:100% !important;height:auto;display:block;box-shadow:0 0px 20px #DDD;margin-bottom:7px;border-radius:10px}.reactions-title{font-family:Gregfont5;font-size:18px;font-weight:bold;padding:17px 0 6px 0}.reactions-gridbox-text{font-family:Gregfont6;line-height:100%}.reactions-gridbox:hover{color:#222;background:linear-gradient(180deg,#FFFCE8 0%,#FFF6CF 100%)}.feedbackby{float:right;margin-top:8px;font-family:Gregfont4;font-size:11px;color:#222222;font-style:normal;font-weight:normal;white-space:pre;box-shadow:0 3px 2px #ccc;border-radius:5px}.feedbackby-dark{float:right;font-family:Gregfont5;font-size:13px;color:#000;white-space:pre}.blogpost-date{background:url(weblog_datecircle.gif) repeat scroll 0 0 transparent;float:left;font-size:16px;height:65px;text-transform:uppercase;width:65px;margin-right:15px}.blogpost-date>div{float:left;font-family:'Arial',sans-serif;position:relative}.blogpost-month{color:#222;left:0;text-align:right;top:12px;width:30px}.blogpost-day{color:#FFF;left:8px;top:26px}.weblog-teaser-text{position:relative;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.weblog-teaser-text::after{content:"";position:absolute;bottom:0;right:0;width:42%;height:1.1em;background:linear-gradient(to right,rgba(255,255,255,0),white 90%)}.weblog-text{font-family:Gregfont6,Arial;font-size:20px;color:#222;font-weight:300;line-height:26px}p a{color:#F40 !important;font-weight:bold;text-decoration:none}.weblog-text a::before{content:"\279C ";font-size:0.8em;color:black;margin-right:2px}.gregch-screenshots{width:300px;margin-top:-13px;margin-bottom:8px;box-shadow:2px 2px 4px #000}#footer{background:#222;font-size:13px;color:#FFF;padding:20px 20px 20px 20px;border-top:10px solid #72B5E5;border-radius:0 0 10px 10px}#footer a{color:#FFF;z-index:100}#footerblocks{width:100%;margin:auto}#footer-block-1{float:left;width:309px}#footer-block-2{float:left;width:305px;font-size:13px;color:#BBB;text-align:justify;line-height:170%}#whereyouare{color:#B5C4D5}#footer-block-3{float:left;width:280px}#sitemap{font-weight:bold;letter-spacing:2px;line-height:160%}#footer-quality{clear:both;width:100%;margin-top:18px;padding:14px 16px 15px;text-align:center;box-sizing:border-box;border:1px solid #4A5E73;border-radius:8px;background:linear-gradient(to top,#111 0%,#333 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 0 18px rgba(114,181,229,0.15)}.footer-quality-head{display:block;color:#FFF;font-family:Gregfont5,sans-serif;font-size:20px;font-weight:bold;letter-spacing:1px;text-transform:none;margin-bottom:10px;border:0;background:none;padding:0}.footer-quality-metrics{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:10px}.footer-quality-pill{display:inline-block;padding:6px 10px;border:1px solid #5E7289;border-radius:4px;background:#101010;color:#E9F1F9;font-size:13px;font-weight:bold;line-height:1.4}.footer-quality-pill strong{color:#6F6;animation:blinker 6s ease-in-out infinite}.footer-quality-link{display:inline-block;color:#CC3300;font-family:Gregfont5,sans-serif;font-size:13px;letter-spacing:.2px;line-height:1.4;border-bottom:1px solid rgba(181,214,243,0.7)}#sitemap a:hover{letter-spacing:2px}.sitemaplink-active{padding:3px 4px 1px 5px;background:#C30;margin-left:-4px}.sitemapdividermain{display:block;float:left;color:#C30;font-size:15px}#bottom{background:#222;color:#FFF;font-size:13.5px;text-align:center;padding-top:5px;border-bottom:13px solid #72B5E5}#bottom a,#bottom a:visited,#bottom a:hover{color:#FE5A01;font-weight:700;text-decoration:underline;z-index:50}#backtotop a{z-index:1222;position:fixed;right:20px;bottom:13px;font-size:30px;color:#F40}.iwin{width:100%;max-width:400px;font-family:Arial,sans-serif;font-size:12px !important;color:#222;text-align:left;padding:0;overflow:hidden}.iwintit{height:20px;font-size:14px !important;color:#FFF;text-align:center;background:#222;padding-top:6px;border-bottom:1px solid #FF5A00}.iwinimg{float:left;width:120px;height:70px;margin-right:7px;border:1px solid #777}.type{display:inline-flex}.type span{word-break:break-all;height:1.2em;width:0%;overflow:hidden;animation:t 2s linear forwards}.type span:before{content:" ";display:inline-block}@keyframes pulse1{0%{color:#FFA}100%{color:#71B4E6}}@keyframes t{90%,100%{width:100%}}@keyframes myCoverReveal{from{transform:translateX(0)}to{transform:translateX(100%)}}@keyframes myImageZoom{from{transform:scale(1.05)}to{transform:scale(1)}}.slide-in{opacity:0;transform:translateY(40px);transition:opacity .6s ease-out,transform .6s ease-out;will-change:opacity,transform}.slide-in.visible{opacity:1;transform:translateY(0)}.blink-soft{animation:blinker 5.5s linear infinite}@keyframes blinker{50%{opacity:0.35}}@media screen{.onlywhenprinting{display:none}}@media screen and (max-width:1060px){#greglogo{width:190px;height:70px;margin-top:17px;margin-left:21px}}@media only screen and (max-width:1200px){#timeline{display:none}.contentblock .infosector{width:99%}.contentblock .description{width:auto;padding-left:0;margin-top:10px}}@media only screen and (max-width:1024px){h2{font-size:13px}.contentblock .infosector{font-size:14px}.contentblock .description{width:auto;font-size:15px;padding-left:0;margin-top:10px}#footer-block-3{padding:0;margin-left:32px}}@media screen and (max-width:1010px){#topnavigation ul{font-size:22px;padding-bottom:10px}#topnavigation ul li a .sub{display:none}}@media only screen and (max-width:900px){.navseparator{display:none}}@media only screen and (max-width:800px){a:active{color:#222;background:#FF0}p{line-height:130%;margin:0;padding:0 22px}#greglogo{margin:-22px 0 0px 28px;padding-bottom:30px}#footerblocks{width:320px}#backtotop{display:none !important}}@media only screen and (max-width:768px){body{background-attachment:scroll}h1,h5{background:#FFF;font-size:20px;color:#222;font-weight:bold;letter-spacing:-1px;padding-bottom:6px;animation:none}#toolbar{height:94px}#topnavigation{bottom:-10px;width:100%;padding:0}#topnavigation ul{float:none;width:100%;display:table;table-layout:fixed;font-family:Gregfont4;font-size:13px;font-weight:bold;padding-bottom:0;margin-bottom:0}#topnavigation ul li{float:none;width:100%;overflow:hidden;display:table-cell;width:auto;text-align:center;background:#FFF;font-size:1.5em;letter-spacing:1px;border:1px solid #BBB;border-left:none}#topnavigation ul li.current{border:1px solid #222}#topnavigation ul li a{font-size:.9em;color:#C30;text-transform:uppercase;padding:10px 0}#topnavigation ul li.current a{border:1px solid #222}#main.ifsubnavigation .subnav,#main.ifsubnavigation .content{display:block}#main.ifsubnavigation .subnav{width:auto;background-color:#222;padding:10px;margin-top:-24px}#main.ifsubnavigation .subnav ul.menu{display:none}#main.ifsubnavigation .subnav select.menu{width:95%;display:block;padding:7px 0 6px 10px;color:#C30;font-size:1.1em;font-weight:bold;background:#FFF;border-color:#FE5A01;margin-top:15px;margin-bottom:3px}#homeblocks{margin-top:-98px}#home-block-1{height:335px;margin-top:140px}#home-block-1-spacer{display:block;height:20px;margin-top:140px}#home-block-2,#home-block-3,#home-block-4,#home-block-6{height:335px;margin-bottom:12px}#home-block-5{height:auto}#home-block-6{margin-bottom:150px}.contentblock{float:left;width:auto;padding:0 22px}.contentblock .infosector{width:98%;margin-bottom:14px}.contentblock .infosector h1{font-size:23px}.contentblock .references-picture-rwdbefore,.contentblock .skills-picture-rwdbefore{display:none}.contentblock .references-picture-rwdafter{display:block;clear:left;width:193px;height:138px;background:transparent url(bg_portfolio_screenshot.png) no-repeat;padding:11px 0 0 5px;margin-bottom:-5px}.contentblock .skills-picture-rwdafter{display:block;clear:left;width:193px;height:148px;margin-bottom:8px}.skills{margin-top:10px}.contentblock .description{width:auto;font-size:15px;text-align:left;margin:8px}.feedbackby-dark{font-size:15px}.img-weblog-thumbnail{margin-right:5px;margin-left:5px}.img-weblog{display:block;float:none;margin:auto}.weblog-text{box-sizing:border-box;padding:0 20px;font-size:20px;color:#222;font-weight:300}.sitemapdividermain{display:none}#bottom{display:none}#whereyouare{margin:60px 0 40px 0}}@media screen and (max-width:600px){#toolbar{background:#C30;padding:10px 0 0}#toolbar-contentwide{display:none}.colorselector{visibility:hidden}#greglogo{margin:0 0 8px 22px}#footer{padding:15px;margin:0}#footer-quality{margin-top:16px;padding:12px;border-radius:6px}.footer-quality-head{font-size:18px;letter-spacing:.6px;margin-bottom:9px}.footer-quality-metrics{gap:7px;margin-bottom:9px}.footer-quality-pill{width:100%;box-sizing:border-box;font-size:12px;padding:7px 9px}.footer-quality-link{font-size:12px;line-height:1.35 !important}#footer a{font-size:15px;line-height:300%;border-bottom:1px solid #FFF}}@media only screen and (min-width:600px){#toolbar-contentwide{display:block;font-size:14px;letter-spacing:0px;margin-top:6px}#toolbar-contentnarrow{display:none}}@media screen and (max-width:500px){#tiles{width:100% !important;margin:0 !important;padding:0 !important;position:static !important}#tiles li{display:block !important;width:100% !important;margin:0 !important;padding:0 !important;position:static !important;left:auto !important;top:auto !important;right:auto !important;bottom:auto !important;transform:none !important}.reactions-gridbox{width:90% !important;margin:30px auto 18px auto !important;box-sizing:border-box !important}.weblog-teaser-text{margin:0px 0 0 15px !important}}@media screen and (max-width:497px){h3{margin-top:20px}#sitemap{margin-left:15px;margin-bottom:15px}#sitemap a{margin-left:15px;line-height:220%;margin-bottom:15px}.casestudy{font-size:15px;padding-left:15px}}@media only screen and (min-width:768px){#homeblocks{width:730px}#home-block-1,#home-block-2,#home-block-3,#home-block-4,#home-block-5,#home-block-6{padding:0 20px}#footerblocks{width:730px}#footer-block-1{padding:0 20px}#footer-block-2{padding:0 20px;font-style:italic}#footer-block-3{padding:0;margin-left:24px}}@media screen and (min-width:768px) and (max-width:1279px){#footer-block-2{display:none}}@media only screen and (min-width:1210px){#timeline-vertical{display:none}}@media only screen and (max-width:1279px){#homeblocks{transform:scale(1.07);padding:30px 0 30px 0}}@media only screen and (min-width:1280px){#homeblocks{width:1040px}#home-block-1{padding:0 15px 0 0}#home-block-2{padding:0 15px 0 8px}#home-block-3{padding:0 15px}#home-block-4{padding:0 15px 0 0}#home-block-5{padding:0 10px 0 8px}#home-block-6{padding:0 10px}#footerblocks{width:965px}#footer-block-1{padding:0 10px 0 0}#footer-block-2{padding:0 10px 0 0}#footer-block-3{padding:0 10px 0 0;margin-left:24px}}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;scroll-behavior:auto !important;transition-duration:.01ms !important}.slide-in{opacity:1;transform:none;transition:none}#threescreens img,.reveal-image img{transition:none;animation:none}}
/* Mobile homepage rework: consistent rhythm, readable type, and full-width visual blocks */
@media only screen and (max-width: 768px) {
:root {
--mobile-gutter: 16px;
--mobile-gutter-wide: 20px;
--mobile-block-gap: 22px;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
font-size: 17px;
line-height: 1.62;
margin-top: 0;
background-position: center top;
background-size: cover;
}
#sitewrapper {
width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
box-shadow: none;
}
#header {
padding-top: 10px;
margin-bottom: 14px;
}
#toolbar {
height: auto;
padding: 8px var(--mobile-gutter);
background: #FFF;
}
#greglogo {
width: min(67.2vw, 250px) !important;
height: auto !important;
margin: 20px auto 8px;
display: block;
}
#topnavigation {
position: static;
width: 100%;
margin: 0;
padding: 0 var(--mobile-gutter);
box-sizing: border-box;
}
#topnavigation ul {
display: table;
table-layout: auto;
border-collapse: separate;
border-spacing: 8px 0;
width: 100%;
margin: 0;
padding: 0;
float: none;
font-size: 15px;
border: 0;
background: transparent;
border-radius: 0;
overflow: visible;
}
#topnavigation ul li {
width: auto;
display: table-cell;
vertical-align: middle;
float: none;
white-space: nowrap;
border-right: 0;
overflow: visible;
background: transparent;
border: 0 !important;
}
#topnavigation ul li:last-child {
border-right: 0;
}
#topnavigation ul li.current {
border: 0 !important;
}
#topnavigation ul li a {
display: block;
padding: 10px 9px;
text-align: center;
font-size: 18px;
font-weight: bold;
line-height: 1.3;
white-space: nowrap;
color: #fff;
background: #c30;
border-radius: 0;
box-shadow: none;
border: 0 !important;
}
#topnavigation ul li a::after {
display: none;
}
#topnavigation ul li.current a,
#topnavigation ul li a:hover,
#topnavigation ul li a:focus-visible {
color: #fff;
background: #c30;
box-shadow: none;
border: 0 !important;
}
#topnavigation ul li.current a {
background: #222;
}
#main {
display: block;
width: 100%;
margin-top: 12px;
padding: 0;
}
#main.ifsubnavigation .subnav select.menu {
display: block;
margin-left: auto;
margin-right: auto;
}
#homeblocks {
width: 100% !important;
transform: none !important;
margin: 0 !important;
padding: 0 var(--mobile-gutter) 8px !important;
box-sizing: border-box;
}
#home-block-1,
#home-block-2,
#home-block-3,
#home-block-4,
#home-block-5,
#home-block-6 {
float: none;
width: 100%;
max-width: none;
height: auto;
margin: 0 0 var(--mobile-block-gap);
padding: 12px 0 0;
text-align: left;
}
#home-block-1 {
margin-bottom: calc(var(--mobile-block-gap) - 15px);
}
#home-block-1 img,
#home-block-2 img,
#home-block-3 img,
#home-block-4 img {
width: 98% !important;
max-width: 98% !important;
height: auto !important;
display: block;
margin-left: auto;
margin-right: auto;
}
#home-block-1 img {
margin-bottom: 0;
}
#home-block-4 img {
width: 98% !important;
max-width: 98% !important;
}
#home-block-3 .reveal-image,
#home-block-4 > a {
display: block;
width: 98%;
margin-left: auto;
margin-right: auto;
}
#home-block-1-spacer {
display: none;
height: 0;
margin: 0;
}
h1,
h5,
h2.home-heading {
font-size: clamp(24px, 7vw, 31px);
line-height: 1.14;
letter-spacing: -0.35px;
margin-bottom: 14px;
padding: 8px 0 8px;
border-bottom: 0;
}
h1 {
margin-top: 0;
margin-bottom: 14px;
}
#homeblocks h1 {
margin-top: 0 !important;
padding-top: 0 !important;
}
h2 {
white-space: normal;
font-size: 18px;
line-height: 1.45;
}
p,
li,
.weblog-text,
.contentblock .description,
.reactions-gridbox-text,
#ticker,
#whereyouare {
font-size: clamp(18px, 4.4vw, 20px);
line-height: 1.58;
letter-spacing: 0;
}
p {
padding: 0;
margin: 0 0 1em;
}
.contentblock {
clear: both;
width: 100%;
float: none;
margin: 0 0 26px;
padding: 16px var(--mobile-gutter);
border-top: 7px solid #222;
border-left: 0;
border-radius: 14px;
box-sizing: border-box;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}
.contentblock .toplegend {
float: none;
margin: 0 0 10px;
padding: 0;
font-size: 12px;
letter-spacing: 0.5px;
}
.contentblock .infosector,
.contentblock .description {
width: 100%;
float: none;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.contentblock .infosector {
padding: 12px;
margin-bottom: 14px;
border-radius: 10px;
}
.contentblock .description {
line-height: 1.62;
}
.contentblock .references-picture-rwdbefore,
.contentblock .skills-picture-rwdbefore {
display: none;
}
.contentblock .references-picture-rwdafter,
.contentblock .skills-picture-rwdafter {
display: block;
width: 100%;
max-width: 350px;
height: auto;
margin: 0 auto 14px;
padding: 0;
background-size: cover;
background-position: center;
}
/* References list on smartphones: keep portfolio frame at intended size */
.contentblock .references-picture-rwdafter {
width: 193px;
max-width: 193px;
height: 138px;
padding: 11px 0 0 5px;
background-size: 193px 138px;
background-position: left top;
margin: 0 auto 8px;
}
#ticker {
width: 100%;
height: 300px;
box-sizing: border-box;
margin: -10px 0 0;
padding: 16px;
border-radius: 12px;
overflow: hidden;
}
#home-block-2 h2.home-heading {
margin-bottom: 18px;
}
a.tooltip,
a.tooltip-left {
line-height: 1.55;
}
a.tooltip:hover span,
a.tooltip-left:hover span {
line-height: 155%;
}
#home-block-5 h2 a {
line-height: 2 !important;
}
#threescreens,
.gregch-screenshots,
.gregpics,
.frontgreg-hover,
.img-weblog,
.at,
.reactions-gridbox img {
width: 100% !important;
max-width: 100% !important;
height: auto;
}
#threescreens {
width: 98% !important;
max-width: 98% !important;
height: auto;
aspect-ratio: 320 / 127;
border-radius: 12px;
margin: 0 auto 10px;
}
#home-block-3 .reveal-image,
#home-block-4 > a {
margin-bottom: 10px;
}
img[src*="inlay_casestudies.webp"] {
width: 98% !important;
max-width: 98% !important;
height: auto !important;
display: block;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
.img-weblog-thumbnail {
float: none;
width: min(56vw, 240px);
margin: 0 auto 14px;
display: block;
border-radius: 14px;
}
/* Weblog overview on smartphones: keep thumbnails small and titles static/wrapping */
.img-weblog-thumbnail {
float: right;
width: 103px !important;
max-width: 103px !important;
height: auto !important;
margin: 7px 0 10px 12px;
}
a > h1.type {
white-space: normal !important;
line-height: 1.28 !important;
animation: none !important;
}
a > h1.type span {
width: auto !important;
height: auto !important;
overflow: visible !important;
word-break: normal !important;
white-space: normal !important;
animation: none !important;
}
.blogpost-date {
display: none !important;
}
.blogpost-date + h1.type {
white-space: normal !important;
line-height: 1.28 !important;
animation: none !important;
}
.blogpost-date + h1.type span {
width: auto !important;
height: auto !important;
overflow: visible !important;
word-break: normal !important;
white-space: normal !important;
animation: none !important;
}
/* Weblog overview on smartphones: tighten vertical rhythm */
.blogpost-date + a > h1.type {
margin-bottom: 2px !important;
padding-top: 4px !important;
padding-bottom: 0 !important;
}
.blogpost-date + a + br + div {
margin-top: 0 !important;
}
#main.ifsubnavigation .content div[style*="background:#BBB"] {
margin-bottom: 0 !important;
}
#main.ifsubnavigation .content div[style*="background:#BBB"] + br,
#main.ifsubnavigation .content div[style*="background:#BBB"] + br + br,
#main.ifsubnavigation .content div[style*="background:#BBB"] + br + br + br {
display: none !important;
}
.weblog-text {
padding: 0 15px;
box-sizing: border-box;
}
.reactions-gridbox {
width: 100% !important;
margin: 0 0 20px !important;
padding: 14px;
border-radius: 14px;
}
.reactions-title {
font-size: 23px;
line-height: 1.28;
padding: 8px 0 10px;
}
#footer {
padding: 18px var(--mobile-gutter-wide);
border-radius: 0;
}
#footer input[type="text"],
#footer input[type="search"],
#footer input[type="email"],
#footer input[type="url"],
#footer textarea,
#footer select {
width: 95vw !important;
max-width: 95%;
box-sizing: border-box;
display: block;
float: none !important;
font-size: 16px;
line-height: 1.4;
padding: 10px 12px;
margin-left: auto;
margin-right: auto;
}
#footer input[type="text"],
#footer input[type="search"],
#footer input[type="email"],
#footer input[type="url"],
#footer select {
min-height: 42px;
}
#footer textarea {
min-height: 140px;
}
#footer input[type="submit"] {
width: 95vw !important;
max-width: 95%;
float: none !important;
display: block;
margin: 0 auto 22px !important;
height: auto;
min-height: 44px;
font-size: 16px;
line-height: 1.25;
padding: 10px 12px;
box-sizing: border-box;
}
#footer-block-1 > div[style*="font-size:15px"] {
font-size: 20px !important;
line-height: 1.65;
letter-spacing: 0.2px !important;
}
#footer-block-1 > div[style*="font-size:15px"] a,
#footer-block-1 > div[style*="font-size:15px"] span {
font-size: 1em !important;
}
#footer-block-1 #contactform label {
display: block;
font-size: 16px;
line-height: 1.4;
margin-bottom: 6px;
}
#footer-block-1 #contactform input[type="text"],
#footer-block-1 #contactform input[type="search"],
#footer-block-1 #contactform input[type="email"],
#footer-block-1 #contactform input[type="url"],
#footer-block-1 #contactform textarea,
#footer-block-1 #contactform select {
width: 100% !important;
max-width: 100% !important;
float: none !important;
display: block;
margin: 0 0 12px 0 !important;
padding: 10px 12px !important;
box-sizing: border-box;
text-indent: 0;
}
#footer-block-1 #contactform textarea {
line-height: 1.45 !important;
}
#footer-block-1 #contactform {
padding-bottom: 20px;
}
#footer-block-3 > div[style*="float:right"] {
font-size: 18px !important;
line-height: 1.6;
}
#footer-block-3 > div[style*="float:right"] a,
#footer-block-3 > div[style*="float:right"] span {
font-size: 18px !important;
}
.footer-quality-pill {
font-size: 15px !important;
}
#footer-block-2 h1,
#footer-block-3 h1 {
float: none !important;
clear: both;
text-align: left;
margin: 0 0 6px !important;
padding: 0 !important;
line-height: 1.2;
}
#footer-block-2 h1 {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#whereyouare {
transform: none !important;
text-justify: auto !important;
font-size: calc(clamp(18px, 4.4vw, 20px) - 2px);
text-align: left !important;
word-spacing: normal;
letter-spacing: 0;
line-height: 1.6;
hyphens: auto;
margin-top: 10px;
}
#home-block-1,
#home-block-2,
#home-block-3,
#home-block-4,
#home-block-5,
#home-block-6 {
text-justify: auto;
}
img[src*="logo_webdesign_gregch.svg"] {
width: 98% !important;
max-width: 98% !important;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
#footerblocks {
width: 100%;
}
#footer-block-1,
#footer-block-2,
#footer-block-3 {
float: none;
width: 100%;
margin: 0 0 18px;
padding: 0;
}
#sitemap {
line-height: 1.95;
letter-spacing: 0.8px;
}
#sitemap a {
font-size: 18px;
line-height: 1.9;
}
#backtotop a {
right: 12px;
bottom: 10px;
font-size: 34px;
}
}
@media only screen and (max-width: 480px) {
:root {
--mobile-gutter: 14px;
--mobile-gutter-wide: 16px;
--mobile-block-gap: 18px;
}
h1,
h5,
h2.home-heading {
font-size: clamp(22px, 7.8vw, 28px);
}
p,
li,
.weblog-text,
.contentblock .description,
.reactions-gridbox-text,
#ticker,
#whereyouare {
font-size: clamp(17px, 4.7vw, 19px);
line-height: 1.56;
}
#ticker {
height: 320px;
}
.contentblock {
padding: 14px var(--mobile-gutter);
}
}
/* Device-focused refinements for modern smartphones */
@media only screen and (max-width: 430px) {
#homeblocks {
padding-bottom: 2px !important;
}
#home-block-1,
#home-block-2,
#home-block-3,
#home-block-4,
#home-block-5,
#home-block-6 {
margin-bottom: 16px;
}
.contentblock {
margin-bottom: 20px;
border-top-width: 6px;
}
.reactions-title {
font-size: clamp(21px, 6.2vw, 25px);
}
#ticker {
font-size: clamp(17px, 4.6vw, 19px);
}
}
@media only screen and (max-width: 390px) {
#mapgreg {
height: 48vw !important;
min-height: 150px;
max-height: 210px;
}
#toolbar {
padding-left: 12px;
padding-right: 12px;
}
#topnavigation {
padding-left: 12px;
padding-right: 12px;
}
#topnavigation ul {
font-size: 14px;
}
#topnavigation ul li a {
font-size: 16px;
padding: 9px 6px;
}
h1,
h5,
h2.home-heading {
margin-bottom: 10px;
line-height: 1.12;
}
.contentblock .infosector {
padding: 10px;
margin-bottom: 12px;
}
.img-weblog-thumbnail {
width: min(62vw, 230px);
}
}
@media only screen and (max-width: 360px) {
:root {
--mobile-gutter: 12px;
--mobile-gutter-wide: 14px;
--mobile-block-gap: 16px;
}
body {
font-size: 16px;
line-height: 1.56;
}
h1,
h5,
h2.home-heading {
font-size: clamp(21px, 7.6vw, 25px);
}
p,
li,
.weblog-text,
.contentblock .description,
.reactions-gridbox-text,
#ticker,
#whereyouare {
font-size: clamp(16px, 4.8vw, 18px);
line-height: 1.55;
}
#ticker {
height: 340px;
}
.contentblock {
border-radius: 12px;
padding: 12px var(--mobile-gutter);
}
#threescreens {
width: 98% !important;
max-width: 98% !important;
height: auto;
aspect-ratio: 320 / 127;
}
#footer {
padding: 16px var(--mobile-gutter-wide);
}
}
#changemapform input[type="submit"] {
width: 112px;
margin-left: 4.5px;
margin-right: 4.5px;
}
.map-mobile-hint {
display: none;
}
.iwinimg-wrap {
float: left;
width: 120px;
height: 70px;
margin-right: 7px;
overflow: hidden;
display: block;
visibility: visible;
opacity: 1;
}
.iwinimg-wrap .iwinimg {
display: block;
width: 120px;
height: 70px;
max-width: none;
object-fit: cover;
visibility: visible;
opacity: 1;
}
body.page-about #main p a {
color: #C30 !important;
}
@media only screen and (max-width: 768px) {
#main.ifsubnavigation .content {
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box;
}
#mapgreg {
display: block;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
height: 46vw !important;
min-height: 160px;
max-height: 230px;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: 0 !important;
}
#mapgreg.leaflet-container {
width: 100% !important;
}
.leaflet-popup-content .iwinimg-wrap {
float: left;
width: 120px;
height: 70px;
margin-right: 7px;
overflow: hidden;
display: block;
visibility: visible;
}
.leaflet-popup-content .iwinimg {
display: block;
width: 120px !important;
height: 70px !important;
max-width: none !important;
object-fit: cover;
visibility: visible !important;
opacity: 1 !important;
}
#changemapform {
display: flex;
flex-wrap: nowrap;
justify-content: center;
gap: 3px;
}
#changemapform input[type="submit"] {
flex: 1 1 0;
min-width: 0;
width: auto;
margin: 0;
padding-left: 4px;
padding-right: 4px;
font-size: 12px;
white-space: nowrap;
}
.map-mobile-hint {
display: block;
margin-top: 6px;
font-size: 12px;
color: #456;
text-align: center;
line-height: 1.3;
}
}
@media only screen and (max-width: 768px) {
body.page-about #main.ifsubnavigation > :not(.subnav) {
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
}
body.page-about p a {
color: #C30 !important;
}
body.page-weblog #main.ifsubnavigation > :not(.subnav) {
padding-left: 14px;
padding-right: 14px;
box-sizing: border-box;
}
body.page-about #main.ifsubnavigation > :not(.subnav) h1:not(.type),
body.page-references #main.ifsubnavigation > :not(.subnav) h1:not(.type) {
font-size: clamp(26px, 9.5vw, 38px) !important;
line-height: 1.1 !important;
}
/* About page has legacy markup like ...
: keep heading size, not paragraph size */
body.page-about #main.ifsubnavigation > :not(.subnav) h1 p {
font-size: inherit !important;
line-height: inherit !important;
margin: 0 !important;
padding: 0 !important;
}
/* References cards: make company name headings clearly larger on smartphones */
body.page-references #main.ifsubnavigation > :not(.subnav) .contentblock .infosector h1 {
font-size: clamp(22px, 8.2vw, 32px) !important;
line-height: 1.08 !important;
}
body.page-reactions #tiles li {
width: 100% !important;
position: static !important;
left: auto !important;
right: auto !important;
top: auto !important;
bottom: auto !important;
transform: none !important;
}
body.page-reactions .reactions-gridbox {
width: 98% !important;
margin: 0 auto 52px auto !important;
}
body.page-reactions #tiles {
width: 100% !important;
margin: 0 auto !important;
padding: 0 !important;
position: static !important;
}
}
@media only screen and (max-width: 500px) {
body.page-reactions #tiles li {
width: 100% !important;
margin: 0 0 52px 0 !important;
}
body.page-reactions .reactions-gridbox {
width: 98% !important;
margin: 0 auto 52px auto !important;
padding: 12px 12px 18px 12px !important;
border-radius: 14px !important;
}
body.page-about.area-newandoldpics #main.ifsubnavigation > :not(.subnav) {
padding-left: 14px !important;
padding-right: 14px !important;
box-sizing: border-box !important;
}
body.page-about.area-newandoldpics .greg {
width: 100% !important;
margin: 0 auto 18px auto !important;
box-sizing: border-box !important;
}
body.page-about.area-newandoldpics .greg + br {
display: none !important;
}
body.page-about.area-newandoldpics .gregpics,
body.page-about.area-newandoldpics .greg video {
display: inline-block !important;
vertical-align: top !important;
width: 100% !important;
max-width: 100% !important;
}
}
@keyframes submenuFlash {
0%,
100% {
background: #FFF;
border-color: #FE5A01;
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
50% {
background: #FFF6CF;
border-color: #C30;
box-shadow: 0 0 0 3px rgba(255, 90, 1, 0.2), 0 0 14px rgba(255, 90, 1, 0.3);
}
}
@media only screen and (max-width: 768px) {
#main.ifsubnavigation .subnav select.menu.submenu-flash {
animation: submenuFlash 0.45s ease-in-out 3;
}
}
.weblog-text a,.weblog-text a:visited,.weblog-text a:hover,.weblog-text a:focus{color:#C30 !important;}
.footer-quality-pill strong{color:#7CFF7C !important;animation:footerQualityPulse 6s ease-in-out infinite !important;}@keyframes footerQualityPulse{0%,100%{color:#7CFF7C}50%{color:#4CAF50}}
.footer-quality-pill strong{color:#8CFF8C !important;opacity:1;animation:footerQualityBlink 5.8s ease-in-out infinite !important;}@keyframes footerQualityBlink{0%,100%{opacity:1}50%{opacity:.78}}