/* DESKTOP WIDE */ @media only screen and (min-width: 1350px) /* and above */ { footer form input[type=text]{width: 85%;} } /* DESKTOP NARROW */ @media only screen and (max-width: 1200px) /* and below */ { .container { max-width: 1024px; padding: 0px 20px;} .slide .slide-info {width: 80%;} footer form input[type=text]{width: 84%;} nav.stuck ul li{padding: 10px 0px 18px 18px;} .stuck .sticky-content a.phone{font-size: 140%; margin-top: 8px;} header .tagline{font-size: 110%; width: 270px; padding: 15px 0px 5px 20px;} } /* TABLET */ @media only screen and (max-width: 1025px) /* and below */ { .container{padding: 0px 40px;} header .logo{ max-width: 40%;} header .tagline{font-size:110%;} header span.divider{ height: 60px;} header a.phone{margin-top: 10px;} header .tagline{width: 200px;} nav ul li.current{ background-position: 40% 20px;} nav ul li div a{font-size: 120%;} .slide{ height: 410px;} .slide .slide-info{ padding-top: 8%;} .slide .slide-info a.btn{bottom: -35px;} .slide .slide-info p{font-size: 230%; padding-bottom: 40px;} .btn.transparent{padding: 5px 20px;} .paginate .prev, .paginate .next{font-size: 200px;} .updates{padding: 10px 0px;} .experience, .expertise{padding: 25px 0px;} .experience h2, .expertise h2{font-size: 320%;} .experience p.icon, .expertise p.intro{font-size: 140%;} .experience p.icon{padding-top: 25px; padding-bottom: 20px;} .experience p.target{ background-position: left 17px;} .experience p.lightbulb{ background-position: right -460px;} .experience a.btn{margin-bottom: 30px;} .expertise .one-third p{ font-size: 160%;} .expertise .one-third img{padding-top: 0px;} .industries p{ max-width: 11%; padding: 23px;} footer h2{ margin-top: 10px;} footer form input[type=text]{width: 80%;} footer form input[type=submit]{width: 15%;} .interior.header h1{left: -5px;} .interior.container{padding: 0px 30px;} .interior.container section > *{padding: 0px;} .interior.container section p, .interior.container section ul {padding: 0px 20px 15px 0px;} .interior.container section blockquote{margin: 0px 30px 30px 0px;} .interior.container section blockquote p {padding: 0px 20px 15px 30px;} .interior.container section h3{ padding: 15px 0px 0px;} .interior aside{ width: 32%;} .desktop{ display: none;} .tablet{ display: block;} .mobile{ display: none;} nav.stuck ul li{padding: 10px 0px 18px 18px;} nav.stuck ul li div a{ font-size: 90%;} .stuck .sticky-content a.phone{font-size: 120%; margin: 12px 0px 0px 12px;} header .tagline{font-size: 110%; width: 275px; padding: 0px 0px 5px 18px;} .interior.container section > h5, .team-formatting ul{margin-left: 0px !important; margin-right: 0px !important;} } @media only screen and (max-width: 985px) /* and below */ { .industries{padding-top: 40px;} .industries p{ max-width: 13%; padding: 10px 46px; } footer form input[type=text]{width: 79%;} .stuck .container{padding: 0 12px;} .stuck .sticky-content{width: 32%;} nav.stuck ul{width: 67%;} nav.stuck a.logo img{max-width: 75%;} nav.stuck ul li{padding: 4px 0px 16px 0px;} .stuck .sticky-content a.phone{font-size: 95%; margin: 8px 0px 0px 0px;} nav.stuck ul ul li{padding: 5px 12px 0px 20px;} nav.stuck ul li.current{background-position: 30% 45px;} nav.stuck ul ul.nudge-left{left: -85px; text-align: right;} nav.stuck ul ul.nudge-left li{padding: 5px 0px 0px 20px;} nav.stuck ul li form{left: -295px; top: 55px;} .interior.container section .client-list table {margin: 40px 0px; padding: 0px 0px; width: 100%;} .interior.container section blockquote {margin: 0px 30px 30px 0px; padding: 20px;} .interior.container section blockquote p {padding: 0px 0px 15px 10px;} } @media only screen and (max-width: 930px) /* and below */ { .industries{padding-top: 45px;} .industries p{ max-width: 15%; padding: 10px 34px; } header .tagline{font-size: 100%; width: 250px; padding: 0px 0px 5px 20px;} header a.phone{font-size: 130%;} } @media only screen and (max-width: 850px) /* and below */ { header{ padding: 15px 0px 10px;} header .logo{ padding-right: 20px;} header .tagline{ padding: 3px 20px 0px; font-size: 100%; line-height: 100%;} header a.phone{ font-size: 110%;} header a.phone b {font-size: 100%;} header .tagline{width: 175px; padding-top: 10px;} nav ul{ position: relative; left: -20px;} nav ul li{ padding: 10px 0px 10px 20px; left: 20px;} nav ul li.current{ background-position: -20px 10px;} nav ul li div a{font-size: 100%;} nav ul li img{top: 4px; position: relative;} nav ul ul{ padding: 0px 10px 10px 0px; left: -20px; width: 150px;} nav li li{ padding: 0px 0px 0px 0px;} nav ul li div li a{ font-size: 100%;} nav ul li form{top: 45px; left: -271px;} .slide{ height: 345px;} .slide .slide-info {width: 100%;} .slide .slide-info a.btn{ bottom: -35px; right: 20px;} .paginate{ display: none;} .updates p, .updates p a, .updates a:not(.btn), .updates a.btn{ font-size: 90%;} .updates a.btn{margin-top: 5px;} .experience h2, .expertise h2{font-size: 250%;} .experience p.target{ background-position: left 33px;} .experience p.lightbulb{ background-position: right -447px;} .expertise .one-third p{ font-size: 120%;} .expertise .one-third img{ max-width: 55%;} .industries{padding-top: 45px;} .industries p{ max-width: 15%; padding: 10px 30px; } footer{ padding: 40px 20px;} footer h2{ max-width: 90%;} footer h2 img{ max-width: 100%;} footer form input[type=text]{width: 73%; font-size: 130%;line-height: 30px;} footer form input[type=submit]{width: 20%; font-size: 130%;line-height: 30px;} footer h4, footer p{ font-size: 100%;} .interior section, .interior aside{ width: 100%;} .interior aside{ background: #f9f9f9; /* Old browsers */ /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #f9f9f9 0%, #ffffff 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f9f9f9), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #f9f9f9 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #f9f9f9 0%,#ffffff 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #f9f9f9 0%,#ffffff 100%); /* IE10+ */ background: linear-gradient(to bottom, #f9f9f9 0%,#ffffff 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */ border-left: 0px;border: 1px solid #d7d7d7; padding: 20px 0px; } aside hr{width: 90%;} .stuck .sticky-content{width: 30%;} nav.stuck ul{width: 69%;} .stuck .sticky-content a.phone{margin: 8px 0px 0px -17px;} nav.stuck ul li.current{background-position: 40% 45px;} nav.stuck ul ul li {padding: 5px 20px 0px 0px;} nav.stuck ul ul.nudge-left{left: -70px;} nav.stuck ul ul.nudge-left li{padding: 5px 30px 0px 0px;} header .tagline{font-size: 95%; width: 230px; padding: 12px 0px 5px 10px;} .interior.container section blockquote {margin: 0px 0px 30px 0px; padding: 20px;} } @media only screen and (max-device-width: 1025px) /* and below */ { .paginate{ display: none;} } /* MOBILE WIDE */ @media only screen and (max-width: 767px) /* and below */ { .container{padding: 0 20px;} span.divider{display: none;} header .logo{ max-width: 100%; padding: 0px; float: none;} header .two-thirds{ width: 100%; text-align: center;} header .tagline{width: 100%; text-align: center; padding: 0px; font-size: 120%;} .hidden-desktop nav{margin-bottom: 0px;} footer{padding: 0px 0px 40px; position: relative;} footer .two-thirds, footer .one-third{ width: 100%;} footer h2{ max-width: 100%; margin: 20px 0px;} footer form{ width: 96%;} footer h4{margin: 15px 0px 5px; font-size: 120%;} footer p{font-size: 110%;} footer .one-third{ text-align: center;} footer form input[type=text]{width: 74%; font-size: 100%; line-height: 22px;} footer form input[type=submit]{ font-size: 100%;line-height: 22px;} .interior aside{ display: none;} .interior.header, .interior.header .gradient{ height: 100px;} .interior.header h1{ font-size: 130%; line-height: 25px;left: -20px; padding-right: 20px;} .interior.container{ padding: 0px 20px;} .interior.container section{padding-bottom: 60px;} .desktop, .hidden-mobile, .sticky-wrapper{ display: none;} .tablet{ display: none;} .mobile, .hidden-desktop, .interior.container section .mobile-subnav{ display: block;} .interior.container .mobile-subnav{margin-top: 20px;} .interior.container section h2, .interior.container section h3{font-size: 160%; line-height: 120%;} .interior section div.case{margin: 0px 0px 15px 0px;} .interior.container section p{font-size: 100%;} .interior.container section > blockquote {padding: 20px !important; margin: 0px 10px 30px 0px;} .interior.container section a.btn.print.hidden-mobile{display: none;} } /* MOBILE NARROW */ @media only screen and (max-width: 321px) /* and below */ { .mobile a.btn.orange{ width: 80%;} header .tagline{ font-size: 83%;} footer form{ width: 90%;} footer form input[type=text]{width: 71%;font-size: 90%;} footer form input[type=submit]{ font-size: 90%;} .interior.container section p{font-size: 80%;} } /* ----------- Updated 8.7.13 ----------- */ /* ----------- Phones / Small mobile screens 240 x 300, HTC Wildfire 320 x 480, iPhone, Xperia Tipo 480 x 800, Galaxy S, SII, LG Optimus 3D 480 x 854, Xperia X10 540 x 960, Razr, Droid Razr, Droid 4, Photon 4G, HTC EVO 3D 640 x 960, iPhone4 640 x 1136, iPhone5 ----------- Large Mobile Screens 720 x 1280, Galaxy Nexus, Galaxy S III, M. Atrix HD, Razr Maxx, HTC One X 768 x 1280, Nexus 4 800 x 1280, Galaxy Note ----------- Tablets 600 x 1024, Kindle Fire 2 768 x 1024, iPad 800 x 1280, Galaxy Note 1200 x 1920, Kindle Fire HD 1280 x 800, Nexus 7 ----------------------------------------------- */