/* KJM 7/22/16 - clean-room re-implementation of site, v8.html (vps)
   KJM 8/7/16 - now lives on branch "overhaul" visible on stage1
   KJM 8/19/16 - now known as pair.css
   TBD - implement Sass
*/

/* Our CSS is liberally commented, and contains classes specific to each
   usage, in order to avoid side effects across pages.  Minification will
   be used to remove the comments.

   Roboto is used for text body, in weights 400 and 700 (300 removed).
   Asap is used for major headlines, in weight 700 (bold).

   Our color palette:
     logo blue - #226C98 (replaces #236A96)
     logo yellow - #FFC81D (replaces #FDD74F)
     logo blue, darker - #194D6D
     logo yellow, lighter - #FFF0C2
     gray - #2F363A
     gray, lighter - #3F464A
     very light blue - #61B9CF
     green - #56A168
*/

/* Universal basics */

html {
  height: 100%;
}
body {
  background: white;
  color: black;
  height: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
}
ul {
  list-style-type: none;
}
h1, h2, h3 {
  color: #226C98;
  font-family: 'Asap', sans-serif;
  font-weight: bold;
}
h4, h5, h6 {
  color: #226C98;
  font-family: 'Roboto', sans-serif;
}
/* note that h5 is not centered by default - used on company/careers-open
   but it is centered when used in tabs on pair-advantages and
   pair-facilities
   Fun Fact: we were accidentally getting these defaults by way of a
   malformed CSS selector for a deprecated class! */
h1, h2, h3, h4 {
  margin-top: 10px;
  text-align: center;
}
/* these might be unhelpful defaults */
p {
  font-family: 'Roboto', sans-serif;
  line-height: 1.5;
  font-size: 1.2em;
}
a {
  color: #226C98;
}
a:hover {
  text-decoration: none;
  color: #226C98;
}
a:active {
  text-decoration: none;
  color: #61B9CF;
}
a:focus {
  text-decoration: none;
  color: #61B9CF;
  outline: 0;
}

/* style an anchor as a button
   pills default to left-aligned
   get centered by placing inside a div or p that has text-align: center
*/
a.pill {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #2F363A;
  padding: 8px 20px;
  background: #FFC81D;
  border: none;
}
a.pill:hover {
  background: #FFF0C2;
  color: #226C98;
}
a.pill:focus {
  outline: 0;
  color: red;
}
/* a little more space all around, used as an enclosing div */
.padded-pill {
  padding: 20px 15px;
}

/* style all form labels */
label {
  display: block;
  font-size: 1.1em;
  font-weight: bold;
}
/* checkbox labels shouldn't be bold */
label.form-check-label {
  font-size: 1em;
  font-weight: normal;
}

/* defaults for buttons, styled like pills */
button {
  display: block;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #2F363A;
  padding: 8px 20px;
  background: #FFC81D;
  border: none;
  margin: 0 auto;
  float: none;
}
button:hover {
  background: #FFF0C2;
  color: #226C98;
}

/* pad a row/column on top and bottom */
.pad-tb {
  padding: 40px;
}
/* pad a row/column on top only */
.pad-t {
  padding-top: 40px;
}
/* pad a row less on top only, previously "row-padtop" */
.pad-tless {
  padding-top: 20px;
}

/* adjust some Bootstrap styles */
.container-fluid {
  padding: 0px;
}
.row {
  margin: 0px;
}
.form-control {
  border-radius: 0px;
  color: #333;
}
.form-group {
  padding: 8px 0px;
}

/* the pair logo, flat style */
#nav-logo {
  width: 145px;
  position: relative;
  left: 5px;
  top: -36px;
  z-index: 9999999;
}

/* the main navigation bar */
@media (max-width: 880px) {
  .nav > li > a {
    padding: 15px 8px;
  }
}
.navbar {
  background: #226C98;
}
.navbar > .container-fluid .navbar-brand {
  margin-left: 0px;
}
.navbar-default .navbar-nav > li > a {
  color: #fff;
}
.navbar-default .navbar-nav > li > a:hover {
  color: #FFC81D;
}
.navbar-default .navbar-nav > .open > a:hover {
  background: #226C98;
  color: #FFC81D;
}
.navbar-default .navbar-nav > .open > a {
  background: #226C98;
  color: #FFC81D;
}
.navbar-right {
  margin-right: 0px;
}
.navbar-right i {
  padding-right: 5px;
  color: #FFC81D;
}
.navbar-toggle {
  margin-right: 45px;
  border-color: #FFF;
  background: #194D6D;
}
.navbar-toggle:hover {
  border-color: #FFC81D;
  background: #194D6D;
}
.navbar-toggle .icon-bar {
  background: #FFF;
}
.navbar-toggle:hover .icon-bar {
  background: #FFC81D;
}

/* drop-down menu, atop Bootstrap styles */
.dropdown-menu {
  background: #194D6D;
}
.dropdown-menu .row {
  padding: 20px 0px;
  max-width: 1000px;
}
.dropdown-menu .row h5 {
  color: #61B9CF;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: .4px;
}
.dropdown-menu a span {
  font-size: 1.1em;
  color: #e5e5e5;
  line-height: 1.4;
}
.dropdown-menu li:hover a span {
  color: #FFC81D;
}
.dropdown-menu > li > a:hover {
  background: #226C98;
}
.nav > li > a:hover, .nav > li > a:focus {
  color: white;
  background: #226C98;
}
.navbar-default .navbar-nav > .open > a {
  background: #226C98;
  color: #FFC81D;
}
.dropdown.yamm-fullwidth .dropdown-menu {
  opacity: 0;
  z-index: -1;
  top: 90px;
  display: none;
}
.dropdown.yamm-fullwidth.open .dropdown-menu {
  background: #194D6D;
  z-index: 1;
  display: block;
  opacity: 1;
}

/* KJM 7/19/16 - cleaner implementation of elements inside menu */
ul.pairnav { padding: 0; }
li.pairnav { padding: 0; }
li.pairnav div.row {
  padding: 10px 0 20px 0;
}
ul.pairnav2 { padding: 0; }
ul.pairnav2 > li {
  color: #e5e5e5;
  padding: 0;
  opacity: 1;
}
ul.pairnav2 > li > a {
  font-size: 16px;
  color: #e5e5e5;
  line-height: 1.4;
  padding: 0;
  opacity: 1;
}
.pairnav2 li > a:hover {
  color: #FFC81D;
}
.pairnav h2 {
  color: #61b9cf;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .4px;
  margin-top: 15px; /* overrides Bootstrap default of 20 */
  text-align: left;
}

/* Columns in dropped down menus that need a border, because there's
another column to the right, should be given this class.  The .15
transparency corresponds to what Bootstrap uses to frame menus. */
.pairnav-lined {
  border-right: 1px solid rgba(0,0,0,.15);
}

/* KJM 7/19/16 - WHY IS THIS HERE? NO CONTEXT! */
.row ul span {
  padding-right: 8px;
  opacity: .8;
}

/* this is frequently used instead of col-XX-offset-#
   I didn't realize it wasn't a Bootstrap feature
   we should move away from using it
   Be careful - if the col-XX is also another class, it may collapse
   to just the size of that class - nest the class instead
*/
.center {
  margin: 0 auto;
  display: block;
  float: none;
}

