/* Copyright (c) 2008, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.net/yui/license.txt */ /* modified YUI reset */ html{color:#fff;background:#000;}body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,b,italic{font-style:normal;font-weight:normal;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym {border:0;font-variant:normal;}sup {vertical-align:text-top;}sub {vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}legend{color:#000;} /* YUI fonts */ body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;} /* end of Copyright to Yahoo!, start of our own code */ .clearfix:after {content:".";display:block;font-size:0px;line-height:0px;height:0;clear:both;visibility:hidden;} * html .clearfix {height:1%;} .screen-reader-text,.noshow {display:none;} .lores .unpic {display:none;} @font-face { font-family: uncologo; src: url(fonts/uncocsb.eot); /* IE9 Compat Modes */ src: url('fonts/uncsb?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/uncsb.woff2') format('woff2'), /* Modern Browsers */ url('fonts/uncsb.ttf'), /* Safari, Android, iOS */ url('fonts/uncsb.svg#uncsb') format('svg'); /* Legacy iOS */ } @font-face { font-family: quicksand; src: url(fonts/qs400.eot); /* IE9 Compat Modes */ src: url('fonts/qs400?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/qs400.woff2') format('woff2'), /* Modern Browsers */ url('fonts/qs400.ttf'), /* Safari, Android, iOS */ url('fonts/qs400.svg#qs400') format('svg'); /* Legacy iOS */ } @font-face { font-family: quicksandbold; src: url(fonts/qs700.eot); /* IE9 Compat Modes */ src: url('fonts/qs700?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('fonts/qs700.woff2') format('woff2'), /* Modern Browsers */ url('fonts/qs700.ttf'), /* Safari, Android, iOS */ url('fonts/qs700.svg#qs400') format('svg'); /* Legacy iOS */ } #unwrap {background:url(images/loading.gif) no-repeat center center;} #uncont {opacity:0;} .hires #uncont,.lores #uncont {opacity:1;} html.hires,.hires body,.hires #unwrap,.hires #uncont {height:100%;width:100%;overflow:hidden;} html.lores {background:#fff;color:#000;} .hires #unwrap {position:relative;} #topnav {position:absolute;top:0;left:0;right:0;z-index:800;height:38px;background:#000;} #topnav .mob {display:block;width:33px;height:38px;overflow:hidden;float:left;background:url(images/sprite8bit_1_1.png) no-repeat 0 5px;position:relative;z-index:90;} #topnav .mob span {display:block;padding:38px;} #topnav h1,#topnav h1 a {display:block;width:300px;height:38px;overflow:hidden;} #topnav h1 {float:left;position:relative;z-index:90;} #topnav h1 a {background:url(images/logo-jstilts.png) no-repeat 0 1px;} #topnav h1 a span {display:block;padding:310px;} #topnav h1 img {display:none;} #topnav ul,#topnav li {padding:0;margin:0;list-style:none;} #topnav ul.topnav {display:inline-block;position:absolute;left:-500px;top:0;z-index:80;} #topnav ul.topnav li {display:inline-block;padding:10px 0 0 0;margin:0 22px 0 0;color:#ccc;font-family:arial;font-size:16px;} #topnav ul.topnav li a {color:#aaa;text-decoration:none;} #topnav ul.topnav li a:hover {color:#fff;} #topnav.navon ul.topnav {transform:translate(750px,0);transition: 0.75s ease-out;} #topnav.navoff ul.topnav {transform:translate(-500px,0);transition: 0.75s ease-in;} #topnav .social {position:absolute;right:5px;top:5px;} #topnav .social li {display:inline-block;width:32px;height:27px;} #topnav .social a {display:block;width:27px;height:27px;overflow:hidden;background:url(images/social.png) no-repeat -1000px -1000px;transform:scale(.8,.8);} #topnav .social span {display:block;padding:30px;} #topnav .social .fb a {background-position:-74px -33px;} #topnav .social .tw a {background-position:-37px -33px;} #topnav .social .ln a {background-position:-185px -33px;} #topnav .social .pn a {background-position:-148px -33px;} #topnav .social .in a {background-position:0 -33px;} #topnav .social a:hover {transform:scale(1,1);transition:transform 0.2s ease-in-out;} #topnav .social .fb a:hover {background-position:-74px 0;} #topnav .social .tw a:hover {background-position:-37px 0;} #topnav .social .ln a:hover {background-position:-185px 0;} #topnav .social .pn a:hover {background-position:-148px 0;} #topnav .social .in a:hover {background-position:0 0;} .hires #sidenavshut {display:none;position:absolute;left:0;right:0;top:38px;bottom:0;} .hires #sidenav {position:absolute;height:100%;left:-280px;top:0;z-index:780;font-family:arial;font-size:1.1vw;color:#fff;} .hires .showslidemenu #sidenav { -webkit-animation-name: hideMenu; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease-in-out; -webkit-animation-duration: 2s; animation-name: hideMenu; animation-iteration-count: 1; animation-timing-function: ease-in-out; animation-duration: 2s; } .hires #sidenav .inner {width:280px;height:100%;background:#000;} .hires #sidenav .inner2 {padding:48px 5px 0 10px;} .hires #sidenav ul {padding-top:40px;} .hires #sidenav ul li ul {padding-top:0px;padding-bottom:10px;} .hires #sidenav a {color:#ccc;display:block;margin:0 0 10px 0;} .hires #sidenav .sub-menu .sub-menu {display:none;} .hires #unwrap.navon #sidenav{transform:translate(280px,0);transition: 0.5s ease-out;} .hires #unwrap.navoff #sidenav {transform:translate(-300px,0);transition: 0.4s ease-in;} .hires #unwrap.navon #sidenavshut {display:block;z-index:770;} @-webkit-keyframes hideMenu { 0% {-webkit-transform: translate(-300px,0);} 40% {-webkit-transform: translate(280px,0);} 70% {-webkit-transform: translate(280px,0);} 100% {-webkit-transform: translate(-300px,0);} } @keyframes hideMenu { 0% {transform: translate(-300px,0);} 40% {transform: translate(280px,0);} 70% {transform: translate(280px,0);} 100% {transform: translate(-300px,0);} } .lores #sidenav {position:relative;top:38px;display:none;} .lores #unwrap.navon #sidenav {display:block;} #iframes {width:1px;height:1px;position:absolute;left:1px;bottom:1px;z-index:-10;} #iframes iframe {padding:0;margin:0;width:1px;height:1px;position:absolute;left:0;top:0;} /* Homepage */ .lores #desk {padding:38px 5px 10px 5px;} .hires #desk {z-index:100;position:absolute;left:0;right:0;top:38px;bottom:0;} .hires #desk .desk-inner {position:absolute;top:0;bottom:0;left:0;right:0;background:url(images/back-desk.jpg) no-repeat center top;background-size:contain; width: 100vw; height: 50vw; max-height: 100vh; max-width: 200vh; margin:0 auto; overflow:hidden; } /* height:width ratio = 8/16 = .5 max-width: 16/8 = 2 */ /* height:width ratio = 9/16 = .5625 max-width: 16/9 = 1.778 */ .hires #desk .desk-overhead {background:url(images/back-desk2.jpg) no-repeat center top;background-size:contain;} .hires #portfoliohp #desk .desk-overhead,.hires #desk #unmailhp.desk-overhead {background:url(images/back-desk3.jpg) no-repeat center top;background-size:contain;} .hires .overlay {position:absolute;z-index:190;} .hires #overlayb {height:38px;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(0,0,0,0),rgba(0,0,0,1) 100%);} .hires #overlayl {width:10px;left:0;top:0;bottom:0;background:linear-gradient(to left,rgba(0,0,0,0),rgba(0,0,0,1) 100%);} .hires #overlayr {width:10px;right:0;top:0;bottom:0;background:linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1) 100%);} .hires .overlayx {display:none;} .hires .overlayy {display:none;} .hires .overlayxy .overlayx {display:block;} .hires .overlayyx .overlayy {display:block;} .hires #desk .furn,.hires #desk .furn2 {position:absolute;z-index:110;} .hires #desk .furn img,.hires #desk .furn2 .bg {display:block;width:100%;height:auto;position:relative;z-index:1;} .hires #desk .desktitle {top:89%;left:44.5%;width:11%;} .hires #desk .desktitle h1,.hires #desk .desktitle h2,.hires #desk .desktitle strong {display:none;} .hires #desk ul,.hires #desk li {padding:0;margin:0;list-style:none;} /* Homepage */ .hires #desk #phone {left:0;top:1.5%;width:11.5%;} .hires #desk #monitor {left:21.5%;top:0;width:45.6%;} .hires #desk #monitor .txt {position:absolute;z-index:120;left:16%;top:6%;width:68%;bottom:29%;overflow:hidden;font-family:uncologo,Century Schoolbook,serif;color:#2a1401;font-size:1.5vw;} .hires #desk #monitor .txt a {color:#fa0819;text-decoration:none;} .hires #desk #monitor .txt a:hover {text-decoration:underline;} .hires #desk #monitor .txt h1 {font-size:2.2vw;font-family:uncologo,Century Schoolbook,serif;} .hires #desk #monitor .txt h1 strong {font-size:2.4vw;font-family:uncologo,Century Schoolbook,serif;font-weight:bold;} .hires #desk #monitor .txt h1 a {color:#2a1401;} .hires #desk #monitor .txt h1 a strong {color:#fa0819;} .hires #desk #monitor .txt h1 a:hover {text-decoration:none;} .hires #desk #monitor .txt a:hover strong {text-decoration:underline;} .hires #desk #monitor .txt p {padding-top:8px;} .hires #desk #monitor .txt .more {font-size:1.4vw;text-align:right;position:absolute;width:100%;left:0;right:0;bottom:0;background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);} .hires #desk #monitor .txt .more a {display:block;padding:10px 0 6px 0;} .hires #desk #folder {left:74.25%;top:25.5%;width:20.3%;} .hires #desk #folder #servicestxt {position:absolute;left:0;top:0;} #desk #tablet {left:0;top:40.3%;width:22.7%;position:absolute;z-index:110;} #desk #tablet img {display:block;width:100%;height:auto;position:relative;z-index:1;} #desk #tablet ul,#desk #tablet li {padding:0;margin:0;list-style:none;} #desk #tablet .slider-wrap {position:absolute;width:83.75%;height:77.6%;left:5.5%;top:8.5%;overflow:hidden;background:#fff;} #desk #tablet .slider-wrap img {width:100%;height:auto;} #desk #tablet .slider-wrap a {position:relative;z-index:10;display:block;} #desk #tablet .nav {position:absolute;z-index:30;} #desk #tablet .nav img {width:100%;height:auto;} .lores2 #desk #tablet {display:none;} .hires #desk #tablet .prev {width:7.16%;left:6%;top:41.3%;} .hires #desk #tablet .next {width:7.71%;left:86%;top:36.8%;} .hires #desk #social {left:31.3%;top:65%;width:26.8%;} .hires #desk #social ul {display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:120;} .hires #desk #social li {display:inline-block;margin:0 1.2% 0 0;width:11.7%;height:72.4%;} .hires #desk #social li a {display:block;height:100%;overflow:hidden;} .hires #desk #social li a span {display:block;padding:200px;} .hires #desk #social li.fb {padding:0 1% 0 3%;} .hires #desk #social li.pn {padding:0 1% 0 0;} .hires #desk #social li.yt {padding:0 6% 0 3%;} .hires #desk #social li.nw {padding:0 0 0 2%;} .hires #desk #telegram {right:0;bottom:0;width:37.5%;} .hires #desk #drawer {left:16.2%;bottom:0;width:62%;} .hires #desk #drawer img {display:none;} .hires #desk #drawer .open .open {display:block;} .hires #desk #drawer .shut .shut {display:block;} .hires #desk #cup {left:11%;top:25.5%;width:9%;} .hires #desk #cup a {cursor:default;} .hires #desk #cup img {display:none;} .hires #desk #cup .full .full {display:block;} .hires #desk #cup .empty .empty {display:block;} .hires #desk #oilcan {left:79.5%;top:0;width:11.2%;} .hires #desk #calendar {left:74.1%;top:12%;width:9.4%;} /* general styles */ #desk .content {color:#313131;font-family:arial;} #desk .content a {color:#cd0d0b;font-style:italic;text-decoration:none;} #desk .content a:hover {text-decoration:underline;} #desk .content strong,#desk .content b {font-weight:bold;} #desk .content em,#desk .content i {font-style:italic;} #desk .content p {padding:0 0 20px 0;} #desk .content blockquote {padding:0 0 20px 20px;font-family:georgia,times new roman,times;font-style:italic;} #desk .content ul {padding:0 0 17px 10px;} #desk .content li {padding:0 0 3px 10px;} /* subpages */ .hires #contacttags {right:0;top:0;width:13%;z-index:300;} .hires #serviceshp ::-webkit-scrollbar {width:10px;} .hires #serviceshp ::-webkit-scrollbar-track {background:#000;} .hires #serviceshp ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} /* Services HP */ .srvmenu .txt h1,.srvmenu .txt h1 a,.srvmenu .txt h1 strong {display:block;} .hires .srvmenu .txt h1 {position:absolute;z-index:120;overflow:hidden;} .hires .srvmenu .txt h1 strong {padding:110%;} .hires .srvmenu .txt ul {position:absolute;z-index:120;overflow:hidden;overflow-y:auto;font-family:georgia,times new roman,times,serif;color:#2c2223;font-size:1.2vw;} .srvmenu .txt ul a {color:#2c2223;text-decoration:none;} .srvmenu .txt ul a:hover {text-decoration:underline;} .hires #srvprint {left:6%;top:8.5%;width:28%;} /* was width:26.5%; */ .hires #srvprint .txt h1 {left:16.8%;width:73%;top:7.4%;height:50.3%;} .hires #srvprint .txt ul {left:17.3%;top:62.9%;width:68%;height:29%;} .hires #srvprint .txt ul li {padding:2px 0 2px 5%;} #srvprint li {} #srvprint li.odd {background:#f7272b;} .hires #srvdigital {left:40%;top:8%;width:24.5%;} /* was width:23.9%; */ .hires #srvdigital .txt h1 {left:19.2%;width:62.3%;top:22.5%;height:10.5%;} .hires #srvdigital .txt ul {left:19.2%;top:35.2%;width:62.5%;color:#fdfcfc;height:49%;font-family:arial,sans-serif;font-size:1.1vw;} #srvdigital .txt ul a {color:#d5d2c8;} #srvdigital li {background:#010101;} .hires #srvdigital li {padding:4px 0 4px 6.3%;} #srvdigital li.odd {background:#252121;} .hires #srvdigital li:nth-child(3) {padding-bottom:6px;} .hires #srvdigital li:nth-child(4) {padding-top:6px;border-top:dashed 4px #fff;} .hires #srvmarketing {left:70%;top:9.1%;width:26%;} /* was width:25.3%; */ .hires #srvmarketing .txt h1 {left:13.2%;width:77.6%;top:4%;height:55.8%;} .hires #srvmarketing .txt ul {left:14.9%;top:64%;width:75%;height:32%;font-size:1.2vw;} .hires #srvmarketing li {padding:3px 0 3px 6.3%;} .hires #srvmarketing li.odd {background:#b9b4ab;} .hires #mplane {position:absolute;z-index:125;width:30.2%;left:60.5%;top:50.5%;} .hires #mplane img {width:100%;height:auto;position:relative;z-index:126;} /* Services - Print */ .hires #servicesprint #srvprint {left:12%;top:16%;z-index:200;} .hires #servicesprint #srvdigital {left:-8%;top:51%;z-index:190;transform: rotate(-14deg);} .hires #servicesprint #srvmarketing {left:-7.6%;top:4.2%;z-index:180;transform: rotate(-9deg);} .hires #servicesprint #pagecontent {left:41%;top:6%;width:54.1%;} .hires #servicesprint .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} .hires #servicesprint ::-webkit-scrollbar {width:10px;} .hires #servicesprint ::-webkit-scrollbar-track {background:#000;} .hires #servicesprint ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} .hires #servicesprint .col3 .colimg {position:absolute;width:29%;left:5%;top:27%;} .hires #servicesprint .col3 .colimg img {width:100%;height:auto;} .hires #servicesprint .col3 .colinner2 {position:absolute;width:58%;left:36%;top:10%;height:80%;overflow:hidden;overflow-y:auto;background:transparent;} .hires #servicesprint .col3 .coltxt {width:44%;float:left;color:#2a2928;font-family:arial,sans-serif;font-size:0.9vw;} .hires #servicesprint .col3 .coltxt h1 {position:static;color:#2a2928;padding:0 15px 0 0;font-family:georgia,times new roman,times,serif;font-size:1.50vw;} .hires #servicesprint .col3 .coltxt p {padding:10px 15px 0 0;} .hires #servicesprint .col3 .coltxt ul {padding:0 0 0 10px;} .hires #servicesprint .col3 .coltxt li {padding:3px 15px 0 0;} .hires #servicesprint .col3 .colpics {width:56%;float:right;} .hires #servicesprint .col3 .colpics li {width:95%;padding:0 0 9px 0;} .hires #servicesprint .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} .hires #servicesprint .col2 .colinner2 {position:absolute;width:83.7%;left:6%;top:6.4%;height:85%;overflow:hidden;overflow-y:auto;} #servicesprint .col2 .coltxt {color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} .hires #servicesprint .col2 .coltxt {font-size:0.9vw;width:47%;float:left;} #servicesprint .col2 h1 {padding:0 15px 10px 0;font-family:georgia,times new roman,times,serif;} .hires #servicesprint .col2 h1 {font-size:1.3vw;} #servicesprint .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} .hires #servicesprint .col2 .colthumbs dl {width:93%;margin:0 auto;} #servicesprint .col2 .colthumbs dt {padding:0 0 5px 0;} #servicesprint .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #servicesprint .col2 .colthumbs .dt2 {text-align:right;} #servicesprint .col2 .colthumbs dd {padding:0 0 10px 0;} #servicesprint .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;} #servicesprint .col2 .colthumbs .port {width:93%;margin:0 auto;} #servicesprint .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #servicesprint .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;} /* Services - Digital */ .hires #servicesdigital #srvprint {left:-10%;top:8%;z-index:180;transform: rotate(-10deg);} .hires #servicesdigital #srvdigital {left:9.5%;top:3.2%;z-index:200;} .hires #servicesdigital #srvmarketing {left:-6.5%;top:47.5%;z-index:190;transform: rotate(-11deg);} .hires #servicesdigital #pagecontent {left:34.7%;top:6%;width:54.4%;} .hires #servicesdigital .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} .hires #servicesdigital .titletxt {position:absolute;left:13.8%;top:10%;width:79%;height:4%;overflow:hidden;font-size:1.30vw;font-family:euro technic extended;color:#eee;} .hires #servicesdigital #time {position:absolute;right:12.2%;bottom:6.4%;width:11.5%;text-align:right;font-size:1vw;font-family:euro technic extended;color:#149b04;letter-spacing:1px;opacity:.6;} .hires #servicesdigital #time span.off {opacity:0.4;} .hires #servicesdigital ::-webkit-scrollbar {width:10px;} .hires #servicesdigital ::-webkit-scrollbar-track {background:#000;} .hires #servicesdigital ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} .hires #servicesdigital .col3 .colimg {position:absolute;width:27%;left:5.1%;top:15%;} #servicesdigital .col3 .colimg img {width:100%;height:auto;} .hires #servicesdigital .col3 .colinner2 {position:absolute;width:61.6%;left:32.2%;top:15.2%;height:73.5%;overflow:hidden;overflow-y:auto;background:#dcd4cc;} #servicesdigital .col3 .coltxt {width:40%;float:left;color:#313131;font-family:arial,sans-serif;} .hires #servicesdigital .col3 .coltxt {font-size:0.9vw;} #servicesdigital .col3 .coltxt p {padding:24px 15px 0 15px;} #servicesdigital .col3 .coltxt ul {padding:0 0 0 25px;} #servicesdigital .col3 .coltxt li {padding:3px 15px 0 0;} #servicesdigital .col3 .colpics {width:59%;float:right;} #servicesdigital .col3 .colpics li {width:95%;padding:0 0 9px 0;} #servicesdigital .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} .hires #servicesdigital .col2 .colinner2 {position:absolute;width:86%;left:7.8%;top:15.2%;height:73.5%;overflow:hidden;overflow-y:auto;background:linear-gradient(to right,rgba(250,250,250,0),rgba(250,250,250,0) 51%,rgba(250,250,250,1) 51%,rgba(250,250,250,1) 100%);} #servicesdigital .col2 .coltxt {width:47%;float:left;color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} .hires #servicesdigital .col2 .coltxt {font-size:1vw;} #servicesdigital .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} #servicesdigital .col2 .colthumbs dl {width:93%;margin:0 auto;} #servicesdigital .col2 .colthumbs dt {padding:0 0 5px 0;} #servicesdigital .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #servicesdigital .col2 .colthumbs .dt2 {text-align:right;} #servicesdigital .col2 .colthumbs dd {padding:0 0 10px 0;} #servicesdigital .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;} #servicesdigital .col2 .colthumbs .port {width:93%;margin:0 auto;} #servicesdigital .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #servicesdigital .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;} /* Services - Marketing */ .hires #servicesmarketing #srvprint {left:-10%;top:8%;z-index:180;transform: rotate(-10deg);} .hires #servicesmarketing #srvdigital {left:-8%;top:51%;z-index:190;transform: rotate(-14deg);} .hires #servicesmarketing #srvmarketing {left:8%;top:12.4%;z-index:200;} .hires #servicesmarketing #pagecontent {left:36.4%;top:4.9%;width:54.2%;} .hires #servicesmarketing .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} .hires #servicesmarketing ::-webkit-scrollbar {width:10px;} .hires #servicesmarketing ::-webkit-scrollbar-track {background:#000;} .hires #servicesmarketing ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} .hires #servicesmarketing .col3 .colimg {position:absolute;width:32%;left:1.8%;top:6.7%;} #servicesmarketing .col3 .colimg img {width:100%;height:auto;} .hires #servicesmarketing .col3 .colinner2 {position:absolute;width:57.2%;left:35.5%;top:16%;height:67.5%;overflow:hidden;overflow-y:auto;background:transparent;} #servicesmarketing .col3 .coltxt {width:42%;float:left;color:#2a2928;font-family:arial,sans-serif;} .hires #servicesmarketing .col3 .coltxt {font-size:1vw;} #servicesmarketing .coltxt h1 {padding:0 15px 0 0;font-family:georgia,times new roman,times,serif;position:static;color:#2a2928;} .hires #servicesmarketing .coltxt h1 {font-size:1.5vw;} #servicesmarketing .col3 .coltxt p {padding:10px 15px 0 0;} #servicesmarketing .col3 .coltxt ul {padding:0 0 0 10px;} #servicesmarketing .col3 .coltxt li {padding:3px 15px 0 0;} #servicesmarketing .col3 .colpics {width:58%;float:right;} #servicesmarketing .col3 .colpics li {width:95%;padding:0 0 9px 0;} #servicesmarketing .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} .hires #servicesmarketing .col2 .colinner2 {position:absolute;width:88.8%;left:2.3%;top:3%;height:77%;overflow:hidden;overflow-y:auto;} #servicesmarketing .col2 .coltxt {width:47%;float:left;color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} .hires #servicesmarketing .col2 .coltxt {font-size:1vw;} #servicesmarketing .col2 h1 {padding:0 15px 10px 0;font-family:georgia,times new roman,times,serif;} .hires #servicesmarketing .col2 h1 {font-size:1.5vw;} #servicesmarketing .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} #servicesmarketing .col2 .colthumbs dl {width:93%;margin:0 auto;} #servicesmarketing .col2 .colthumbs dt {padding:0 0 5px 0;} #servicesmarketing .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #servicesmarketing .col2 .colthumbs .dt2 {text-align:right;} #servicesmarketing .col2 .colthumbs dd {padding:0 0 10px 0;} #servicesmarketing .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;box-shadow:-1px 5px 5px 0px rgba(55, 43, 31, 0.5);} #servicesmarketing .col2 .colthumbs .port {width:93%;margin:0 auto;} #servicesmarketing .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #servicesmarketing .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;box-shadow:-1px 5px 5px 0px rgba(55, 43, 31, 0.5);} /* Services Animation */ #uncont .iframeunloaded #pagecontent {left:120%;top:-120%;transition:all 0.5s;transition-timing-function:ease-out;} #uncont.aniprint #srvprint,#uncont.aniprint #srvdigital,#uncont.aniprint #srvmarketing {transition:all 1s;transition-timing-function:ease-in-out;} #uncont.aniprint #srvprint {left:12%;top:16%;z-index:200;transform: rotate(0deg);} #uncont.aniprint #srvdigital {left:-8%;top:51%;z-index:190;transform: rotate(-14deg);} #uncont.aniprint #srvmarketing {left:-7.6%;top:4.2%;z-index:180;transform: rotate(-9deg);} #uncont.aniprint #pagecontent {width:54.1%;} #uncont.aniprint .iframeloaded #pagecontent {left:41%;top:6%;transition:all 0.5s;transition-timing-function:ease-in-out;} #uncont.anidigital #srvprint,#uncont.anidigital #srvdigital,#uncont.anidigital #srvmarketing {transition:all 1s;transition-timing-function:ease-in-out;} #uncont.anidigital #srvprint {left:-10%;top:8%;z-index:180;transform: rotate(-10deg);} #uncont.anidigital #srvdigital {left:9.5%;top:3.2%;z-index:200;transform: rotate(0deg);} #uncont.anidigital #srvmarketing {left:-6.5%;top:47.5%;z-index:190;transform: rotate(-11deg);} #uncont.anidigital #pagecontent {width:54.4%;} #uncont.anidigital .iframeloaded #pagecontent {left:34.7%;top:6%;transition:all 0.5s;transition-timing-function:ease-in-out;} #uncont.animarketing #srvprint,#uncont.animarketing #srvdigital,#uncont.animarketing #srvmarketing {transition:all 1s;transition-timing-function:ease-in-out;} #uncont.animarketing #srvprint {left:-10%;top:8%;z-index:180;transform: rotate(-10deg);} #uncont.animarketing #srvdigital {left:-8%;top:51%;z-index:190;transform: rotate(-14deg);} #uncont.animarketing #srvmarketing {left:8%;top:12.4%;z-index:200;transform: rotate(0deg);} #uncont.animarketing #pagecontent {width:54.2%;} #uncont.animarketing .iframeloaded #pagecontent {left:36.4%;top:4.9%;transition:all 0.5s;transition-timing-function:ease-in-out;} /* Services Overides - basically copies of above, but gives us accurate hierarchy */ #uncont.aniprint .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} #uncont.aniprint .desk-inner ::-webkit-scrollbar {width:10px;} #uncont.aniprint .desk-inner ::-webkit-scrollbar-track {background:#000;} #uncont.aniprint .desk-inner ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} #uncont.aniprint .col3 .colimg {position:absolute;width:29%;left:5%;top:27%;} #uncont.aniprint .col3 .colimg img {width:100%;height:auto;} #uncont.aniprint .col3 .colinner2 {position:absolute;width:58%;left:36%;top:10%;height:80%;overflow:hidden;overflow-y:auto;background:transparent;} #uncont.aniprint .col3 .coltxt {width:44%;float:left;color:#2a2928;font-family:arial,sans-serif;font-size:0.9vw;} #uncont.aniprint .col3 .coltxt h1 {position:static;color:#2a2928;padding:0 15px 0 0;font-family:georgia,times new roman,times,serif;font-size:1.50vw;} #uncont.aniprint .col3 .coltxt p {padding:10px 15px 0 0;} #uncont.aniprint .col3 .coltxt ul {padding:0 0 0 10px;} #uncont.aniprint .col3 .coltxt li {padding:3px 15px 0 0;} #uncont.aniprint .col3 .colpics {width:56%;float:right;} #uncont.aniprint .col3 .colpics li {width:95%;padding:0 0 9px 0;} #uncont.aniprint .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} #uncont.aniprint .col2 .colinner2 {position:absolute;width:83.7%;left:6%;top:6.4%;height:85%;overflow:hidden;overflow-y:auto;} #uncont.aniprint .col2 .coltxt {color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} #uncont.aniprint .col2 .coltxt {font-size:0.9vw;width:47%;float:left;} #uncont.aniprint .col2 h1 {padding:0 15px 10px 0;font-family:georgia,times new roman,times,serif;} #uncont.aniprint .col2 h1 {font-size:1.3vw;} #uncont.aniprint .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} #uncont.aniprint .col2 .colthumbs dl {width:93%;margin:0 auto;} #uncont.aniprint .col2 .colthumbs dt {padding:0 0 5px 0;} #uncont.aniprint .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #uncont.aniprint .col2 .colthumbs .dt2 {text-align:right;} #uncont.aniprint .col2 .colthumbs dd {padding:0 0 10px 0;} #uncont.aniprint .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;} #uncont.aniprint .col2 .colthumbs .port {width:93%;margin:0 auto;} #uncont.aniprint .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #uncont.aniprint .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;} #uncont.anidigital .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} #uncont.anidigital .titletxt {position:absolute;left:13.8%;top:10%;width:79%;height:4%;overflow:hidden;font-size:1.30vw;font-family:euro technic extended;color:#eee;} #uncont.anidigital #time {position:absolute;right:12.2%;bottom:6.4%;width:11.5%;text-align:right;font-size:1vw;font-family:euro technic extended;color:#149b04;letter-spacing:1px;opacity:.6;} #uncont.anidigital #time span.off {opacity:0.4;} #uncont.anidigital .desk-inner ::-webkit-scrollbar {width:10px;} #uncont.anidigital .desk-inner ::-webkit-scrollbar-track {background:#000;} #uncont.anidigital .desk-inner ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} #uncont.anidigital .col3 .colimg {position:absolute;width:27%;left:5.1%;top:15%;} #uncont.anidigital .col3 .colimg img {width:100%;height:auto;} #uncont.anidigital .col3 .colinner2 {position:absolute;width:61.6%;left:32.2%;top:15.2%;height:73.5%;overflow:hidden;overflow-y:auto;background:#dcd4cc;} #uncont.anidigital .col3 .coltxt {width:40%;float:left;color:#313131;font-family:arial,sans-serif;} #uncont.anidigital .col3 .coltxt {font-size:0.9vw;} #uncont.anidigital .col3 .coltxt p {padding:24px 15px 0 15px;} #uncont.anidigital .col3 .coltxt ul {padding:0 0 0 25px;} #uncont.anidigital .col3 .coltxt li {padding:3px 15px 0 0;} #uncont.anidigital .col3 .colpics {width:59%;float:right;} #uncont.anidigital .col3 .colpics li {width:95%;padding:0 0 9px 0;} #uncont.anidigital .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} #uncont.anidigital .col2 .colinner2 {position:absolute;width:86%;left:7.8%;top:15.2%;height:73.5%;overflow:hidden;overflow-y:auto;background:linear-gradient(to right,rgba(250,250,250,0),rgba(250,250,250,0) 51%,rgba(250,250,250,1) 51%,rgba(250,250,250,1) 100%);} #uncont.anidigital .col2 .coltxt {width:47%;float:left;color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} #uncont.anidigital .col2 .coltxt {font-size:1vw;} #uncont.anidigital .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} #uncont.anidigital .col2 .colthumbs dl {width:93%;margin:0 auto;} #uncont.anidigital .col2 .colthumbs dt {padding:0 0 5px 0;} #uncont.anidigital .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #uncont.anidigital .col2 .colthumbs .dt2 {text-align:right;} #uncont.anidigital .col2 .colthumbs dd {padding:0 0 10px 0;} #uncont.anidigital .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;} #uncont.anidigital .col2 .colthumbs .port {width:93%;margin:0 auto;} #uncont.anidigital .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #uncont.anidigital .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;} #uncont.animarketing .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} #uncont.animarketing .desk-inner ::-webkit-scrollbar {width:10px;} #uncont.animarketing .desk-inner ::-webkit-scrollbar-track {background:#000;} #uncont.animarketing .desk-inner ::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} #uncont.animarketing .col3 .colimg {position:absolute;width:32%;left:1.8%;top:6.7%;} #uncont.animarketing .col3 .colimg img {width:100%;height:auto;} #uncont.animarketing .col3 .colinner2 {position:absolute;width:57.2%;left:35.5%;top:16%;height:67.5%;overflow:hidden;overflow-y:auto;background:transparent;} #uncont.animarketing .col3 .coltxt {width:42%;float:left;color:#2a2928;font-family:arial,sans-serif;} #uncont.animarketing .col3 .coltxt {font-size:1vw;} #uncont.animarketing .coltxt h1 {padding:0 15px 0 0;font-family:georgia,times new roman,times,serif;position:static;color:#2a2928;} #uncont.animarketing .coltxt h1 {font-size:1.5vw;} #uncont.animarketing .col3 .coltxt p {padding:10px 15px 0 0;} #uncont.animarketing .col3 .coltxt ul {padding:0 0 0 10px;} #uncont.animarketing .col3 .coltxt li {padding:3px 15px 0 0;} #uncont.animarketing .col3 .colpics {width:58%;float:right;} #uncont.animarketing .col3 .colpics li {width:95%;padding:0 0 9px 0;} #uncont.animarketing .col3 .colpics img {border:solid 1px #191919;width:100%;height:auto;} #uncont.animarketing .col2 .colinner2 {position:absolute;width:88.8%;left:2.3%;top:3%;height:77%;overflow:hidden;overflow-y:auto;} #uncont.animarketing .col2 .coltxt {width:47%;float:left;color:#313131;font-family:arial,sans-serif;padding:22px 0 0 0;} #uncont.animarketing .col2 .coltxt {font-size:1vw;} #uncont.animarketing .col2 h1 {padding:0 15px 10px 0;font-family:georgia,times new roman,times,serif;} #uncont.animarketing .col2 h1 {font-size:1.5vw;} #uncont.animarketing .col2 .colthumbs {width:49%;float:right;padding:22px 0 0 0;} #uncont.animarketing .col2 .colthumbs dl {width:93%;margin:0 auto;} #uncont.animarketing .col2 .colthumbs dt {padding:0 0 5px 0;} #uncont.animarketing .col2 .colthumbs .dt1 a {color:#313131;font-style:normal;} #uncont.animarketing .col2 .colthumbs .dt2 {text-align:right;} #uncont.animarketing .col2 .colthumbs dd {padding:0 0 10px 0;} #uncont.animarketing .col2 .colthumbs dd img {border:solid 1px #191919;width:100%;height:auto;box-shadow:-1px 5px 5px 0px rgba(55, 43, 31, 0.5);} #uncont.animarketing .col2 .colthumbs .port {width:93%;margin:0 auto;} #uncont.animarketing .col2 .colthumbs .port li {width:50%;float:left;padding:5px 0 0 0;} #uncont.animarketing .col2 .colthumbs .port li img {border:solid 1px #191919;width:89%;height:auto;margin:0 auto;box-shadow:-1px 5px 5px 0px rgba(55, 43, 31, 0.5);} /* Portfolio - Homepage */ .hires #portthumbs {left:8.25%;top:0;width:51.3%;} .hires #portthumbs .colinner {position:absolute;left:0;right:0;top:0;bottom:0;z-index:120;} .hires #portthumbs h1 {position:absolute;left:7.1%;top:7.4%;width:21%;} #portthumbs h1 strong {display:none;} #portthumbs h1 img {width:100%;height:auto;} #portthumbs .content {color:#381c04;font-family:quicksand;font-size:0.85vw;} .hires #portthumbs .content {padding:2.9% 7% 0 36.6%;} #portthumbs .content p {padding:0 0 10px 0;} .hires #portthumbs ul {position:absolute;left:0.4%;bottom:0;width:99%;height:82.1%;overflow:hidden;overflow-y:auto;text-align:center;} #portthumbs li {width:258px;height:248px;display:inline-block;text-align:right;} #portthumbs li .inner {display:inline-block;width:221px;height:221px;background:#4e4e4e;position:relative;overflow:hidden;margin:0 0 0 auto;text-align:center;} #portthumbs li .pic {width:219px;height:219px;margin:1px;overflow:hidden;} #portthumbs li .pic img {width:219px;height:219px;transform:scale(1,1);transition-duration:0.3s;transition-property:transform;} #portthumbs li a {color:#fdfdda;text-decoration:none;} #portthumbs li a:hover {text-decoration:none;} #portthumbs li .txt {display:block;opacity:0;width:219px;height:219px;padding:31px 0 0 0;overflow:hidden;position:absolute;top:1px;left:1px;background:url(images/portitem-hover.png) no-repeat;font-family:georgia,times,'times new roman',serif;color:#fdfdda;transition-duration:0.5s;transition-property:opacity;} #portthumbs li .txt .title {display:block;padding:0 16px 0 16px;height:55px;overflow:hidden;font-size:18px;line-height:22px;} #portthumbs li .txt .cats {display:block;width:176px;margin:0 auto;padding:30px 0 0 0;font-size:14px;line-height:18px;font-family:quicksand,arial,sans-serif;text-transform:uppercase;} #portthumbs li .txt .cats span:last-child {display:none;} #portthumbs li .txt .view {display:block;padding:10px 20px;font-size:16px;font-weight:normal;font-style:italic;text-decoration:underline;} #portthumbs li .txt .view:hover {text-decoration:underline;} #portthumbs li a:hover .txt {opacity:1;} #portthumbs li a:hover img {transform:scale(2,2);transition-duration:3s;} .hires #portthumbs ::-webkit-scrollbar {width:10px;} .hires #portthumbs ::-webkit-scrollbar-track {background:#181819;} .hires #portthumbs ::-webkit-scrollbar-thumb {background:#f5f5f5;border:solid 1px #181819;} .hires #portlist {left:62.75%;top:0;width:27.4%;} .hires #portlist .colinner {position:absolute;left:12.7%;top:17.5%;width:77.3%;height:78.4%;z-index:120;overflow:hidden;overflow-y:auto;font-size:1.1vw;} #portlist dl {color:#381c04;padding:0 0 11px 0;} #portlist dt {padding:0 0 5px 0;} #portlist dt strong {font-family:quicksandbold,arial,sans-serif;display:inline-block;font-size:17px;padding:0 4px 0 0;} #portlist dd {padding:0 0 1px 0;} #portlist dd a,#portlist dt a {font-family:quicksand,arial,sans-serif;font-style:italic;color:#000;text-decoration:none;display:inline-block;padding:5px 0 0 41px;background:url(images/sprite8bit_1_1.png) no-repeat 11px -35px;} #portlist dl.title dt {display:none;} #portlist dl.title dd {text-align:center;padding:3px 15px 0 0;} #portlist ::-webkit-scrollbar {width:10px;} #portlist ::-webkit-scrollbar-track {background:#c7af7e;} #portlist ::-webkit-scrollbar-thumb {background:#fcfbf9;border:solid 1px #c7af7e;} #ruler {left:92%;bottom:-2%;width:6.3%;} /* thumb controller */ #pthumblist li {display:none;} #pthumblist.port-print li.port-print, #pthumblist.port-logos-business-branding li.port-logos-business-branding, #pthumblist.port-reports li.port-reports, #pthumblist.port-promotions-signage li.port-promotions-signage, #pthumblist.port-product-packaging li.port-product-packaging, #pthumblist.port-illustration li.port-illustration, #pthumblist.port-photography li.port-photography {display:inline-block;} #pthumblist.port-digital li.port-digital, #pthumblist.port-bespoke-web-design li.port-bespoke-web-design, #pthumblist.port-e-commerce li.port-e-commerce, #pthumblist.port-self-managed-website li.port-self-managed-website, #pthumblist.port-responsive-design li.port-responsive-design, #pthumblist.port-bespoke-html-emails li.port-bespoke-html-emails, #pthumblist.port-bespoke-seo-reporting li.port-bespoke-seo-reporting, #pthumblist.port-bespoke-hosting-management li.port-bespoke-hosting-management {display:inline-block;} #pthumblist.port-marketing li.port-marketing, #pthumblist.port-advertising li.port-advertising, #pthumblist.port-email-marketing li.port-email-marketing, #pthumblist.port-social-media li.port-social-media, #pthumblist.port-search-engine-optimisation li.port-search-engine-optimisation, #pthumblist.port-surveys-polls li.port-surveys-polls, #pthumblist.port-press-releases li.port-press-releases {display:inline-block;} /* tick controller */ /* Show All - everything (tick main headings only) */ #portlist #listall.liston a {background-position:11px -35px!important;} #portlist #listall.liston dt a,#portlist #listall.liston .title dd a {background-position:11px -278px!important;} /* Show All - section (tick relevant main heading only, other sections do not change) */ #portlist #listall dl.liston a {background-position:11px -35px!important;} #portlist #listall dl.liston dt a {background-position:11px -278px!important;} /* Show One (tick an item, or multiple items) */ #portlist dd a.on,#portlist dt a.on {background-position:11px -278px;} /* Portfolio - Item */ .hires #portopen {left:2.7%;top:0;width:94.5%;} .hires #portopen .colinner {position:absolute;left:3.4%;top:0;width:94.1%;height:100%;overflow:hidden;z-index:120;} .hires #portopen .shut {position:absolute;right:0;top:18.6%;width:2.1%;display:block;} .hires #portopen .services {position:absolute;width:95%;left:2.7%;top:0.8%;color:#333;font-family:quicksand,arial,sans-serif;font-style:italic;font-size:1vw;overflow:hidden;} .hires #portopen .services a {color:#333;text-decoration:none;} .hires #portopen .services span:after {content:"\00a0\2022\00a0";} .hires #portopen .services a:hover {text-decoration:underline;} .hires #portopen .services dt {display:block;font-family:georgia,times new roman,times,serif;font-size:1.2vw;letter-spacing:2px;} .hires #portopen .services dd {display:inline-block;white-space:nowrap;} .hires #portopen .services dd:last-child span:after {content:"";} .hires #portopen .title {position:absolute;width:26%;left:0;top:9.2%;height:85.5%;background:#fff;color:#333;font-family:georgia,times new roman,times,serif;font-size:1.7vw;letter-spacing:2px;} .hires #portopen .title .inner {position:absolute;left:9.5%;width:83%;top:2%;background:#fff;z-index:10;} .hires #portopen .title h1 {font-style:italic;letter-spacing:1px;} .hires #portopen .twocol {position:absolute;left:2.5%;top:18.6%;width:94.5%;height:76.1%;overflow:hidden;overflow-y:auto;} #portopen .twocol .content {width:22.9%;float:left;padding:3% 0 0 0;font-family:quicksand,arial,sans-serif;font-size:1.1vw;} #portopen .twocol .content strong,#portopen .twocol .content b {font-family:quicksandbold,arial,sans-serif;} #portopen .twocol .content a {font-style:normal;} #portopen .twocol .assets {width:71.3%;float:right;color:#000;} #portopen .twocol .assets #standard {position:relative;z-index:500;} #portopen .twocol .assets #standard img {width:500px;height:auto;} #portopen .twocol .assets #sphone {position:absolute;z-index:501;top:140px;right:30px;padding:53px 14px 54px 15px;background:url(images/sphone.png) no-repeat;} #portopen .twocol .assets .sphoneinner {width:400px;height:714px;overflow:hidden;} #portopen .twocol .assets .sphoneinner img {width:400px;height:auto;} .hires #portopen .twocol .assets #portpolaroid {padding:20px 30px 0 0;} .hires #portopen .twocol .assets #portpolaroid img {transform: rotate(3deg);max-width:80%;height:auto;margin:0 auto;} .hires #portopen .porttitle {position:absolute;left:8.7%;top:7.9%;width:11.5%;} .hires #portopen ::-webkit-scrollbar {width:10px;} .hires #portopen ::-webkit-scrollbar-track {background:#000;} .hires #portopen ::-webkit-scrollbar-thumb {background:#f5f5f5;border:solid 1px #000;} .hires #portseal {left:35.3%;bottom:0;width:29.4%;z-index:200;} .porthomejs #portopen .twocol .content {width:51.3%;float:left;} .porthomejs #portopen .twocol .assets {width:42.9%;float:right;} .hires .porthomejs #portopen .title {width:53%;} /* General Article styles (based on unmail) */ .unarticle {color:#282828;font-family:quicksand;font-size:16px;} .unarticle h1 span,.unarticle h2 span,.unarticle h3 span,.unarticle h4 span {display:none;} .unarticle h1 {} .unarticle h2 {margin:25px 0;text-transform:uppercase;font-family:quicksandbold;color:#cc3300;text-align:center;font-size:24px;} .unarticle h3 {font-family:quicksandbold;font-size:21px;} .unarticle h4 {font-family:quicksandbold;} .unarticle img {display:block;max-width:100%;height:auto;margin:0 auto 20px auto;} .unarticle p {margin:0 0 20px 0;} .unarticle p.intro {font-family:quicksandbold;font-size:18px;padding-top:20px;} .unarticle blockquote {font-family:georgia,times new roman,times,serif;font-style:italic;padding:0 10% 18px 10%;text-align:center;} .unarticle cite {} .unarticle a {color:#cc3300;text-decoration:none;} .unarticle a:hover {text-decoration:underline;} .unarticle strong,.unarticle b {font-weight:bold;} .unarticle em,.unarticle i {font-style:italic;} .hires #desk .unarticle ul,.hires #desk .unarticle ol {padding:0 0 0 20px;margin:0 0 10px 0;} .hires #desk .unarticle ul,.hires #desk .unarticle ul li {list-style:disc;} .hires #desk .unarticle ol,.hires #desk .unarticle ol li {list-style:decimal;} .hires #desk .unarticle ul li,.hires #desk .unarticle ol li {padding:3px 0 8px 0;} /* Unmail */ .hires #unmailhp .unmail-bck {position:absolute;left:9.5%;top:0;bottom:0;padding-top:1px;width:85%;background:#fff;} .hires #unmailhp .unmail-content {position:absolute;left:5%;top:0;bottom:0;width:87%;color:#000;overflow:hidden;overflow-y:scroll;} .hires #unmailhp .unmail-content::-webkit-scrollbar {width:10px;} .hires #unmailhp .unmail-content::-webkit-scrollbar-track {background:#fff;margin-top:100px;} .hires #unmailhp .unmail-content::-webkit-scrollbar-thumb {background:#c6bab2;border:solid 1px #000;} .hires #unmailhp .unmail-hd {position:relative;left:7%;z-index:50;padding:1% 0 0 0;} .hires #unmailhp .unmail-hd img {width:58%;height:auto;} .hires #unmailhp .unmail-bub {float:left;width:18%;} .hires #unmailhp .unmail-bub .bub {position:relative;} .hires #unmailhp .unmail-bub .bub img {width:88%;height:auto;} .hires #unmailhp .unmail-bub .bub .txt {color:#282828;position:absolute;left:7%;top:10%;width:70%;font-size:1.2vw;font-family:quicksandbold;text-align:center;} .hires #unmailhp .unmail-bub .bub .txt cite,.hires #unmailhp .unmail-bub .bub .txt span {display:block;margin:10px 0 0 0;font-family:georgia,times new roman,times,serif;font-size:1.1vw;} .hires #unmailhp .unmail-bub .bub .txt cite a:hover,.hires #unmailhp .unmail-bub .bub .txt span a:hover {text-decoration:underline;} .hires #unmailhp .unmail-bub .bub .txt a {color:#282828;text-decoration:none;} .hires #unmailhp .unmail-bub #bub1 {top:50px;} .hires #unmailhp .unmail-bub #bub2 {top:230px;} .hires #unmailhp .unmail-bub #bub3 {top:600px;} .hires #unmailhp .unmail-bub #bub4 {top:1000px;} .hires #unmailhp .unmail-bub #bub2 .txt {top:17%;} .hires #unmailhp .unmail-bub #bub3 .txt cite {margin-top:20px;} .hires #unmailhp .unmail-bub #bub4 .txt blockquote {font-size:1.3vw;} .hires #unmailhp .unmail-lft {float:left;width:46%;padding-bottom:30px;} .hires #unmailhp .unmail-lft .inner {width:92%;} .hires #unmailhp .unmail-lft img {max-width:100%;height:auto;} .hires #unmailhp .unmail-lft .unmail-nav,.hires #unmailhp .unmail-lft .unmail-nav li {list-style:none;padding:0;margin:0;} .hires #unmailhp .unmail-lft .unmail-nav {padding:9px 0 0 0;text-align:center;} .hires #unmailhp .unmail-lft .unmail-nav li {width:25%;display:inline-block;} .hires #unmailhp .unmail-lft .unmail-nav li a {display:block;text-transform:uppercase;font-family:quicksandbold;font-size:18px;padding:0 0 90px 0;background:url(images/unmail-icons2.png) no-repeat center 1000px;text-align:center;} .hires #unmailhp .unmail-lft .unmail-nav .nav1 a {background-position:center 30px;} .hires #unmailhp .unmail-lft .unmail-nav .nav2 a {background-position:center -92px;} .hires #unmailhp .unmail-lft .unmail-nav .nav3 a {background-position:center -222px;} .hires #unmailhp .unmail-lft .unmail-nav .nav4 a {background-position:center -374px;} .hires #unmailhp .unmail-rgt {float:left;width:35%;background:url(images/unmail-bck-mid.gif) 0 0 repeat-y;background-size:contain;font-family:georgia,times new roman,times,serif;font-size:16px;position:relative;top:-40px;z-index:40;} .hires #unmailhp .unmail-rgt img {max-width:100%;height:auto;} .hires #unmailhp .unmail-rgt img.hd-hd,.hires #unmailhp .unmail-rgt img.hd-ft {margin:0 auto;} .hires #unmailhp .unmail-rgt .inner {padding:30px 6.5% 0 6.5%;text-align:center;} .hires #unmailhp .unmail-rgt p {padding:0;} .hires #unmailhp .unmail-rgt h3 {padding:43px 0 10px 0;text-align:center;background:url(images/unmail-icons.png) no-repeat center 1000px;} .hires #unmailhp .unmail-rgt .ico1 {background-position:center 5px;} .hires #unmailhp .unmail-rgt .ico2 {background-position:center -123px;} .hires #unmailhp .unmail-rgt .ico3 {background-position:center -247px;} .hires #unmailhp .unmail-rgt .ico4 {background-position:center -387px;} .hires #unmailhp .unmail-rgt .ico5 {background-position:center -516px;} .hires #unmailhp .unmail-rgt .ico6 {background-position:center -648px;} .hires #unmailhp .unmail-rgt .ico7 {background-position:center -779px;} .hires #unmailhp .unmail-rgt .ico8 {background-position:center -913px;} .hires #unmailhp .unmail-rgt .ico9 {background-position:center -1049px;} .hires #unmailhp .unmail-rgt .ico10 {background:none;} /* Who are Unconundrum */ .entry-content .commbox {display:none;padding:0 0 10px 0;} .entry-content .open {display:block;} .entry-content .commbox .more {text-align:right;} .entry-content .commbox .more a {color:#fff;} @media screen and (max-width: 1100px) { .hires #unmailhp .unmail-bub .bub .txt cite,.hires #unmailhp .unmail-bub .bub .txt span {margin:5px 0 0 0;} .hires #unmailhp .unarticle {font-size:14px;} .hires #unmailhp .unarticle p.intro {font-size:16px;} .hires #unmailhp .unarticle h2 {font-size:22px;} .hires #unmailhp .unarticle h3 {font-size:19px;} .hires #unmailhp .unmail-lft .unmail-nav li {width:40%;} .hires #unmailhp .unmail-rgt {font-size:14px;} } @media screen and (max-width: 900px) { .hires #unmailhp .unmail-lft .unmail-nav li {width:50%;} } @media screen and (min-aspect-ratio: 17/8) { .hires #desk #monitor .txt {font-size:1.4vw;} .hires #desk #monitor .txt h1 {font-size:2.1vw;} .hires #desk #monitor .txt h1 strong {font-size:2.3vw;} .hires #desk #monitor .txt .more {font-size:1.3vw;} .hires .srvmenu .txt ul {font-size:1.1vw;} .hires #srvdigital .txt ul {font-size:1.1vw;} .hires #srvmarketing .txt ul {font-size:1.1vw;} .hires #servicesdigital .titletxt {font-size: 1.2vw;} #portthumbs .content {font-size:0.8vw;} .hires #portopen .services {font-size:0.9vw;} .hires #portopen .services dt {font-size:1.2vw;} .hires #portopen .title {font-size:1.6vw;letter-spacing:2px;} #portopen .twocol .content {font-size:1vw;} } @media screen and (min-aspect-ratio: 18/8) { .hires #desk #monitor .txt {font-size:1.3vw;} .hires #desk #monitor .txt h1 {font-size:2.0vw;} .hires #desk #monitor .txt h1 strong {font-size:2.2vw;} .hires #desk #monitor .txt .more {font-size:1.2vw;} .hires .srvmenu .txt ul {font-size:1.1vw;} .hires #srvdigital .txt ul {font-size:1.0vw;} .hires #srvmarketing .txt ul {font-size:1.0vw;} .hires #servicesdigital .titletxt {font-size: 1.1vw;} .hires #portopen .services dt {font-size:1.1vw;} .hires #portlist .colinner {font-size:1vw;} } @media screen and (min-aspect-ratio: 19/8) { .hires #sidenav {font-size:1.0vw;} .hires #desk #monitor .txt {font-size:1.2vw;} .hires #desk #monitor .txt h1 {font-size:1.8vw;} .hires #desk #monitor .txt h1 strong {font-size:2.0vw;} .hires #desk #monitor .txt .more {font-size:1.1vw;} .hires .srvmenu .txt ul {font-size:1.0vw;} .hires #srvdigital .txt ul {font-size:1.0vw;} .hires #srvmarketing .txt ul {font-size:0.9vw;} .hires #servicesmarketing .col2 h1 {font-size:1.4vw;} .hires #servicesmarketing .col2 .coltxt {font-size:0.9vw;} .hires #servicesdigital .titletxt {font-size: 1.0vw;} .hires #servicesdigital .col2 .coltxt {font-size:0.9vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 1.3vw;} .hires #servicesprint .col2 .coltxt,.hires #servicesprint .col3 .coltxt {font-size:0.8vw;} #portthumbs .content {font-size:0.75vw;} .hires #portopen .services {font-size:0.8vw;} .hires #portopen .services dt {font-size:1.1vw;} .hires #portlist .colinner {font-size:0.9vw;} .hires #portopen .title {font-size:1.5vw;letter-spacing:2px;} #portopen .twocol .content {font-size:1vw;} } @media screen and (min-aspect-ratio: 20/8) { .hires #desk #monitor .txt {font-size:1.1vw;} .hires #desk #monitor .txt h1 {font-size:1.7vw;} .hires #desk #monitor .txt h1 strong {font-size:1.9vw;} .hires #desk #monitor .txt .more {font-size:1.0vw;} .hires .srvmenu .txt ul {font-size:1.0vw;} .hires #srvdigital .txt ul {font-size:0.9vw;} .hires #srvmarketing .txt ul {font-size:0.9vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 1.2vw;} #portthumbs .content {font-size:0.7vw;} } @media screen and (min-aspect-ratio: 21/8) { .hires #sidenav {font-size:0.9vw;} .hires .srvmenu .txt ul {font-size:0.9vw;} .hires #srvdigital .txt ul {font-size:0.9vw;} .hires #srvmarketing .txt ul {font-size:0.9vw;} .hires #servicesmarketing .col2 h1 {font-size:1.3vw;} .hires #servicesmarketing .col2 .coltxt {font-size:0.8vw;} .hires #servicesdigital .titletxt {font-size: 0.9vw;} .hires #servicesdigital .col2 .coltxt {font-size:0.8vw;} .hires #servicesprint .col2 .coltxt,.hires #servicesprint .col3 .coltxt {font-size:0.7vw;} .hires #portlist .colinner {font-size:0.8vw;} .hires #portopen .title {font-size:1.4vw;letter-spacing:2px;} #portopen .twocol .content {font-size:0.9vw;} } @media screen and (min-aspect-ratio: 22/8) { .hires #desk #monitor .txt {font-size:1.0vw;} .hires #desk #monitor .txt h1 {font-size:1.5vw;} .hires #desk #monitor .txt h1 strong {font-size:1.7vw;} .hires #desk #monitor .txt .more {font-size:0.9vw;} .hires .srvmenu .txt ul {font-size:0.8vw;} .hires #srvdigital .txt ul {font-size:0.8vw;} .hires #srvmarketing .txt ul {font-size:0.8vw;} .hires #servicesmarketing .col2 h1 {font-size:1.2vw;} .hires #servicesmarketing .col2 .coltxt {font-size:0.7vw;} .hires #servicesdigital .titletxt {font-size: 0.8vw;} .hires #servicesdigital .col2 .coltxt {font-size:0.7vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 1.1vw;} #portthumbs .content {font-size:0.65vw;} .hires #portopen .services {font-size:0.7vw;} .hires #portopen .services dt {font-size:1vw;} } @media screen and (min-aspect-ratio: 24/8) { .hires #sidenav {font-size:0.8vw;} .hires #desk #monitor .txt {font-size:0.9vw;} .hires #desk #monitor .txt h1 {font-size:1.4vw;} .hires #desk #monitor .txt h1 strong {font-size:1.6vw;} .hires #desk #monitor .txt .more {font-size:0.8vw;} .hires .srvmenu .txt ul {font-size:0.8vw;} .hires #srvdigital .txt ul {font-size:0.7vw;} .hires #srvmarketing .txt ul {font-size:0.7vw;} .hires #servicesmarketing .col2 h1 {font-size:1.1vw;} .hires #servicesmarketing .col2 .coltxt {font-size:0.6vw;} .hires #servicesdigital .col2 .coltxt {font-size:0.6vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 1.0vw;} .hires #servicesprint .col2 .coltxt,.hires #servicesprint .col3 .coltxt {font-size:0.6vw;} #portthumbs .content {font-size:0.6vw;} .hires #portopen .services {font-size:0.6vw;} .hires #portopen .services dt {font-size:0.9vw;} .hires #portopen .title {font-size:1.3vw;letter-spacing:2px;} #portopen .twocol .content {font-size:0.8vw;} } @media screen and (min-aspect-ratio: 26/8) { .hires #desk #monitor .txt {font-size:0.8vw;} .hires #desk #monitor .txt h1 {font-size:1.3vw;} .hires #desk #monitor .txt h1 strong {font-size:1.5vw;} .hires #desk #monitor .txt .more {font-size:0.7vw;} .hires .srvmenu .txt ul {font-size:0.7vw;} .hires #srvdigital .txt ul {font-size:0.7vw;} .hires #srvmarketing .txt ul {font-size:0.7vw;} .hires #servicesdigital .titletxt {font-size: 0.7vw;} .hires #servicesprint .col2 .coltxt,.hires #servicesprint .col3 .coltxt {font-size:0.5vw;} #portthumbs .content {font-size:0.55vw;} .hires #portopen .services {font-size:0.5vw;} .hires #portopen .services dt {font-size:0.8vw;} .hires #portlist .colinner {font-size:0.7vw;} .hires #portopen .title {font-size:1.1vw;letter-spacing:2px;} #portopen .twocol .content {font-size:0.8vw;} } @media screen and (min-aspect-ratio: 27/8) { .hires #sidenav {font-size:0.7vw;} .hires #desk #monitor .txt {font-size:0.8vw;} .hires #desk #monitor .txt h1 {font-size:1.1vw;} .hires #desk #monitor .txt h1 strong {font-size:1.3vw;} .hires #desk #monitor .txt .more {font-size:0.7vw;} .hires #servicesmarketing .col2 h1 {font-size:1.0vw;} .hires #servicesmarketing .col2 .coltxt {font-size:0.5vw;} .hires #servicesdigital .col2 .coltxt {font-size:0.5vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 0.9vw;} .hires .srvmenu .txt ul {font-size:0.6vw;} .hires #srvdigital .txt ul {font-size:0.6vw;} .hires #srvmarketing .txt ul {font-size:0.6vw;} .hires #portopen .title {font-size:1vw;letter-spacing:2px;} #portopen .twocol .content {font-size:0.7vw;} } @media screen and (max-aspect-ratio: 17/12) { /* enough vertical space to show extra content in hires */ .hires #desk #monitor .txt {font-size:1.4vw;} .hires #srvmarketing .txt ul {font-size:1.1vw;} .hires #servicesmarketing .col2 h1 {font-size:1.6vw;} .hires #servicesmarketing .col2 .coltxt {font-size:1.1vw;} .hires #servicesdigital .titletxt {font-size: 1.2vw;} .hires #servicesdigital .col2 .coltxt {font-size:1.1vw;} .hires #servicesprint .col2 .coltxt h1,.hires #servicesprint .col3 .coltxt h1 {font-size: 1.5vw;} .hires #servicesprint .col2 .coltxt,.hires #servicesprint .col3 .coltxt {font-size:1vw;} }