/* ironically, only 80% wide; ungrouped fields default to 100% */
.wide {
  width: 80% !important;
}

/* not often used, but overridden for advantages & facilities */
.icon {
  height: 90px;
  margin: 0px auto;
  display: block;
  padding: 10px 0px;
}

/* accent colors, used in span */
.accent-darkgrey {
  color: #2F363A !important;
}
/* this one is used solely to ensure glyphicons are light blue */
.accent-skyblue {
  color: #61B9CF !important;
}
/* colors for row divs */
.darkblue {
  background: #226C98 !important;
}
.skyblue {
  background: #61B9CF;
}
.darkgrey {
  background: #2F363A;
}
.white {
  background: white !important;
}

/* adjustments for mobile */
.container-fluid > .navbar-collapse {
  margin-left: 0px;
}
.navbar-fixed-top .navbar-collapse {
  max-height: none;
  overflow: hidden;
}
.navbar-collapse .navbar-right {
  text-align: center;
}
.navbar-collapse .navbar-right li {
  display: inline-block;
}

/* breadcrumb layout */
.breadcrumb-container {
  position: fixed;
  top: 50px;
  min-height: 40px;
  padding: 10px 10px 10px 20px;
  width: 100%;
  z-index: 99;
  background: #194D6D;
}
.breadcrumb {
  background: inherit;
  margin: 0px;
  display: inline;
  position: relative;
  left: 155px;
  color: white;
}
.breadcrumb a {
  color: #FFC81D;
}
.breadcrumb .marker {
  color: #FFC81D;
}
/* alternate idea of using an icon instead of > */
.breadcrumb .glyphicon {
  color: #FFC81D;
}
/* contact info in header */
.top-phone {
  float: right;
  padding-right: 5px;
  color: #FFC81D;
}
.top-phone a {
  color: #FFC81D;
}

/* settings for jumbotron */
.jumbotron {
  min-height: 350px;
  height: auto;
  overflow: hidden;
  /* use a dummy image but it's always overridden */
  background-image: url("/img/green.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 0px;
  text-align: justify;
  padding: 0px;
  position: relative;
}
/* jumbo-overlay frames everything, combined-overlay does actual overlay */
.jumbotron .jumbo-overlay {
  height: auto;
}
/* use a spacer instead of positioning atop the jumbotron, so that the
   jumbotron will adapt its height to the contents */
.jumbotron .jumbo-overlay .jumbo-spacer {
  /* 50px beyond the 91px used at the top, except in narrow mobile */
  height: 141px;
}
.jumbotron .jumbo-overlay .jumbo-spacer2 {
  height: 50px;
}
.combined-overlay {
  padding: 12px 30px;
  background: rgba(255,255,255,0.8);
  width: 60%;
  min-width: 300px;
  line-height: 1.4;
  margin-left: 60px;
  margin-top: 150px;
}
/* home page has larger jumbotron (both classes on same element) */
.jumbotron.homepage {
  min-height: 650px;
}
/* move overlay down to match larger jumbotron */
.homepage .combined-overlay {
  margin-top: 200px;
}
.combined-overlay p {
  font-weight: normal;
  text-align: justify;
}
.combined-overlay h1 {
  font-size: 36px;
  color: #226C98;
  margin-top: 10px;
  text-align: center;
}
/* on mobile, widen and center the overlay */
@media (max-width: 1200px) {
  .combined-overlay {
    width: 90%;
    margin: 20px auto;
  }
}

/* quick & simple way to center content */
p.centered {
  padding: 15px;
  text-align: center !important;
}

/* replaces page-banner, used for one-line special announcements */
.special-banner {
  text-align: center;
  background: #56A168;
  transition: all 0.5s ease;
  color: white;
  padding: 15px 0px;
}
.special-banner a {
  color: white;
}
.special-banner p {
  letter-spacing: 0.4px;
  margin: 0;
}
.special-banner em {
  color: #FFC81D;
  font-style: normal;
}
.special-banner:hover {
  background: #76C188;
  transition: all 0.5s ease;
}

/* for jQuery UI - force overrides because this CSS is early? */
.ui-dialog {
/* background: #226C98 !important; */
  background: #E0E0E0 !important;
  color: #FFC81D !important;
}
#popup {
/* color: #FFC81D; */
  color: black;
  font-size: 18px;
  padding: 20px;
}
#popup p {
  text-align: justify;
}
#popup strong {
  color: #61B9CF;
}
/* links inside the dialog automatically show up as focused */
#popup a:focus {
  color: black;
}
#popup p:last-child {
  padding-top: 30px;
  text-align: center;
}
.ui-dialog-titlebar {
  background: #56A168 !important;
  color: white !important;
  font-family: 'Asap', sans-serif;
  font-size: 26px;
}

/* results from resellers/arc/arc-search.cgi */
.arc-item {
  display: block;
  padding-left: 10px;
  padding-bottom: 20px;
}
.arc-item img {
  padding-right: 10px;
}

/* jumbotron images */
/* KJM 9/25/16 - background-image versus background matters
   because .jumbotron defaults to centering the background unless we use
   "background", which resets a bunch of defaults */
#jumbo-home {
  background-image: url("/img/bg/home.jpg");
  background-size: cover;
}
#jumbo-vps {
  background-image: url("/img/bg/vps.jpeg");
  background-size: cover;
}
#jumbo-landing1 {
  background: url("/img/back01a.jpg");
  background-size: cover;
}
#jumbo-shared {
  background: url("/img/bg/shared.jpg");
  background-size: cover;
}
#jumbo-qs {
  background: url("/img/bg/ded.jpg");
  background-size: cover;
}
#jumbo-pcloud {
  background: url("/img/bg/hvs.jpg");
  background-size: cover;
}
#jumbo-pcolo {
  background: url("/img/back-hardware.jpg");
  background-size: cover;
}
#jumbo-ecom {
  background: url("/img/back-shop1.jpg");
  background-size: cover;
}
#jumbo-careers {
  background: url("/img/back-careers.jpg");
  background-size: cover;
}
#jumbo-history {
  background: url("/img/back-pc5150.jpg");
  background-size: cover;
}
#jumbo-advantages {
  background: url("/img/back-awards.jpg");
  background-size: cover;
}
#jumbo-facilities {
/* background: url("/img/back-bridge1.jpg"); */
  background: url("/img/back-7574.jpg");
  background-size: cover;
}
#jumbo-nonprofit {
  background: url("/img/back-nonprofit.jpg");
  background-size: cover;
}
#jumbo-mbg {
  background: url("/img/back-mbg.jpg");
  background-size: cover;
}
#jumbo-insider {
  background: url("/img/back-bridge1.jpg");
  background-size: cover;
}
#jumbo-opensource {
/* background: url("/img/back-opensource.jpg"); */
  background: url("/img/back-7550.jpg");
  background-size: cover;
}
#jumbo-policies { /* used for all policies, plus trademarks */
  background: url("/img/back-filler2.jpg");
  background-size: cover;
}
#jumbo-weebly {
  background: url("/img/back-weebly.png");
  background-size: cover;
}
#jumbo-cdn {
  background: url("/img/back-cdn2.jpg");
  background-size: cover;
}
#jumbo-support {
  background: url("/img/back-shared.jpg");
  background-size: cover;
}
#jumbo-contactus {
/* background: url("/img/back-bridge1.jpg"); */
  background: url("/img/back-7578.jpg");
  background-size: cover;
}
#jumbo-pairsim {
  background: url("/img/back-workspace2.jpg");
  background-size: cover;
}
#jumbo-inspector {
  background: url("/img/back-callcenter2.jpg");
  background-size: cover;
}
#jumbo-pairssl {
  background: url("/img/back-ssl2.jpg");
  background-size: cover;
}
#jumbo-specials {
  background: url("/img/back-fruit.jpg");
  background-size: cover;
}
#jumbo-signup {
  background: url("/img/back-watering.jpg");
  background-size: cover;
}
#jumbo-csr {
  background: url("/img/back-watering.jpg");
  background-size: cover;
}
#jumbo-exit {
  background: url("/img/back-watering.jpg");
  background-size: cover;
}
#jumbo-libsyn {
  background: url("/img/back20a.jpg");
  background-size: cover;
}
#jumbo-survey {
  background: url("/img/back14a.jpg");
  background-size: cover;
}
#jumbo-arc {
  background: url("/img/back-workspace2.jpg");
  background-size: cover;
}
#jumbo-wpe {
  background: url("/img/bg/wpe.jpeg");
  background-size: cover;
}
#jumbo-wpp {
  background: url("/img/back-workspace2.jpg");
  background-size: cover;
}
#jumbo-mtp {
  background: url("/img/back-mtp2.jpg");
  background-size: cover;
}
#jumbo-choices {
  background: url("/img/back-choices.jpg");
  background-size: cover;
}

/* background for product specs on WP pages */
#wp-plans {
  background: url("/img/bg/wpbg.png");
  background-position: center;
  background-size: auto;
  background-repeat: no-repeat;
  width: 90%; /* don't go edge-to-edge */
  margin: 0 auto;
}
/* even out the columns a bit - overrides ".planchart th:first-child" */
#wp-plans.planchart th:first-child {
  min-width: 30%;
}

/* switched from id to class for codebg */
.codebg {
  background: url("/img/bg/codebg.svg") center center white;
  background-size: 100% auto;
  background-repeat: no-repeat repeat;
}
/* on mobile, the code stuff can get crowded, so just switch to white */
@media (max-width: 1200px) {
  .codebg { background: white; }
}

/* switching from id to class for atcbg */
/* still deprecated because webhosting/against-the-clock.html unused */
.atcbg {
  background: url("/img/bg/atcbg.svg") center center;
  background-position-y: 0%;
  background-repeat-x: no-repeat;
}

/* WordPress callout */
#callout-wp {
  background: url("/img/bg/wpbgw.png") center;
  background-size: 300px;
  background-repeat: no-repeat;
  padding: 25px 0px;
  text-align: center;
  color: white;
}
#callout-wp h2 {
  color: white;
}
#callout-wp p {
  color: white;
}
#callout-wp h5 {
  text-align: center;
}

/* white callout: pairSIM, QS-6, nonprofit, WP Pro */
.callout-white {
  padding: 20px 0px;
  background: white;
}

/* callout of pairSIM w/ icon in background */
.callout-sim img {
  height: 240px;
  float: right;
  animation: none;
  /* margin keeps the animation from causing a horizontal scroll bar */
  margin-right: 20px;
}
.callout-sim.in-view img { /* c/o /js/visible.js */
  animation: pulse 1.5s;
  animation-iteration-count: 2;
  animation-delay: 1.5s;
}
.callout-sim .quote-block {
  max-width: 700px;
}

/* callout of five icons on careers.html */
.callout-careers {
  padding: 20px 0px;
  background: white;
  text-align: center;
}
.callout-careers img {
  height: 120px;
  margin: 0px auto;
  display: block;
  padding: 10px 0px;
}
.callout-careers h3 {
  font-size: 20px;
}
/* callout of four icons on pairssl.html */
.callout-pairssl h3 {
  font-size: 20px;
}

/* for webhosting/paircolo.html */
.remotehands {
  padding: 20px 0px;
  background: #226C98;
  text-align: center;
}
.remotehands img {
  padding: 20px 0px;
  height: 300px;
  margin: 0 auto;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  animation-iteration-count: infinite;
}
.remotehands img:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  animation-iteration-count: infinite;
}
.remotehands .quote-block {
  color: white;
}
.remotehands .quote-block a {
  color: white;
  text-decoration: underline;
}
.remotehands h2 {
  color: #FFC81D;
}

/* each featured item on the home page */
.home-product {
  padding: 0;
  border: none;
}
.home-product a {
  text-decoration: none;
}
/* don't use h1 on home page except in main tagline */
.home-product h2 {
  background: #226C98;
  color: white;
  margin: 10px;
  text-align: center;
  font-size: 26px;
}
.home-product h3 {
  background: #226C98;
  color: #FFC81D;
  margin: 10px;
  text-align: center;
  font-size: 18px;
}
.home-product2 {
  background: white;
  color: black;
  font-size: 15px;
  padding: 15px 30px;
  text-align: center;
  min-height: 280px; /* even on mobile */
}
.home-product2 a {
  text-decoration: none;
  color: black;
}
.home-product2 img {
  height: 135px;
  display: block;
  margin: 0 auto;
  padding: 15px;
}
.home-product .padded-pill {
  text-align: center;
}
/* on mobile, we need to use white so sections don't run together */
@media (max-width: 1200px) {
  .home-product .padded-pill {
    background: white;
    padding-bottom: 25px;
  }
}

/* libsyn variant of home-product columns - not ready yet */
.libsyn-product {
  padding: 0;
  border-right: 1px solid #194D6D;
}
.libsyn-product:last-child {
  border: none;
}
.libsyn-product h1 {
  background: white;
  margin: 10px;
  text-align: center;
  font-size: 26px;
}
.libsyn-product h2 {
  background: white;
  margin: 10px;
  text-align: center;
  font-size: 18px;
}
.libsyn-product .padded-pill {
  text-align: center;
}

/* support/contact.html, services/pairssl-order.html */
.contactform {
  background: white;
  padding: 20px;
}
.contactform .padded-pill {
  text-align: center;
}
.contactform small {
  font-size: 14px;
}
.contactform form {
  padding-top: 20px;
}
.contactform strong { /* mark required fields */
  color: #61B9CF;
  font-weight: bold;
}
/* response fields that appear after submitting a form */
.response {
  color: #56A168 !important;
  font-size: 18px;
  font-weight: bold;
}
.response strong { /* error */
  color: darkred !important;
}
/* right column */
.contactform2 {
  border-left: 1px solid #226C98;
}
.contactform2 p {
  font-size: 14px;
}
.contactform2 small {
  display: block;
  padding-left: 15px;
  font-size: 12px;
}
.contactform2 h2 {
  text-align: left;
}
.contactform2 h3 {
  text-align: left;
}
.contactform2 dt {
  color: #61B9CF;
  font-weight: bold;
}
.contactform2 dd {
  padding-left: 15px;
}
.contactform2 a {
  color: black;
}
.contactform2 a:hover {
  text-decoration: underline;
}
/* on mobile, simplify the right column */
@media (max-width: 1200px) {
  .contactform2 { border: none; }
}

/* replaces info-content to overlay onto jumbotron */
.info-overlay {
  display: block;
  position: relative;
  width: 50%;
  min-height: 400px;
  padding: 30px 30px;
  margin: 0;
  background: rgba(255,255,255,0.8);
  animation-delay: 1s; /* for sliding content in */
}
.info-overlay p {
  text-align: justify;
}
/* right and left variants generated by callout_leftright() */
.info-overlay-right {
  margin-left: auto;
}
.info-overlay-center { /* unused but maybe someday */
  margin: auto;
}
/* on mobile, just use the full width */
@media (max-width: 1200px) {
  .info-overlay { width: 100%; }
}

/* specific left-right callouts */
#vps-lr {
/* background: url("/img/back-vps-lr.jpg"); */
  background: url("/img/back-7657a.jpg");
  background-size: cover;
}
#shared-lr {
  background: url("/img/stock-sweater.jpg");
  background-size: cover;
}
#qs-lr {
  background: url("/img/bg/hardware.jpg");
  background-size: cover;
}
#hvs-lr {
  background: url("/img/back17a.jpg");
  background-size: cover;
}
#pcloud-lr {
  background: url("/img/back-hardware.jpg");
  background-size: cover;
}
#ecom-lr {
  background: url("/img/back-shop3.jpg");
  background-size: cover;
}
#history1-lr {
  background: url("/img/icons/oldlogo.png");
  background-position: right center;
  background-size: 60% auto;
  background-repeat: no-repeat;
}
#history2-lr {
  background: url("/img/bg/fillerbg.jpg");
  background-size: cover;
}
#facilities1-lr {
  background: url("/img/back-hardware.jpg");
  background-size: cover;
}
#facilities2-lr {
  background: url("/img/back-bikes.jpg");
  background-size: cover;
}
#facilities3-lr {
  background: url("/img/back-noc.jpg");
  background-size: cover;
}
#nonprofit-lr {
  background: url("/img/nonprofit2.jpg");
  background-size: 50%;
  background-position: top right;
  background-repeat: repeat-y;
}
@media (max-width: 1200px) { /* fill background on mobile */
  #nonprofit-lr { background-size: 100%; }
}
#paircdn-lr {
/* background: url("/img/back15a.jpg"); */
  background: url("/img/back-7539.jpg");
  background-size: cover;
}
#pairsim-lr {
  background: url("/img/back-racks.jpg");
  background-size: cover;
}
#home-news-lr {
  background: url("/img/back-hardware.jpg");
  background-size: cover;
}
#pcolo-lr {
  background: url("/img/back-server.jpg");
  background-size: cover;
}
#libsyn-lr {
  background: url("/img/stock-sweater.jpg");
  background-size: cover;
}
#wpe-lr {
/* background: url("/img/bg/wpe2.jpeg"); */
  background: url("/img/back-7643.jpg");
  background-size: cover;
}
#wpp-lr {
/* background: url("/img/back14a.jpg"); */
  background: url("/img/back-7508.jpg");
  background-size: cover;
}
#inspector-lr {
  background: url("/img/back-abstract.jpg");
  background-size: cover;
}
#pairssl-lr {
/* background: url("/img/back28a.jpg"); */
  background: url("/img/back-7558.jpg");
  background-size: cover;
}
#careers-lr {
  background: url("/img/back-awards.jpg");
  background-size: cover;
}

/* home page stuff for domain search box */
#domain-lr {
  background: url("/img/bg/pairdombg.png");
  background-size: contain;
  text-align: center;
  padding: 20px;
}
#domain-lr h2 {
  color: #FFC81D;
}
#domain-lr p {
  color: white;
}
/* lighter gray background, row inside is used to overlay on color */
.callout-domain {
  background: #3F464A;
}
.callout-domain .form-control {
  width: 20%;
  min-width: 300px;
  margin: 0 auto;
}

/* all CSOTW callouts */
#csotw-lr-1 {
  background: url("/img/bg/insight.jpg");
  background-size: cover;
}
#csotw-lr-2 {
  background: url("/img/bg/fred.jpg");
  background-size: cover;
}
#csotw-lr-3 {
  background: url("/img/bg/ken.jpg");
  background-size: cover;
}

/* cityscape in company/careers.html */
.careerspgh {
  min-height: 500px;
  background: url("/img/bg/pgh.svg") left;
  background-size: cover;
  color: white;
  padding: 40px;
}
.careerspgh h2 {
  color: #61B9CF;
}
@media (max-width: 1200px) { /* more readable on mobile */
  .careerspgh { min-height: 0px; }
  .careerspgh h2 { color: white; }
}

/* smallpad typically used to give a row small padding, formerly "solid" */
.smallpad {
  padding: 10px 0px;
}

/* plain white sections */
.info-simple {
  color: black;
  background: white;
}
.info-simple p {
  padding: 0px 10px;
  color: #404040;
  text-align: justify;
}
.info-simple strong {
  font-weight: normal;
  font-size: 24px;
}
.info-simple img { /* icons */
  height: 180px;
  margin: 0px auto;
  display: block;
  padding: 10px 0px;
}

/* ACC quote block */
.acc-quote {
  color: white;
  padding: 30px 15px;
  max-width: 600px;
  margin: 0 auto;
}
.acc-quote img {
  display: block;
  margin: 0 auto;
  height: 180px;
  padding: 20px 0;
}
.acc-quote p {
  text-align: center;
  font-size: 22px;
}
.acc-quote em {
  display: block;
  text-align: right;
  padding-right: 10%;
}
.acc-quote ol {
  margin-left: 40px;
}
.acc-quote ol li {
  font-size: 18px;
}

/* Showing quotes from staff */
.quote-block {
  color: white;
  padding: 0;
  max-width: 600px;
  margin: 0 auto;
}
.quote-block img {
  display: block;
  margin: 0 auto;
  height: 180px;
  padding: 20px 0;
}
.quote-block p {
  text-align: center;
  font-size: 22px;
  padding-bottom: 10px;
}
.quote-block em {
  display: block;
  text-align: right;
  padding-right: 10%;
}
/* more readable headline on dark gray */
.darkgrey .quote-block h2 {
  color: #61B9CF;
}
.callout-white .quote-block {
  color: black;
}
.callout-white .quote-block a {
  color: black;
}

/* webhosting/ecommerce.html */
.ecom-plans {
  padding: 40px 0px;
  overflow: hidden;
}
.ecom-plans .highlight {
  top: -8px;
  border-top: 8px solid #2F363A;
  border-bottom: 8px solid #2F363A;
  border-left: 1px solid #3F464A;
  border-right: 1px solid #3F464A;
}
/* highlighting doesn't work well on mobile layout */
@media (max-width: 1200px) {
  .ecom-plans .highlight { top: 0px; border: none; }
}
/* ecom-plans2 used for each column of ecom-plans */
.ecom-plans2 {
  background: white;
  color: black;
  padding: 0px;
}
.ecom-plans2 h3 { /* block header and footer for each plan */
  display: block;
  background: #2F363A;
  padding: 15px 0px;
  color: white;
  margin: 0 auto;
}
.ecom-plans2 img {
  width: 100px !important;
  margin: 25px auto;
  display: block;
  border: 2px solid #61B9CF;
  border-radius: 80px;
  margin-bottom: 5px;
}
.ecom-plans2 p {
  text-align: center;
  padding: 10px 15px 0px 15px;
}
/* more specific to override default */
.ecom-plans2 table.aligned-icons {
  margin: 20px auto;
}
.ecom-features {
  background: white;
  color: black;
  padding: 20px 0px;
}
/* ecom-features2 used for each column of ecom-features */
.ecom-features2 {
  background: white;
  padding: 20px 0px;
}
.ecom-features2 img {
  height: 180px;
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 10px 0px;
}
/* more specific to override default */
.ecom-features2 table.aligned-icons {
  font-size: 18px;
}
@media (max-width: 1200px) { /* center lists on narrow display */
  .ecom-features2 table.aligned-icons { margin: 0 auto; }
}
.ecom-features2 table.aligned-icons th {
  color: #61B9CF;
}
/* ecom-features3 is 3rd party integrations, at bottom */
.ecom-features3 {
  text-align: center;
  padding: 10px 0px;
}
.ecom-features3 img {
  height: 90px;
  margin: 10px;
}

/* services/movetopair.html */
.mtp-features {
  background: url("/img/bg/cloudbg2.svg") center center;
  background-repeat: no-repeat;
  color: black;
  padding: 20px 0px;
}
.mtp-features2 {
  padding-bottom: 15px;
}
.mtp-features2 img {
  height: 180px;
  margin: 0px auto;
  display: block;
  padding: 10px 0px;
}
.mtp-features2 ul {
  list-style-type: circle;
  margin: 0 auto;
}
.mtp-features2 li {
  font-size: 18px;
  padding-bottom: 5px;
}
@media (max-width: 1200px) { /* center lists on narrow display */
  .mtp-features2 ol { text-align: center; }
  .mtp-features2 ul { text-align: center; }
}
.mtp-contact {
  background: url("/img/bg/cloudbg3.svg") center center;
  background-repeat: no-repeat;
  padding: 20px;
}
.mtp-contact2 {
  padding: 20px 10px;
}
/* fancy HTML trick so anchoring at #lets-move shifts us down 91 pixels
   to account for our fixed header */
#lets-move:before {
  display: block;
  content: " ";
  margin-top: -91px;
  heigh: 91px;
  visibility: hidden;
}
.mtp-contact2 strong { /* mark required fields */
  color: #61B9CF;
  font-weight: bold;
}

/* this table class can be used anywhere we have a bullet-style list
   and need the icons to line up nicely */
table.aligned-icons {
  margin: 20px;
  font-size: 18px;
}
table.aligned-icons th { /* used for the icons */
  padding-bottom: 10px;
  font-size: 20px;
  color: #226C98;
  text-align: center;
  cursor: default;
}
table.aligned-icons td {
  padding-bottom: 10px;
  padding-left: 15px;
}

/* planchart is used to present specs of VPS, QS, and pairCloud */
.planchart {
  padding: 10px 0px;
}
.planchart table {
  width: 100%;
}
.planchart tr:hover { background: paleturquoise; }
.planchart thead > tr:hover { background: none; }
/* signup buttons are in last row, don't highlight that row */
.planchart tr:last-child:hover { background: none; }
.planchart td {
  border: none;
  padding: 0;
  font-size: 24px;
  color: black;
}
.planchart .lastrow td {
  border-top: 1px solid silver;
  border-right: none;
  border-left: none;
  padding: 6px;
}
/* reasonable width for labels on left */
.planchart th:first-child {
  min-width: 20%;
}
.planchart th {
  border: none;
  border-bottom: 1px solid silver;
  padding: 0px;
}
.planchart ul li {
  text-align: left;
}
.planchart td {
  text-align: center;
  margin: 0 auto;
  border-right: 1px solid silver;
}
.planchart td:last-child {
  border-right: none;
}

/* yellow-on-blue feature list for WP pages, but also QS */
.wp-features {
  background: #226C98;
  color: white;
}
.wp-features h2 {
  color: #FFC81D;
  margin-top: 25px;
}
.wp-features table.aligned-icons {
  margin: 20px auto;
}
.wp-features table.aligned-icons th {
  color: #FFC81D;
  padding-bottom: 20px;
}
.wp-features table.aligned-icons td {
  padding-bottom: 20px;
}
.wp-features .glyphicon {
  color: #FFC81D;
}
/* 3 columns with large animated icons */
.wp-features2 {
  background: white;
  color: black;
  padding-bottom: 20px;
}
.wp-features2 h2 {
  color: #226C98;
  margin-top: 25px;
}
.wp-features2 h3 {
  color: #226C98;
  margin-top: 25px;
  font-size: 20px;
}
.wp-features2 p {
  padding: 0px 10px;
  color: #404040;
  text-align: justify;
}
.wp-features2 .glyphicon {
  transition: all 0.5s ease;
  color: #61B9CF;
  font-size: 180px;
  text-align: center;
  display: block;
  padding: 20px;
  cursor: default;
}
.wp-features2 .glyphicon:hover {
  transition: all 0.5s ease;
  color: #226C98;
}
.wp-features2 .glyphicon-cog {
  -webkit-animation: invertBarrelRoll 10s infinite linear;
  animation: invertBarrelRoll 10s infinite linear;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wp-features2 .glyphicon-cog:hover {
  -webkit-animation: invertBarrelRoll 10s infinite linear;
  animation: invertBarrelRoll 10s infinite linear;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.wp-features2 .glyphicon-refresh {
  -webkit-animation: barrelRoll 10s infinite linear;
  animation: barrelRoll 10s infinite linear;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.wp-features2 .glyphicon-refresh:hover {
  -webkit-animation: barrelRoll 10s infinite linear;
  animation: barrelRoll 10s infinite linear;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}

/* implementation of barrel roll */
@-webkit-keyframes barrelRoll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes barrelRoll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@-webkit-keyframes invertBarrelRoll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
@keyframes invertBarrelRoll {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

/* allows any image to "bounce" when pointed to */
img.bouncy {
  transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
}
img.bouncy:hover {
  transform: translateY(-6%);
  -webkit-transform: translateY(-6%);
}

/* webhosting/dedicated-servers.html */
/* development environment bullet list */
.qs-features2 {
  background: #226C98;
  color: white;
  text-align: center;
}
.qs-features2 h2 {
  color: #FFC81D;
  margin-top: 25px;
}
.qs-features2 p {
  color: white;
  font-size: 22px;
}
.qs-features2 p:last-child {
  padding-bottom: 20px;
}
.qs-features2 strong {
  color: #FFC81D;
  font-weight: normal;
}
.qs-features2 img {
  padding: 20px 0px;
  opacity: 0.8;
  height: 250px;
  -webkit-animation: barrelRoll 10s infinite linear;
  animation: barrelRoll 10s infinite linear;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
.qs-features2 img:hover {
  -webkit-animation: barrelRoll 10s infinite linear;
  animation: barrelRoll 10s infinite linear;
  -webkit-animation-play-state: running;
  animation-play-state: running;
}
.qs-features2 table.aligned-icons {
  margin-top: 47px;
}
.qs-features2 table.aligned-icons th {
  color: #FFC81D;
  padding-bottom: 35px;
}
.qs-features2 table.aligned-icons td {
  padding-bottom: 35px;
}
.qs-features3 {
  padding: 0px;
  text-align: left;
}
@media (max-width: 992px) {
  .qs-features2 img { height: 150px; }
}
@media (max-width: 768px) {
  .qs-features3 table { margin: 0 auto; }
}
/* longer items in QS specs need a smaller font */
tr.qs-longtext > td {
  font-size: 14px;
}
.qs-sla {
  background: #2F363A;
  color: white;
  padding-bottom: 20px;
}
.qs-sla img {
  display: block;
  margin: 0 auto;
  height: 400px;
  padding: 50px;
}
@media (max-width: 992px) {
  .qs-sla img { height: 200px; padding: 20px; }
}
.qs-sla h2 {
  color: #FFC81D;
  padding-top: 20px;
}
.qs-sla table.aligned-icons th {
  color: #61B9CF;
}

/* support/index.html */
.supportcenter {
  background: white;
}
.supportcenter .padded-pill {
  text-align: center;
}
.supportcenter .glyphicon {
  transition: all 0.5s ease;
  color: #61B9CF;
  font-size: 180px;
  text-align: center;
  display: block;
  padding: 20px;
  cursor: default;
}
.supportcenter .glyphicon:hover {
  transition: all 0.5s ease;
  color: #226C98;
}

/* tabs for VPS, QS, pairCloud are all implemented under #tabs-vps */
#tabs-vps.nav-tabs > li.active > a {
  background: #fff;
  border: 1px solid white;
  transition: background-color 250ms ease;
}
#tabs-vps li > a {
  border: 1px solid rgba(257, 257, 257, .5);
  background: rgba(257, 257, 257, .5);
  transition: background-color 250ms ease;
}
#tabs-vps li {
  padding: 0px;
  margin: 0 1.86rem;
  display: inline-block;
  color: black;
}
#tabs-vps p {
  font-size: 14px;
  color: black;
}
#tabs-vps li.active a.cleartab {
  background: transparent;
  border: transparent !important;
}
#tabs-vps li a.cleartab {
  background: transparent;
  border: transparent !important;
}
#tabs-vps li a.cleartab h3 {
  border-bottom: none;
  color: #61B9CF;
}
#tabs-vps li a.cleartab i {
  color: #fff;
  margin: 0 auto;
  display: block;
  width: 5px;
  font-size: 20px;
}
/* appearance of actual tab area */
.nav-tabs h3 {
  border-bottom: 3px double silver;
  line-height: 1.5em;
}
.nav-tabs {
  margin: 0 auto;
  border-bottom: none;
}
.tab-pane .table > tbody > tr > td {
  font-size: 1em;
  line-height: 2;
}
.tab-pane tr.no-b > td {
  border: none !important;
}
.tab-pane ul {
  list-style-type: disc;
}

/* planblocks are the hacky mobile version of product specs
   used on dedicated-servers, paircloud, paircolo, shared, vps, both WP
   always used with mobile-only-block so that's not included here */
.planblocks {
  padding: 20px;
}
.planblocks strong {
  color: #61B9CF;
}
.planblocks ul {
  width: 245px;
  margin: 0 auto;
}
.planblocks ul li {
  text-align: justify;
}
/* plan-heading is used inside planblocks */
.plan-heading {
  padding: 15px 0px;
  position: relative;
}
.plan-heading h3 {
  margin: 0px;
  color: black;
  padding: 0px;
}
/* plan-content is used inside planblocks */
.plan-content {
  background: #fff;
  position: relative;
  padding: 0 0 10px 0;
  text-align: center; /* KJM 7/19/16 - fixing QS mobile */
}
.plan-content strong {
  color: #61B9CF;
}
.plan-content ul {
  padding-left: 20px;
}
.plan-content li {
  padding-top: 20px;
}
.plan-content li span {
  padding-right: 10px;
  color: #226C98;
}
.plan-content img {
  width: 100px !important;
  margin: 0 auto;
  display: block;
  border: 2px solid #61B9CF;
  border-radius: 80px;
  margin-bottom: 5px;
}
.plan-bottom {
  padding: 20px;
  text-align: center;
}

/* screenshot from ACC, fake a window image */
.cast-wrapper {
  margin: 40px auto;
  border: 4px solid #226C98;
  border-radius: 8px;
}
.cast-wrapper img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.cast-bar {
  border-bottom: 4px solid #226C98;
  background: #226C98;
}
/* icons at top of fake screenshot */
.dots {
  color: white;
  padding: 0px;
  text-align: left;
  padding-right: none;
  margin-bottom: none;
}
.dots li {
  display: inline-block;
  padding: 0px 0px 0px 3px;
  position: relative;
  top: 4px;
  left: 5px;
}

/* services/pairsim.html */
.pairsim ul {
  list-style-type: none;
  text-align: center;
  padding: 0px;
}
.pairsim li {
  display: inline-block;
  text-align: center;
}
.pairsim li > img {
  width: 120px;
  height: auto;
}

/* services/paircdn.html */
.paircdn {
  background: white;
  padding: 20px;
}
.paircdnmap {
  padding: 0px;
  border: 2px solid #226C98;
}
.paircdnmap img {
  width: 100%;
}
.paircdn ul {
  display: inline-block;
}
.paircdn ul li {
  display: inline-block;
  padding: 8px;
}
.paircdn table {
  width: 100%;
}
.paircdn td {
  text-align: center;
  font-size: 18px;
}
.paircdn td strong {
  color: #61B9CF;
}
.paircdn td {
  border-top: 2px solid silver;
  border-bottom: 2px solid silver;
}
.paircdn td:first-child {
  border: none;
}
.paircdn p { /* sales pitch */
  padding: 0px 20px;
}

/* servicechart is used in
   services/web-inspector.html, services/pairssl.html, signup/index.html */
.servicechart {
  background: white;
  padding: 20px;
}
.servicechart table {
  width: 100%;
}
.servicechart td {
  text-align: center;
  font-size: 18px;
  padding: 5px 0px;
  border-top: 2px solid silver;
  border-bottom: 2px solid silver;
}
.servicechart td strong {
  color: #61B9CF;
}
.servicechart td:first-child {
  border: none;
  text-align: right;
  padding-right: 20px;
}
/* chart on inspector gets a background icon */
.inspector {
  background: url("/img/icons/inspector.svg");
  background-position: left, center;
  background-repeat: no-repeat;
  background-size: auto 50%;
}
/* don't use icon when it might overlap table */
@media (max-width: 1200px) {
  .inspector { background: white; }
}
/* table on signup/index.html needs more padding around buttons */
.signup td {
  padding: 10px 0px;
}

/* 404 error page */
.four-oh-four {
  background: white;
  color: black;
  text-align: center;
  padding: 50px 0px;
}
.four-oh-four img {
  display: block;
  margin: 0 auto;
  height: 400px;
  margin-top: 50px;
  opacity: 1;
  transition: opacity 20s ease-in-out;
  -moz-transition: opacity 20s ease-in-out;
  -webkit-transition: opacity 20s ease-in-out;
  transition-delay: 4s;
  -moz-transition-delay: 4s;
  -webkit-transition-delay: 4s;
}
.four-oh-four img:hover {
  opacity: 0;
}

/* standout quotes for history.html */
.quote-bubble {
  margin: 20px;
  padding: 35px 20px;
  color: white;
  background: #226C98;
  font-size: 24px;
  text-align: center;
  position: relative;
  border-radius: 8px;
  z-index: 2;
  max-width: 850px;
}
.quote-bubble em {
  font-style: normal;
  font-size: 16px;
  color: #FFC81D;
}
@media (max-width: 1200px) {
  .quote-bubble { margin: 0 auto; }
}

/* little tab marker on pair-advantages and pair-facilities */
/* this is still hackish - defaults to 20px but overridden to 10px in
   every actual usage case */
.tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 20px 0 20px;
  border-color: #226C98 transparent transparent transparent;
  position: absolute;
  z-index: 0;
  left: 50px;
}
.tri.right {
  left: 80%;
}

/* company/pair-advantages.html */
#adv-tabs {
  border-bottom: 2px solid #226C98;
  min-width: 700px;
  max-width: 800px;
}
#adv-tabs li {
  width: 16.66666667%;
  padding: 0px;
}
#adv-tabs .tri { /* tune the marker */
  border-width: 10px 10px 0 10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}
/* hide marker on very narrow screen */
@media (max-width: 768px) {
  #adv-tabs .tri { visibility: hidden; }
}
#adv-tabs .icon { /* don't override all img because of large ones */
  padding: 0px;
  height: 70px;
  padding-bottom: 10px;
}
#adv-tabs h5 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #226C98;
  margin: 5px auto;
}
#adv-tabpanel {
  padding-bottom: 30px;
}
#adv-tabs > li > a {
  border: none;
}
#adv-tabs li.active a {
  border: none;
  padding-bottom: 0px;
}
#adv-tabs li.active .tri {
  opacity: 1;
}
#adv-tabs li a {
  padding: 0px;
}
#adv-tabs li a:hover {
  background: #fff;
}
.adv-img {
  display: block;
  border-radius: 100%;
  height: 350px;
  max-width: 350px;
  margin: 0 auto;
  border: 5px solid #61B9CF;
  background: white;
  overflow: hidden;
  z-index: 2;
  position: relative;
}
.adv-img img {
  max-width: 350px;
  max-height: 350px;
}
.adv-content {
  padding: 10px;
}
.adv-content h2 {
  padding-bottom: 10px;
}
.adv-content p {
  text-align: justify;
}
/* we have to tweak the presentation of some of the images because
   of how they are implemented or sized */
#advreliability img {
  background-size: contain;
  width: 100%;
  padding-top: 0%;
}
#advflexibility img {
  padding-top: 40px;
}
#advhardware img {
  background-size: contain;
  width: 100%;
  padding-top: 0%;
}
.adv-img img {
  position: relative;
  z-index: 1;
  width: 250px;
  padding-top: 80px;
  margin: 0 auto;
  display: block;
}
.adv-quote {
  text-align: center;
  background: #226C98;
  color: white;
}
.adv-quote p {
  padding: 30px;
  font-size: 22px;
  margin-bottom: 0px;
}
.adv-quote em {
  font-style: normal;
  color: #FFC81D;
  font-size: 18px;
}

/* company/pair-facilities.html */
#fac-tabs {
  border-bottom: 2px solid #226C98;
}
#fac-tabs li {
  width: 33.333333%;
  padding: 0px;
}
#fac-tabs .icon {
  padding: 0px;
  height: 70px;
  padding-bottom: 10px;
}
#fac-tabs h5 {
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  color: #226C98;
  margin: 5px auto;
}
#fac-tabs > li > a {
  border: none;
  padding-bottom: 0px;
}
#fac-tabs li a:hover {
  background: #fff;
}
#fac-tabs .tri {
  border-width: 10px 10px 0 10px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
}
#fac-tabs li.active .tri {
  opacity: 1;
}

/* support/contact.html */
.contactus-form span {
  text-align: center;
}
.contactus-form .form-inline .form-control {
  width: 300px;
}
.contactus-form select {
  padding: 0px;
  border-radius: 0px;
}

/* center the Google recaptcha */
.g-recaptcha {
  margin: 0 auto;
  display: block;
  width: 302px;
  padding-bottom: 25px;
}

/* policies and contracts */
.policies {
  padding: 20px 0px;
  text-align: justify;
}
.policies a {
  border-bottom: 1px solid #61B9CF;
  line-height: 1.5em;
}
.policies a:hover {
  color: #61B9CF;
}
.policies h3 {
  padding-bottom: 15px;
}
.policies h4 {
  text-align: left;
  font-size: 16px;
}
.policies p {
  font-size: 14px;
}
.policies ul li {
  padding: 0px;
}
.policies ul {
  padding: 5px 0px;
  background: #fff;
}
.policy-contract h2 {
  padding-bottom: 10px;
}
.policy-contract h3 {
  padding-top: 10px;
}
.policy-contract ul {
  list-style-type: circle;
  padding-top: 10px;
  padding-bottom: 10px;
}
.policy-contract ol {
  padding-top: 10px;
  padding-bottom: 10px;
}
.policy-contract li {
  font-size: 18px;
}
.policy-contract blockquote {
  font-size: 18px;
  padding: 0px 20px;
  margin: 10px 0px;
  border: none;
}

/* company/careers-open.html */
.open-careers {
  padding: 20px;
}
.open-careers h4 {
  padding: 0px;
  text-transform: uppercase;
  color: #fff;
}
.open-careers .panel-heading {
  background: #2F363A;
  border: 2px solid  #2F363A;
  height: 100px;
  border-radius: 0px;
  margin-top: 10px;
  text-align: center;
}
.open-careers .panel {
  border: none;
}
.open-careers a:hover .panel-heading {
  border: 2px solid #ccc;
}
.open-careers .panel-body {
  border: 1px solid #2F363A;
  border-top: none;
}
.open-careers .panel-body span {
  color: #61B9CF;
}
.open-careers .panel-body h5 {
  font-weight: bold;
}
.open-careers .panel-body2 { /* not part of Bootstrap */
  color: white;
  background: #2F363A;
  padding: 20px;
}

/* pair-newsletter */
ul.newsletters {
  list-style-type: circle;
  padding: 20px 50px;
}
@media (max-width: 992px) { /* looks nicer on narrow screen */
  .newsletters { text-align: center; }
}
.newsletters strong {
  font-weight: normal;
  font-size: 18px;
  line-height: 1.5em;
}
.newsletters a:hover {
  text-decoration: underline;
}

/* modal popups */
.modal-header {
  background: #226C98;
}
.modal-header h3 {
  padding-top: 4px;
  color: white;
}
.modal-header .close {
  font-size: 2.2em;
  opacity: 1;
  color: #404040;
  text-shadow: none;
  margin: 0;
}
.modal-header .close:hover {
  background: transparent;
  color: #61B9CF;
}
.modal-body p {
  font-size: 18px;
  text-align: justify;
  padding: 0px 10px;
}
.modal-body ul {
  padding-top: 8px;
  list-style-type: disc;
}
.modal-body ul li {
  padding-bottom: 0px;
  padding-top: 0px;
}
.modal-footer {
  text-align: center;
  background: #194D6D;
}
.modal-footer h4 {
  color: #FFC81D;
  font-weight: normal;
}

/* /webhosting/choices.html */
.choices .questions {
  display: block;
  margin: 40px auto;
  text-align: center;
  width: 80%;
}
.choices .questions ul {
  list-style-type: none;
}
.choices .questions li {
  position: relative;
  margin: 0 auto;
  width: 100px;
  height: 50px;
}
.choices .questions label, .choices .questions input {
  font-size: 20px;
  font-weight: bold;
  color: #2F363A;
  padding: 8px 20px;
  background: #FFC81D;
  border: none;
  display: block;
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.choices .questions input[type="radio"]:checked + label {
  background: #56A168;
  color: white;
}
.choices p {
  margin: 5px 0px;
}
.choices table {
  width: 80%;
  margin: 25px auto;
}
.choices td {
  text-align: center;
}
.choices .answers { /* contains the active answer-# */
  min-height: 275px;
  background: #226C98;
  color: white;
  padding: 25px 0px;
}
.choices .answers p {
  padding: 20px 0px;
}
.choices .answers h3 {
  color: white;
}
.choices .answer-0 {
}
.choices .answer-1 {
  display: none;
}
.choices .answer-2 {
  display: none;
}
.choices .answer-3 {
  display: none;
}
.choices .answer-4 {
  display: none;
}
.choices .answer-5 {
  display: none;
}

/* animate the shield on /company/pair-guarantee.html */
.mbg img {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  animation-iteration-count: infinite;
}
.mbg img:hover {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  animation-iteration-count: infinite;
}

/* MBG callout, always blue */
#mbg-callout {
  background: #226C98;
  color: white;
  text-align: center;
  padding: 20px 0;
  font-size: 24px;
}
#mbg-callout a {
  color: white;
  text-decoration: none;
}
#mbg-callout h2 {
  color: white;
}
#mbg-callout img {
  display: block;
  margin: 0 auto;
  height: 200px;
  padding: 5px;
}

/* MTP callout */
#mtp-callout {
  padding: 20px 0px;
  background: white;
}
#mtp-callout2 {
  background: url("/img/bg/movepairblock.png");
  background-repeat: no-repeat;
  background-size: contain;
}
#mtp-callout2 .quote-block {
  color: black;
}
#mtp-callout a {
  color: black;
}

/* this dummy class exists just to be watched by /js/visible.js
   see https://www.sitepoint.com/scroll-based-animations-jquery-css3/ */
.watch-visible {}

/* testimonials */
.kudos {
  padding: 30px 0px;
  background: white;
  color: #404040;
}
.kudos img {
  height: 240px;
  float: right;
  animation: none;
  /* margin keeps the animation from causing a horizontal scroll bar */
  margin-right: 20px;
}
.kudos.in-view img { /* c/o /js/visible.js */
  animation: tada 1.5s;
  animation-iteration-count: 2;
  animation-delay: 1.5s;
}
@media (max-width: 768px) { /* hide the thumb */
  .kudos img { display: none; }
}
.kudos h2 {
  padding-bottom: 20px;
}
.kudos p {
  font-size: 20px;
  text-align: justify;
}
.kudos strong {
  color: #61B9CF;
}
.kudos .glyphicon { /* heart emoji */
  color: red;
}
.kudos .icon1 { /* first icon */
  font-size: 48px;
  position: absolute;
  left: -48px;
  top: 44px;
}
.kudos .icon2 { /* second icon */
  font-size: 48px;
  position: absolute;
  right: -48px;
  top: 44px;
}
@media (max-width: 1200px) {
  .kudos .icon1 { display: none; }
  .kudos .icon2 { display: none; }
}
.kudos em {
  font-size: 15px;
  display: block;
  text-align: right;
  padding-right: 10%;
}

/* footer - support section first */
.footer-support {
  text-align: center;
  padding: 10px 0px;
  background: #3F464A;
  color: white;
}
/* mailto links remain white, more readable at that size */
.footer-support a {
  color: white;
}
.footer-support h3 {
  color: white;
}
.footer-support h4 {
  color: #FFC81D;
}
/* phone number is yellow even though it's a link */
.footer-support h4 > a {
  color: #FFC81D;
}
/* main footer, darker grey */
footer {
  background: #2F363A;
  z-index: 3;
  padding: 20px 0px;
  display: block;
  position: relative;
}
footer img {
  display: block;
  width: 160px;
  margin: 0 auto;
}
/* don't use h1 in footer */
.pairfoot h2 {
  color: #FFC81D;
  margin-top: 5px;
  text-transform: uppercase;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: .4px;
  text-align: left;
}
.pairfoot a {
  color: #FFC81D;
}
ul.pairfoot2 {
  padding: 0;
  list-style-type: none;
}
ul.pairfoot2 > li {
  color: #e5e5e5;
  padding: 0;
  opacity: 1;
}
ul.pairfoot2 > li > a {
  font-size: 16px;
  color: #e5e5e5;
  line-height: 1.4;
  padding: 0;
  opacity: 1;
}
ul.pairfoot2 li > a:hover {
  color: #FFC81D;
}
ul.pairfoot2 > li {
  padding: 0;
}
/* last line of footer */
.copyright {
  text-align: center;
  color: #FFC81D;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0px;
}
.copyright a {
  color: #FFC81D;
  text-decoration: none;
}
/* used to keep footer arranged correctly */
.nowrap {
  white-space: nowrap;
}

.other h1, .other h2, .other h3, .other h4 {
  text-align: left;
  padding: 10px 0px;
}
.other ul {
  list-style-type: disc;
}
.other li {
  padding: 5px 0px;
}

/*
   MOBILE
   unmerged mobile classes start here
   media queries are used to alter appearance based on width of screen
*/

.mobile-only-block, .mobile-only-inline {
  display: none;
}

@media (max-width: 1200px) {

  /* anything with this class will be hidden */
  .mobile-hide {
    display: none !important;
  }
  .mobile-only-block {
    display: block;
  }
  .mobile-only-inline {
    display: inline;
  }

  /* all regular plan displays are replaced by planblocks on mobile */
  .planchart {
    display: none;
  }
  /* VPS and QS tabs are replaced by planblocks on mobile (redundant?) */
  #tabs-vps {
    display: none;
  }

  .plan-content ul {
    text-align: center;
  }
  .plantable {
    padding: 0px;
    background: #226C98;
  }
  .plantable > div {
    padding: 20px 40px;
    border-top: none;
    border-bottom: none;
  }

  .navbar-right li a {
    font-size: 15px;
    padding: 15px 5px;
  }

} /* MEDIA 1200 */

@media (max-width: 768px) {

  /* hide breadcrumbs on narrow screens */
  .breadcrumb {
    opacity: 0;
  }
  .breadcrumb-container {
    display: none;
  }
  #adv-tabs li {
    width: 45%;
    float: left;
    margin: 0 auto;
    display: block;
  }
  #adv-tabs {
    max-width: 400px;
    min-width: 200px;
  }
  .navbar-default .navbar-collapse.in {
    padding-top: 40px;
  }

} /* MEDIA 768 */